Tutti e tre condividono la logica tra i componenti, ma si sono evoluti nel tempo e gli custom hooks sono l'impostazione predefinita moderna per condividere logica.
Una funzione che prende un componente e restituisce uno migliorato:
= => {
user = ();
user ? : ;
};
= ();
Svantaggi: annidamento di wrapper ("wrapper hell" nell'albero), collisioni di nomi di prop, e non è chiaro da dove provengono i prop iniettati.
Un componente prende una funzione come figlio per condividere lo stato:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flessibile, ma annidare diversi componenti render-prop crea una "piramide di callback".
Estrai la logica stateful in una funzione useX — nessun annidamento aggiuntivo dell'albero, flusso di dati esplicito:
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/componenti).