இம்மூன்றும் components-க்கு இடையே logic-ஐப் பகிர்ந்துகொள்கின்றன, ஆனால் அவை காலப்போக்கில் வளர்ந்தன, மேலும் logic-ஐப் பகிர்வதற்கு custom hooks தான் நவீன இயல்புநிலை (modern default) ஆகும்.
ஒரு component-ஐ எடுத்துக்கொண்டு மேம்படுத்தப்பட்ட ஒன்றைத் திருப்பித் தரும் ஒரு function:
= => {
user = ();
user ? : ;
};
= ();
இதன் குறைபாடுகள்: wrapper nesting (tree-இல் "wrapper hell"), prop name மோதல்கள், மேலும் inject செய்யப்பட்ட props எங்கிருந்து வருகின்றன என்பது தெளிவாக இல்லாதது.
ஒரு component தனது child ஆக ஒரு function-ஐ எடுத்து state-ஐப் பகிர்ந்துகொள்கிறது:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
நெகிழ்வானது, ஆனால் பல render-prop components-ஐ nest செய்வது ஒரு "callback pyramid"-ஐ உருவாக்குகிறது.
stateful logic-ஐ ஒரு useX function-ஆகப் பிரித்தெடுக்கவும் — கூடுதல் tree nesting இல்லை, தெளிவான 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/components-ஐ அனுப்புவது).