What does the "Function as Child" pattern do?

ReactJunior~2 min read

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

The component receives children
Checks that it is a function
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.

Short Answer

Interview ready

Premium

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