Part 45: Higher-Order Components & Render Props Patterns

Before hooks became standard, Higher-Order Components (HOCs) and Render Props were the primary architectural patterns for sharing logic across components. Understanding them is essential when working with enterprise and open-source codebases.

1. Higher-Order Components (HOC)

A Higher-Order Component is a pure function that takes a component and returns an enhanced component: const EnhancedComponent = higherOrderComponent(WrappedComponent);

Example: withAuthentication HOC

import React from 'react';
import { Navigate } from 'react-router-dom';

export function withAuthentication(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    const token = localStorage.getItem('auth_token');

    if (!token) {
      return <Navigate to="/login" replace />;
    }

    return <WrappedComponent {...props} token={token} />;
  };
}

// Consuming the HOC:
function SecretDashboard({ token }) {
  return <h1>Dashboard with access token: {token}</h1>;
}

export default withAuthentication(SecretDashboard);

2. The Render Props Pattern

A render prop is a prop that receives a function returning JSX, delegating rendering decisions to the consumer:

import { useState, useEffect } from 'react';

export function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMove = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handleMove);
    return () => window.removeEventListener('mousemove', handleMove);
  }, []);

  return render(pos);
}

// Consuming Render Prop:
export default function App() {
  return (
    <MouseTracker
      render={({ x, y }) => (
        <h3>Mouse position: X: {x}, Y: {y}</h3>
      )}
    />
  );
}

Key Takeaways

• HOCs wrap components to inject props or conditional behavior.
• Render props pass functions as props to share dynamic state.
• While Custom Hooks are preferred today, both patterns remain vital in legacy and library codebases.

In Part 46, we enter Module 8 to master Performance Optimization & DevTools Profiling!