Frontend Academy · Lesson

Render Props and HOC Patterns

Pass a render function as a prop to inject UI, and wrap components in Higher-Order Components to inject behaviour without modifying the original.

Two Classic Reuse Patterns

Before hooks (React 16.8), reusing stateful logic meant either Higher-Order Components (HOCs) or render props. They're rare in new code but you still meet them in legacy codebases and many libraries.

Render Props — The Idea

A component accepts a function as a prop (commonly named render or children) and calls it with internal state. The consumer decides what to render with that state.

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

// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />

All lessons in this course

← Back to Frontend Academy