Suggest an edit

Improve this article

Refine the answer for “What does the "Render Props" pattern do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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*.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts734 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.