Render props
Тема дорожной карты · React
Паттерн Render Props — это техника React для совместного использования логики состояния между компонентами путём передачи функции в виде пропса: эта функция получает общее состояние и возвращает JSX, давая вызывающему компоненту полный контроль над рендерингом. Получивший широкое распространение до появления хуков, Render Props решал те же сквозные задачи (отслеживание мыши, аутентификация, подписки на данные), которые кастомные хуки теперь решают более лаконично в современном React. Компонент, реализующий Render Props, обычно вызывает props.render(internalState) или использует props.children как функцию (children(internalState)), что даёт паттерну альтернативное название «children as a function». Хотя Render Props в значительной мере вытеснены кастомными хуками useXxx в современной разработке на React, понимание паттерна ценно, поскольку он часто встречается в старых кодовых базах и в библиотеках типа React Router v5 и Formik. Типы TypeScript для компонентов с Render Props используют типы функций в интерфейсе Props (например, render: (data: Data) => React.ReactNode) для обеспечения типобезопасности по всей цепочке компоновки компонентов.
Как это работает
Render props покрывает переиспользуемые техники композиции: Compound Components (родитель + дети делят state через Context — <Tabs><TabList><Tab/></TabList></Tabs>), Render Props (компонент принимает функцию, возвращающую JSX — <X>{value => <Y v={value}/>}</X>), Higher-Order Components (функция, оборачивающая компонент — withAuth(Page)), Portals (рендер в другое поддерево DOM через createPortal), Error Boundaries (классовые компоненты, ловящие render-ошибки через componentDidCatch).
Когда применять
Compound Components — для UI-примитивов, где родитель + дети делят контракт (Tabs, Accordion, Select). Portals — для модалок, тултипов, toast, которым нужно сбежать из overflow:hidden или stacking context. Оборачивайте всё приложение (и рискованные поддеревья) в Error Boundary — иначе брошенная render-ошибка обнуляет страницу. Render Props и HOC в основном вытеснены хуками; берите их только в legacy-библиотеках.
Типичные ошибки
Ловушки Render props: переизобретение Compound Components, когда react-aria или Radix уже дают accessible-примитивы; Portal-контент теряет Context родительского React-дерева (portal формально в дереве, но если забыли — accessibility ломается); Error Boundaries, тихо съедающие ошибки без логирования (никогда о них не узнаёте); HOC-пирамида (withA(withB(withC(Page))) — хуки заменили). Используйте готовые библиотеки перед своими абстракциями.