Frontend Beauty
ESC

Type to search the knowledge base.

Render Props Pattern

Render props share code via a function prop that returns React nodes: classic Mouse, vs custom hooks today.

intermediate3 min read
  • react
  • render-props

A render prop is a prop whose value is a function the component calls to know what to render. It was a dominant reuse pattern before Hooks — and still appears in some library APIs.

function Mouse({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const move = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', move);
    return () => window.removeEventListener('mousemove', move);
  }, []);
  return render(pos);
}

// usage
<Mouse render={({ x, y }) => <cursor style={{ left: x, top: y }} />} />

Function-as-children is the same idea with children as the function (children patterns).

Docs: Render Props — legacy.

Why it existed

Share stateful behavior without HOCs nesting: one component owns subscription/state, caller owns visual output.

Why hooks won for app code

function useMouse() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const move = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', move);
    return () => window.removeEventListener('mousemove', move);
  }, []);
  return pos;
}

function Cursor() {
  const { x, y } = useMouse();
  return <div style={{ left: x, top: y }} />;
}

Hooks avoid the “callback pyramid” of nested render props and read more linearly.

Where render props remain useful

  • Library APIs that must yield control of rendering (Downshift, headless UI sometimes).
  • Slotting custom UI into a complex headless machine.
  • Cases where the consumer must render siblings based on internal state the hook alone cannot structure as cleanly.

Performance note

Inline render functions create new function identities each parent render — can break memo on children. Stable callbacks or moving to hooks reduce that noise.

Interview out-loud

“Render props pass a function that returns React nodes so a component can share state while the caller controls UI. Custom hooks replaced most app-level render props. I still recognize the pattern in headless libraries and function-as-children APIs.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides