React Academy · Lesson

Render Props Pattern

Pass a function as a prop that returns JSX to share behavior without coupling UI.

Render Props Pattern is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will understand the render props pattern — passing a function as a prop that returns JSX — and learn when it is useful for sharing behaviour across components.

What Is Render Props?

Render props is a pattern where a component accepts a prop that is a function. The component calls this function to produce its rendered output. The consumer controls the UI; the component provides the behaviour.

<DataProvider render={data => <UserCard user={data} />} />

Simple Render Prop Example

A Toggle component manages open/closed state and calls a render prop with the current state and a toggle function. The consumer decides how to render.

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Using children as the Render Prop

Instead of a named render prop, you can use `children` as a function. Many libraries (React Router v5, Formik) use this pattern — it is sometimes called 'children as a function'.

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Mouse Position Tracker

A classic render props example: a MouseTracker component tracks cursor position and passes it to a render prop. Any consumer can display the position however it wants.

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>
  );
}

Render Props vs Custom Hooks

Render props were the go-to pattern before hooks. Custom hooks now do the same thing more cleanly: the hook returns data and functions; the component uses them in its own JSX. Hooks are preferred in modern React.

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

When Render Props Still Make Sense

Render props are still useful when: (1) you need to inject dynamic rendering at a specific location in the tree, (2) you are building a headless component library that separates logic from UI.

Performance Warning

Defining a render prop inline creates a new function on every parent render, preventing PureComponent/React.memo children from bailing out. Extract render prop functions to a stable variable or method.

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Composing Render Props

Nesting multiple render-prop components quickly creates the 'render prop hell' or 'wrapper hell' — deeply nested callbacks that are hard to read. This is one reason hooks were introduced.

Render Props in Libraries

React Router v5 used render props for Route. Downshift, Formik, and React-Table also use variants. Understanding render props helps you read and debug code that uses these libraries.

Quick Check

What is the main advantage of the render props pattern over passing static JSX?

Recap

Render props pass a function that returns JSX. The component provides behaviour; the consumer provides UI. Prefer custom hooks in modern React, but understand render props for reading existing code and building headless components.

Up Next

Next lesson: **Higher-Order Components (HOCs) Explained** — you will wrap components to inject props, guard routes, or add logging.

Frequently asked questions

Is the “Render Props Pattern” lesson free?

Yes — the full text of “Render Props Pattern” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Render Props Pattern”?

Pass a function as a prop that returns JSX to share behavior without coupling UI. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Render Props Pattern” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Render Props Pattern
Higher-Order Components (HOCs) Explained
HOC vs Render Props vs Custom Hooks
Refactoring a HOC to a Custom Hook

← Back to React Academy