mediumFrontend

What are render props and how do they work?

Q: What are render props and how do they work?

**Core concept (TL;DR).** A render prop is a **function passed as a prop** (often as children ) that a component calls to let the *caller* decide what to render, while the component supplies the data/behaviour. Like HOCs, it's a pre-hooks pattern for sharing stateful logic — and like HOCs, **custom hooks** have largely replaced it. Component owns the data; caller owns the UI <Mouse>

1.0k views

Understand the problem

An older but powerful pattern for sharing code between React components.

patternsreusability

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A Toggle component with a render prop

import { useState } from "react";

function Toggle({ children }) {       // children is a function (render prop)
  const [on, setOn] = useState(false);
  return children({ on, toggle: () => setOn((v) => !v) });
}

export default function App() {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <Toggle>
        {({ on, toggle }) => (        // caller decides the UI from the data
          <button onClick={toggle}>{on ? "ON" : "OFF"}</button>
        )}
      </Toggle>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How would you structure a large React application?

Explain the concept of reconciliation in React.