Toate trei partajează logică între componente, dar au evoluat în timp și custom hooks sunt standardul modern pentru a partaja logică.
O funcție care primește o componentă și returnează o versiune îmbunătățită:
= => {
user = ();
user ? : ;
};
= ();
Inconveniente: imbricarea wrapper-elor ("wrapper hell" în arbore), coliziuni de nume de props, și este neclar de unde provin props-urile injectate.
O componentă primește o funcție ca copil al acesteia pentru a partaja stare:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexibil, dar imbricarea mai multor componente render-prop creează o "piramidă de callback-uri".
Extrageți logica cu stare într-o funcție useX — fără imbricări suplimentare de arbore, flux de date explicit:
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/componente).