Skip to main content

Higher-Order Components and Render Props

Higher-Order Components (HOC)​

function withAuth<P extends object>(Component: React.ComponentType<P>) {
  return (props: P) => {
    const { user, loading } = useAuth();

    if (loading) return <Spinner />;
    if (!user) return <Redirect to='/login' />;

    return <Component {...props} />;
  };
}

// Usage
const ProtectedDashboard = withAuth(Dashboard);

Render Props Pattern​

interface MouseTrackerProps {
  render: (position: { x: number; y: number }) => React.ReactNode;
}

function MouseTracker({ render }: MouseTrackerProps) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return <>{render(position)}</>;
}

// Usage
<MouseTracker
  render={({ x, y }) => (
    <div>
      Mouse at: {x}, {y}
    </div>
  )}
/>;

When to Use​

HOCs:

  • Cross-cutting concerns
  • Prop manipulation
  • Legacy codebases

Render Props:

  • Runtime composition
  • Dynamic behavior
  • Sharing state logic

Custom Hooks (Preferred):

  • Modern React
  • Simpler composition
  • Better TypeScript support