Cả ba đều chia sẻ logic giữa các component, nhưng chúng tiến hóa theo thời gian và custom hook là mặc định hiện đại để chia sẻ logic.
Một hàm nhận một component và trả về một cái được nâng cao:
= => {
user = ();
user ? : ;
};
= ();
Nhược điểm: lồng wrapper ("wrapper hell" trong cây), va chạm tên prop, và không rõ props được tiêm đến từ đâu.
Một component nhận một hàm làm con của nó để chia sẻ state:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Linh hoạt, nhưng lồng nhiều component render-prop tạo một "kim tự tháp callback".
Trích logic có state vào một hàm useX — không lồng cây thêm, luồng dữ liệu rõ ràng:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => { /* gắn listener, dọn dẹp */ }, []);
return pos;
}
function Component() {
const { x, y } = useMouse(); // rõ ràng, phẳng, kết hợp được
}
children/component).