Suggest an edit

Improve this article

Refine the answer for “What does the "Function as Child" 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

> **Function as Child (FaCC)** is a pattern where a component's `children` is **not a JSX element but a function**,
> which the component calls, passing it data or logic.

In other words, the component **does not render the UI itself**, it **delegates**, handing the data outward so external code decides *what and how to render*.

---

## Example: tracking the cursor position

### The usual way

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

return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      <p>Position: {pos.x}, {pos.y}</p>
    </div>
  );
}
```

> This works, but the UI and the logic are **tightly coupled**.

---

### Function as Child

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

return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}  {/* the child function */}
    </div>
  );
}

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

> Here `<Mouse>` is the component with the logic,
> and `App` decides **what to render** by passing a function as `children`.

---

## What happens under the hood

1. The component receives `children`
2. Checks that it is a function
3. Calls it with some data

```javascript
function Provider({ children }) {
  const data = { user: "Tim", isLoggedIn: true };
  return children(data);  // call the function
}
```

> This way, the component "shares" its state outward,
> but **does not control how it is displayed**.

---

## A real example: `<DataFetcher>`

```javascript
function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);

useEffect(() => {
    fetch(url)
      .then((r) => r.json())
      .then(setData);
  }, [url]);

return children(data);  // the function receives the data
}

// Usage
<DataFetcher url="/api/user">
  {(data) =>
    data ? <p>Hello, {data.name}!</p> : <p>Loading...</p>
  }
</DataFetcher>
```

> The `DataFetcher` component is only responsible for the **loading logic**
> While external code decides **how to render the data**

---

## Function as Child vs Render Props

These two patterns are **almost identical**;
the difference is **in the syntax** and **the name of the prop** the function is passed through:

| Pattern | How it's used |
|---|---|
| **Render Props** | `<Component render={(data) => <UI data={data} />} />` |
| **Function as Child** | `<Component>{(data) => <UI data={data} />}</Component>` |

Both do the same thing:

- receive a function as an argument,
- call it,
- render whatever it returns.

> In React, `children` is preferred -
> it is a *more natural* JSX syntax than a separate `render` prop.

---

## When to use Function as Child

Good fit when:

- You need to **share logic** (scroll, resize, mouse, fetch, auth)
- The component is **"behavioral"** rather than visual
- You want to **invert control**: the component *provides data*, and the *parent decides how to render it*

Not worth using when:

- the component should be a **simple UI block**,
- the logic does not need rendering flexibility (a custom hook is better then).

---

## Relationship to modern hooks

Today, **custom hooks** are often used instead of `Function as Child`,
doing the same thing without the extra JSX layer:

### Before (FaCC)

```javascript
<Mouse>{(pos) => <Cursor pos={pos} />}</Mouse>
```

### After (Hook)

```javascript
function CursorTracker() {
  const pos = useMouse();
  return <Cursor pos={pos} />;
}
```

> Hooks are an evolution of the `Render Props` / `Function as Child` patterns:
> they solve the same problem, **separating logic from presentation**, but more simply.

---

## Summary

| What | Description |
|---|---|
| Idea | Pass a function as `children` so the component can share its state |
| Mechanism | The component calls `children(data)` |
| Goal | Separate logic from UI without imposing a structure |
| Example | `<Mouse>{(pos) => <UI pos={pos} />}</Mouse>` |
| Modern alternative | Custom hooks |
| Used for | Behavior (scroll, resize, mouse, fetch, auth) |

---

> **The main idea:**
> "Function as Child" is a way to **make a component a source of data**
> without deciding for the developer *exactly how to render it*.
>
> The component shares logic → the parent controls the presentation.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.