Alle tre deler logik mellem komponenter, men de er udviklet over tid og custom hooks er den moderne standard for at dele logik.
En funktion, der tager en komponent og returnerer en forbedret:
= => {
user = ();
user ? : ;
};
= ();
Ulemper: indlejring af wrappere ("wrapper hell" i træet), prop navnesammenstød og det er uklart, hvor injicerede props kommer fra.
En komponent tager en funktion som sit barn for at dele tilstand:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Fleksibelt, men indlejring af flere render-prop komponenter skaber en "callback pyramide".
Uddrag den stateful logik til en useX funktion — ingen ekstra træindlejring, eksplicit dataflow:
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).