Когда кажется, что паттерн Render Props — это устаревшее и непопулярное решение, вдруг находишь ему применение в headless UI-компонентах, а потом появляются и новые проекты, которые раскрывают его возможности по-новому.

RenderHooks позволяет размещать хуки прямо рядом с разметкой, где они действительно нужны — без обёрток-компонентов, без нарушения правил хуков и без шаблонного кода, даже если вы используете собственные хуки.

`import $ from 'render-hooks';

export function Counter() { return ( <$> {({ useState }) => { const [n, set] = useState(0); return set(n + 1)}>Clicked {n}; }}

); }

А вот with-react — коллекция React-компонентов, которые оборачивают хуки и предоставляют более композиционный API. Каждый компонент принимает render prop, получающий значение, возвращаемое хуком.

Это позволяет реализовать поведение, которое ранее нарушало бы правила хуков. `function SearchForm() { return (

{(status) => (

{status.pending ? 'Submitting...' : 'Submit'}

)}

) }

Но не забывайте: чрезмерная логика внутри компонентов приводит к проблемам с поддержкой и производительностью. Поведение, основанное на ререндеринге, может быть непредсказуемым. Лучше выносить логику вне React-компонентов, когда это возможно.``