Explain Slot / Children-as-Function Pattern in React

49 / 100

Patternsintermediate

Slot / Children-as-Function Pattern

Learn the pattern of passing children as a function to expose internal state directly at the usage site, without a separate render prop name.

The 'function as children' pattern is a variant of render props where instead of a distinctly-named prop like render, the special children prop itself is a function. React treats children as just another prop, so there's nothing stopping it from being a function rather than JSX — the parent component simply calls this.props.children(data) (or props.children(data) in a function component) instead of rendering children directly as markup.

It's the same tour-guide idea as render props, just handing you the blank photo frame through the normal 'children' pocket of your backpack instead of a separately labeled compartment — same delivery mechanism, more familiar-looking packaging.

Key Concepts

This reads slightly more naturally at the call site than an explicit render prop, since JSX between the opening and closing tags can be an arrow function rather than markup: <Toggle>{(on) => <p>{on ? 'ON' : 'OFF'}</p>}</Toggle>. Some component libraries favor this exact style because it doesn't require documenting a special-named prop — consumers already understand children intuitively.

render<Toggle>{(on) => <p>{on ? 'ON' : 'OFF'}</p>}</Toggle>children

Like render props generally, this pattern has been substantially replaced by custom hooks for pure logic-sharing use cases, but it remains relevant in libraries that need to control exactly when and how child content renders (for example, virtualization libraries that only render visible rows by calling a children function per visible item) or that want an ergonomic, hook-free API for non-hook consumers.

Interviewers occasionally ask candidates to identify this pattern in unfamiliar library code (seeing {children(...)} inside a component and correctly explaining what's happening) since it can look surprising to someone who has only seen children used as static JSX before.

{children(...)}children