ทั้งสามรูปแบบใช้แชร์ logic ระหว่าง component แต่พัฒนาขึ้นในช่วงเวลาต่างกัน และ custom hooks คือตัวเลือกมาตรฐานในยุคปัจจุบัน สำหรับการแชร์ logic
ฟังก์ชันที่รับ component เข้าไปแล้วคืน component ที่ถูกเสริมความสามารถออกมา:
= => {
user = ();
user ? : ;
};
= ();
ข้อเสีย: การห่อ component ซ้อนกัน ("wrapper hell" ใน tree), ชื่อ props ชนกัน, และไม่ชัดเจนว่า props ที่ถูกฉีดเข้ามามาจากไหน
Component ที่รับฟังก์ชันเป็น child เพื่อแชร์ state:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
ยืดหยุ่น แต่การซ้อน render-prop component หลายตัวจะสร้าง "พีระมิดของ callback"
ดึง logic ที่มี state ออกมาเป็นฟังก์ชัน useX — ไม่มีการซ้อน tree เพิ่ม และ data flow ชัดเจน:
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/component เข้าไป)