Kabeh telu padha-padha nuduhake logika antarane komponen, nanging berkembang sajrone wektu lan custom hooks minangka standar modern kanggo nuduhake logika.
Suatu fungsi sing njupuk komponen lan bali siji sing ditambah:
= => {
user = ();
user ? : ;
};
= ();
Kekurangan: wrapper nesting ("wrapper hell" ing wit), tabrakan jeneng prop, lan ora jelas yen prop injected saka ngendi.
Suatu komponen njupuk fungsi minangka anake kanggo nuduhake state:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Fleksibel, nanging nesting sawetara komponen render-prop nggawe "callback pyramid".
Ekstrack logika stateful menyang fungsi useX — ora ana nesting wit tambahan, alur data eksplisit:
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/komponen).