Ketiganya berbagi logika antar komponen, tetapi mereka berkembang seiring waktu dan custom hooks adalah standar modern untuk berbagi logika.
Sebuah fungsi yang mengambil komponen dan mengembalikan yang ditingkatkan:
= => {
user = ();
user ? : ;
};
= ();
Kekurangan: wrapper nesting ("wrapper hell" dalam pohon), tabrakan nama prop, dan tidak jelas dari mana prop yang disuntikkan berasal.
Sebuah komponen mengambil fungsi sebagai anak untuk berbagi status:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Fleksibel, tetapi menumpuk beberapa komponen render-prop menciptakan "piramida callback."
Ekstrak logika stateful ke dalam fungsi useX — tidak ada nesting pohon ekstra, aliran 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).