intermediate

Render props

Передавайте поведение рендеринга как функцию, когда потребителям нужен контроль над разметкой и использованием state.

Render prop — функция в props, часто `children` как функция, где родитель владеет state и логикой, а потребитель решает разметку. До hooks так делили поведение вроде отслеживания мыши или подписок на данные.

Hooks во многом заменили render props для переиспользования логики, но паттерн ещё встречается в библиотеках, когда нужен полный контроль вывода. Избегайте inline render-функций на горячих путях, если они ломают memoization.

					<MouseTracker render={({ x, y }) => <div style={{ left: x, top: y }} />} />

На интервью объясняйте концепцию на конкретном примере и называйте поведение, которое проверяют.

Типовые ошибки: скрывать поток данных, дробить компоненты чрезмерно и выполнять побочные эффекты в render.

Компромисс часто между ясностью и переиспользованием или между явными props и удобством.

Чеклист:

Родитель владеет state; функция-потомок — JSX.
Рассмотрите пользовательский hook как современную альтернативу.
Следите за ссылочной нестабильностью inline render-функций.