Alle tre deler logikk mellom komponenter, men de utviklet seg over tid og egendefinerte hooks er den moderne standarden for å dele logikk.
En funksjon som tar en komponent og returnerer en forbedret versjon:
= => {
user = ();
user ? : ;
};
= ();
Ulemper: wrapper nesting ("wrapper hell" i treet), propnavnkollisioner, og det er uklart hvor injiserte props kommer fra.
En komponent tar en funksjon som sitt barn for å dele tilstand:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Fleksibel, men nesting av flere render-prop-komponenter skaper en "callback pyramid."
Ekstrahér den stateful logikken inn i en useX-funksjon — ingen ekstra tree nesting, eksplisitt dataflyt:
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/komponenter).