Render-props

Render-проп — это проп, значение которого — функция, возвращающая JSX; компонент вызывает её, чтобы отрисовать. Вместо возврата фиксированной разметки владеющий компонент вызывает функцию и передаёт своё внутреннее состояние и обработчики как аргументы. Вызывающий получает их и решает, что рисовать. children — это просто render-проп со специальным именем; передача функции как children — идиоматичная форма.

function Toggle({ children }: { children: (on: boolean, toggle: () => void) => React.ReactNode }) {
  const [on, setOn] = useState(false);
  const toggle = () => setOn((v) => !v);
  return <>{children(on, toggle)}</>; // отдаём состояние + обработчик обратно вызывающему
}

// вызывающий владеет разметкой; Toggle владеет поведением
<Toggle>
  {(on, toggle) => (
    <button onClick={toggle} aria-pressed={on}>{on ? "On" : "Off"}</button>
  )}
</Toggle>

Компонент делится тем, что он делает, не диктуя, как он выглядит.

Поток данных — это инверсия: ребёнок вычисляет состояние, затем зовёт наверх функцию родителя, чтобы отрисовать его. Обычные пропсы текут родитель → ребёнок. Render-проп идёт в обратную сторону во время рендера: Toggle держит состояние, но делегирует отрисовку обратно тому, кто его отрендерил. Это инверсия управления — владеющий компонент управляет поведением; вызывающий управляет представлением. Два экрана могут разделять один Toggle и рисовать совершенно разный UI.

// экран A — переключатель
<Toggle>{(on, toggle) => <Switch checked={on} onChange={toggle} />}</Toggle>

// экран B — чекбокс с подписью, то же поведение, другая разметка
<Toggle>{(on, toggle) => (
  <label><input type="checkbox" checked={on} onChange={toggle} /> Notifications</label>
)}</Toggle>

Ни один экран не переписывает логику переключения, и Toggle ничего не знает о переключателях или чекбоксах.

Для переиспользования чистой логики кастомный хук делает ту же работу площе — вот почему render-props поблёкли. Render-проп исторически был единственным способом разделить состояние-несущую логику без классового HOC. Хуки сделали поведение вызываемым напрямую, без лишнего компонента и без вложенности. Если всё, что тебе нужно, — это состояние вкл/выкл, верни его из хука и дай потребителю рендерить как обычно.

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  return [on, toggle] as const;
}

// нет компонента-обёртки, нет отступа функции-ребёнка — просто значения в области видимости
function NotificationRow() {
  const [on, toggle] = useToggle();
  return <Switch checked={on} onChange={toggle} />;
}

Когда общее — это логика, возвращающая значения, предпочитай хук. Он композируется с другими хуками, не добавляет глубины дереву и читается сверху вниз.

Render-props всё ещё правильный инструмент, когда компонент должен внедрить что-то во время рендера. Хук возвращает значения до того, как ты рендеришь; он не может решить, как рисуется каждый элемент внутри структуры, которой управляет библиотека. Когда владеющий компонент владеет циклом рендеринга — виртуализированный список, решающий, какие строки видимы; фетчер, рисующий одну из веток loading/error/data; измеряющий компонент, знающий размер бокса, — он должен позвать тебя обратно во время собственного рендера. Это в точности render-проп.

// библиотека владеет тем, какие строки существуют в этом кадре; ТЫ владеешь разметкой каждой строки
<VirtualList items={users} rowHeight={48}>
  {(user, index) => <UserRow key={user.id} user={user} index={index} />}
</VirtualList>

// фетчер владеет машиной состояний loading/error/data; ты рисуешь каждую ветку
<Query url="/api/users">
  {(state) =>
    state.status === "loading" ? <Spinner />
    : state.status === "error" ? <Error msg={state.error} />
    : <List data={state.data} />}
</Query>

Хук не может сделать это чисто: он не сидит внутри рендера списка или переключателя веток фетчера. Инъекция во время рендера — это непреходящая ниша render-пропа.