Все три способа позволяют разделять логику между компонентами, но они развивались со временем и custom hooks — это современный стандарт для совместного использования логики.
Функция, которая принимает компонент и возвращает улучшенную версию:
= => {
user = ();
user ? : ;
};
= ();
Недостатки: вложенность обёрток ("wrapper hell" в дереве), конфликты имён props, и неясно, откуда берутся инъецированные props.
Компонент принимает функцию в качестве потомка для совместного использования состояния:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Гибкий подход, но вложенность нескольких компонентов с render props создаёт "пирамиду обратных вызовов".
Экстрагируйте логику состояния в функцию useX — без лишней вложенности дерева, явный поток данных:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => { /* attach listener, cleanup */ }, []);
return pos;
}
function Component() {
const { x, y } = useMouse(); // clear, flat, composable
}
children/компонентов).