What is the Render Props pattern, and how is it used today?

Short answer

It passes a function to a component as a prop (or children); the component calls it with internal data to control how the output is rendered.

Explanation

This pattern was once a common way to share behavior, such as tracking mouse movement or scrolling, before Hooks. Custom Hooks replaced most use cases, but Render Props remain useful in virtualizers and chart libraries to customize how individual items are rendered.

Code example

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

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

  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

Common mistakes

• Passing inline anonymous functions on every render, which may prevent child components from benefiting from React.memo.

Follow-up questions

• How do Higher-Order Components (HOC) differ from Custom Hooks, and why did Hooks replace HOCs?

Sources

• React legacy docs — Render Props