Performance & Patterns

React Render Props Pattern

The render props pattern passes a function as a prop (often children) and lets the component call it with data it manages. It shares stateful logic while leaving the markup entirely to the caller.

What is Render Props Pattern in React?

The render props pattern passes a function as a prop (often children) and lets the component call it with data it manages. It shares stateful logic while leaving the markup entirely to the caller.

Render Props Pattern example

Sharing mouse position

JSX

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

<MouseTracker>
  {({ x, y }) => <p>Pointer at {x}, {y}</p>}
</MouseTracker>

Key points to remember

A custom hook expresses the same idea without nesting.
Still useful when the component must own the DOM element the logic attaches to.
Deep nesting of render props is the "wrapper hell" hooks were designed to remove.

React Render Props Pattern— Interview Questions & FAQs

Render props or custom hooks?+

Custom hooks in almost every case — the calling component stays flat. Render props remain useful when the shared logic must also render or own a DOM element.