What does the "Render Props" pattern do?

ReactJunior~2 min read

Definition

Render Props is a pattern where a component receives a function as a prop, and calls it inside itself, passing it the needed data or behavior.

In other words:

The component itself does not know exactly what to render - it just shares logic, while outside code decides how to display it.

The meaning of the pattern

Render Props lets you build reusable logic (for example, handling state, events, API requests, etc.) and extract it into a separate component, without tying it rigidly to a UI.

Example: tracking cursor position

Without Render Props (everything in one component)

javascript

function MouseTracker() {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <div
      onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}
      style={{ height: 200, background: '#eee' }}
    >
      <p>Coordinates: {pos.x}, {pos.y}</p>
    </div>
  );
}

This works, but the UI and the logic are coupled. We cannot reuse the "mouse tracking logic" anywhere else.

With Render Props

javascript

function Mouse({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <div
      onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}
      style={{ height: 200 }}
    >
      {children(pos)}  {/* ← render function */}
    </div>
  );
}

// Use it
function App() {
  return (
    <Mouse>
      {(pos) => <p>Cursor position: {pos.x}, {pos.y}</p>}
    </Mouse>
  );
}

Here <Mouse> manages the logic, while the component that uses it decides how to render the result.

How it works under the hood

The component receives a function via props (for example, children or render)
Inside the component, this function is called with the needed data
React renders whatever this function returns

javascript

{props.render(data)}

javascript

{props.children(state)}

Example: a component with Render Props for state

javascript

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

  return children({ on, toggle });
}

// Use it
<Toggle>
  {({ on, toggle }) => (
    <div>
      <button onClick={toggle}>{on ? "Off" : "On"}</button>
      {on && <p>Secret text</p>}
    </div>
  )}
</Toggle>

Here <Toggle> is responsible for the logic, while the markup is defined by the user through the render prop.

Why Render Props is needed

Problem	How Render Props solves it
You want to reuse logic, but not the UI	You extract it into a component and pass the UI as a function
You need to separate data and presentation	The data arrives through the render function
You don't want to use HOCs	Render Props is an alternative to HOCs
You need a component that "shares state"	It passes state and actions into the function

When to use it

It fits for:

repeated logic (hover, toggle, fetch, resize, mouse position, scroll)
state (open/closed, selected/not selected)
shared "behavioral" components

It does not fit if:

the code becomes heavily nested;
it is enough to simply move the logic into a custom hook (in the React Hooks era).

The modern alternative to Render Props - hooks

With the arrival of React Hooks, the Render Props pattern has been almost entirely replaced by custom hooks, because they are simpler and less nested.

Example: the same `Toggle`, but with a hook

javascript

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = () => setOn(!on);
  return { on, toggle };
}

function App() {
  const { on, toggle } = useToggle();
  return (
    <>
      <button onClick={toggle}>{on ? "ON" : "OFF"}</button>
      {on && <p>Secret text</p>}
    </>
  );
}

The hook does the same thing a component with Render Props used to do, but without the nesting and with a cleaner structure.

Summary

What	Description
Idea	The component accepts a function that it calls to render
Goal	Separate logic and presentation
How it works	`props.children(state)` or `props.render(data)`
Advantages	Reusable logic, flexible UI
Modern alternative	Custom hooks

Main takeaway: Render Props is a way to share behavior, not markup. The component exposes state and events, and the outside code decides how to visualize them.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.