It-talata kollha jaqsmu l-logika bejn il-komponenti, iżda evolwew matul iż-żmien u custom hooks huma l-istandard modern għal qsim ta' logika.
Funzjoni li tieħu komponent u tirritorna wieħed imtejjeb:
= => {
user = ();
user ? : ;
};
= ();
Svantaġġi: wrapper nesting ("wrapper hell" fl-ilsieraħ), kolliżjonijiet ta' ismijiet ta' prop, u mhu ċar minn fejn itsellef il-props injettati.
Komponent li jieħu funzjoni bħala child biex jaqsam il-ħolat:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flessibli, iżda nesting ta' ħafna komponenti render-prop joħloq "callback pyramid".
Estratta l-logika stateful fi funzjoni useX — mingħajr nesting ilsieraħ addizzjonali, fluss tad-data espliċit:
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/komponenti).