Render Props Pattern

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.”

Related on this site

• Higher-Order Components
• Children Prop Patterns
• Composition vs Inheritance
• Rules of Hooks

Further reading

• Render Props — legacy React docs
• Custom Hooks — react.dev

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

• useCopyToClipboard HookCopy text with navigator.clipboard, fallback execCommand, transient copied state, and permissions that fail in insecure contexts.
• useDebouncedValue HookDebounce a changing value in React without firing effects on every keystroke. Cleanup, leading vs trailing, and the stale timer that updates unmounted state.
• useEventListener HookAttach a window, document, or element listener with a stable handler ref so you do not rebind on every render. Capture option and target changes.
• useFetch With AbortControllerFetch in an effect with a signal, ignore aborted errors, and prevent the slow response from winning a race after the url changes.
• useIdle HookDetect idle users: reset a timer on input events, fire idle after timeout, and decide whether mount starts the timer immediately.