Render Props — React Deep Dive

the idea: a prop that is a function

A normal child is static JSX: the parent decides what to draw. A render prop flips that — the component owns the state and calls props.render(state) (or props.children(state)) to let the consumer decide what to draw with that state. The component is in charge of what data exists; the consumer is in charge of how to show it. This is inversion of control — the same trick React itself uses for Array.map(item => <li/>) and <Context.Consumer>{value => ...}</Context.Consumer>.

form	shape	who uses it
`render` prop	`<X render={state => <p/>}/>`	the classic form from the React docs (React < 16.3 MouseTracker example)
`children` as function	`<X>{state => <p/>}</X>`	react-spring, react-motion, downshift, Framer Motion (idiomatic since 2017)
multi-arg render	`render={(state, helpers) => ...}`	downshift `{({getItemProps, highlightedIndex}) => ...}`
prop injection	`<List row={item => <Card item={item}/>}/>`	virtualized lists, data tables — consumer supplies the row renderer

1 · the components you write (edit me)

// Pattern 1: render prop — component owns state, delegates rendering
function MouseTracker(props) {
  var posState = React.useState({ x: 0, y: 0 });
  var pos = posState[0];
  var setPos = posState[1];

  function handleMove(e) {
    var x = (e && e.clientX) ? Math.round(e.clientX) : 0;
    var y = (e && e.clientY) ? Math.round(e.clientY) : 0;
    setPos({ x: x, y: y });
  }

  return (
    <div
      data-testid="tracker"
      onMouseMove={handleMove}
      className="p-6 bg-[#0d1117] border border-[#30363d] rounded-lg min-h-[120px]"
    >
      {props.render(pos)}
    </div>
  );
}

// Pattern 2: children as a function (same inversion, different prop name)
function Counter(props) {
  var countState = React.useState(0);
  var count = countState[0];
  var setCount = countState[1];

  var helpers = {
    increment: function () { setCount(function (c) { return c + 1; }); },
    decrement: function () { setCount(function (c) { return c - 1; }); },
    reset:     function () { setCount(0); }
  };

  return props.children(count, helpers);
}

function RenderPropsDemo() {
  return (
    <div className="max-w-sm mx-auto p-5 bg-[#161b22] rounded-xl border border-[#30363d]">
      <h2 className="text-lg font-bold text-[#61dafb] mb-3">Render Props</h2>

      {/* Pattern 1: render prop */}
      <div className="mb-4">
        <p className="text-xs text-[#8b949e] mb-1">render prop (mouse tracker):</p>
        <MouseTracker render={function (pos) {
          return React.createElement(
            'p',
            { 'data-testid': 'mouse-pos', className: 'text-sm text-[#61dafb]' },
            'Position: ' + pos.x + ', ' + pos.y
          );
        }} />
      </div>

      {/* Pattern 2: children as function */}
      <div>
        <p className="text-xs text-[#8b949e] mb-1">children as function (counter):</p>
        <Counter>
          {function (count, helpers) {
            return (
              <div data-testid="counter-display" className="p-4 bg-[#0d1117] rounded border border-[#30363d]">
                <p className="text-2xl font-bold text-[#61dafb] mb-2" data-testid="count-val">{count}</p>
                <div className="flex gap-2">
                  <button data-testid="rp-inc" onClick={helpers.increment} className="px-3 py-1 bg-[#61dafb] text-[#0d1117] rounded font-bold text-xs">+</button>
                  <button data-testid="rp-dec" onClick={helpers.decrement} className="px-3 py-1 bg-[#30363d] text-[#e6edf3] rounded font-bold text-xs">−</button>
                  <button data-testid="rp-reset" onClick={helpers.reset} className="px-3 py-1 border border-[#30363d] text-[#8b949e] rounded font-bold text-xs">Reset</button>
                </div>
              </div>
            );
          }}
        </Counter>
      </div>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<RenderPropsDemo/>);

2 · Babel compiles JSX → element tree

<RenderPropsDemo/> becomes React.createElement(RenderPropsDemo). Inside, the consumer's function is passed as a prop and called by the component — Babel just turns the JSX sugar into nested createElement calls. The render-prop call site (props.render(pos)) is plain JS, untouched.

// (hit "compile & render" to see Babel's output)

3 · live React (inversion of control, proven)

MouseTracker calls your render function with mouse coordinates. Counter calls your children function with the count and helpers. Click + / − / Reset — the gold-check does this automatically and asserts the counter walks 0 → 1 → 2 → 1 → 0.

count: — · mouse: — · gold: 0 → + → 1 → + → 2 → − → 1 → Reset → 0

intent → pattern

intent	pattern	why
expose internal state to consumer	`<X render={s => <p/>}/>`	component owns state, consumer owns rendering — full inversion of control
idiomatic / "library style"	`<X>{s => <p/>}</X>`	children-as-function reads naturally; used by react-spring, downshift
pass state AND actions	`{(state, helpers) => ...}`	downshift ships `{getItemProps, highlightedIndex}` this way
inject a row renderer	`<List row={item => <Card item={item}/>}/>`	the list manages keys/virtualization; you supply the visual
prefer hooks instead	`function useMouse() { ... } return useMouse()`	when you don't need to control rendering — hooks replaced ~80% of render props
perf: function identity	wrap consumer's render fn in `useCallback`	inline `{() => ...}` breaks `React.memo` / `PureComponent`