Render props, higher-order components and custom hooks

On the shooting line	In code
a target judge, then the head judge, each write a score for the same end on an archer's sheet; the score written last is the one that counts, and the sheet does not say who wrote it	stacked HOCs and their injected props (steps 3–4)
the range master's whistle decides when each end is shot and calls out its number, as many ends as the round needs; how the archer shoots each one is hers	a render prop: the provider calls, the caller writes (steps 7–8)
an archer training alone keeps the round's timings herself and blows her own whistle	a custom hook: the logic runs in the caller (steps 5–6)

In real terms: before you add a wrapper, ask who decides the markup and who decides when it renders; if your component decides both, call a hook.

Breaks down when: an archer can ask the judges who wrote her score; a component cannot see which wrapper set its prop (step 3).

Contrasting case: a component that only formats a date needs none of the three: a plain function without use does, because it holds no state.

4.1 ExamHall EXH-4110 and MR !4410: two wrappers, one prop

EXH-4110: ExamHall's answer screen was wrapped by two HOCs, and both passed a status:

function withServerDeadline(Component) {
  return function WithServerDeadline({ clock, deadlineAt, ...props }) {
    const [now, setNow] = useState(() => clock.now());
    useEffect(() => clock.subscribe(() => setNow(clock.now())), [clock]);
    return <Component {...props} status={now >= deadlineAt ? 'closed' : 'open'} />;
  };
}
function withAutosave(Component) {
  return function WithAutosave(props) {
    const [saved, setSaved] = useState(0);
    return <Component status={saved ? 'saved' : 'editing'} {...props} onSave={() => setSaved((n) => n + 1)} />;
  };
}
function AnswerScreen({ status, onSave }) {
  return <form><textarea disabled={status === 'closed'} /><button type="button" onClick={onSave}>Save</button><output>{status}</output></form>;
}
const Screen = withAutosave(withServerDeadline(AnswerScreen));

EXH-4110 as shipped: components 3 (WithAutosave > WithServerDeadline > AnswerScreen) · start "open" · after Save "open" · at the deadline "closed", textarea disabled

The deadline's closed reached the textarea, but autosave's saved never did: WithAutosave writes its status before {...props}, and WithServerDeadline, nearer the screen, writes its own after them (steps 3–4). MR !4410 turns both into hooks, and the screen names what each returns:

function useServerDeadline(clock, deadlineAt) {
  const [now, setNow] = useState(() => clock.now());
  useEffect(() => clock.subscribe(() => setNow(clock.now())), [clock]);
  return Math.max(0, deadlineAt - now);
}
function useAutosave() {
  const [saved, setSaved] = useState(0);
  return { saved: saved > 0, save: () => setSaved((n) => n + 1) };
}
function AnswerScreen({ clock, deadlineAt }) {
  const left = useServerDeadline(clock, deadlineAt);
  const draft = useAutosave();
  return <form><textarea disabled={left === 0} /><button type="button" onClick={draft.save}>Save</button><output>{left === 0 ? 'closed' : draft.saved ? 'saved' : `${left}s left`}</output></form>;
}

MR !4410: components 1 (AnswerScreen) · start "60s left" · after Save "saved" · at the deadline "closed", textarea disabled

One component replaces three, and each value has one named source (steps 2, 5, 10). A reviewer now reads both sources in AnswerScreen's first two lines; before, she had to open both wrappers and compare where each wrote {...props}.

4.2 A render prop that passes nothing useful becomes children

ExamHall's rules panel can be folded away. It took a render prop, and the rules screen passed a function that ignored the panel's argument; a refactor gives the panel children instead:

function Collapsible({ title, render }) {
  const [open, setOpen] = useState(true);
  return <section><button type="button" onClick={() => setOpen(!open)}>{title}</button>{open && render(open)}</section>;
}
function FoldingPanel({ title, children }) {
  const [open, setOpen] = useState(true);
  return <section><button type="button" onClick={() => setOpen(!open)}>{title}</button>{open && children}</section>;
}
function ExamRules() {
  return <p>Calculators are not allowed.</p>;
}
// before renders:
<Collapsible title="Rules" render={() => <ExamRules />} />
// after renders:
<FoldingPanel title="Rules"><ExamRules /></FoldingPanel>

4.2 before (a render prop): render called 1 time, with (true); the function passed declares 0 parameters · shows <button> Rules, <p> Calculators are not allowed. · after a click on the title <button> Rules
4.2 after (children): shows <button> Rules, <p> Calculators are not allowed. · after a click on the title <button> Rules

The function decided nothing the screen could not decide alone, so children do the same job without one (steps 8 and 10).