ਤਿਨੋਂ ਕੰਪੋਨੈਂਟ ਦੇ ਵਿਚਕਾਰ ਲਾਜਿਕ ਸ਼ੇਅਰ ਕਰਦੇ ਹਨ, ਪਰ ਉਹ ਸਮੇਂ ਦੇ ਨਾਲ ਵਿਕਸਿਤ ਹੋਏ ਹਨ ਅਤੇ custom hooks ਅਜੋਕੇ ਸਮਿਆਂ ਵਿੱਚ ਮਨਪਸੰਦ ਜਵਾਬ ਹਨ ਲਾਜਿਕ ਸ਼ੇਅਰ ਕਰਨ ਲਈ।
ਇੱਕ ਫੰਕਸ਼ਨ ਜੋ ਇੱਕ ਕੰਪੋਨੈਂਟ ਲੈਂਦਾ ਹੈ ਅਤੇ ਇੱਕ ਬਿਹਤਰ ਵਰਜਨ ਵਾਪਸ ਕਰਦਾ ਹੈ:
= => {
user = ();
user ? : ;
};
= ();
ਨੁਕਸਾਨ: wrapper nesting (ਟਰੀ ਵਿੱਚ "wrapper hell"), prop ਨਾਮ ਟਕਰਾਓ, ਅਤੇ ਇਹ ਸਪਸ਼ਟ ਨਹੀਂ ਕਿ injected props ਕਿੱਥੋਂ ਆਉਂਦੇ ਹਨ।
ਇੱਕ ਕੰਪੋਨੈਂਟ ਸਥਿਤੀ ਸ਼ੇਅਰ ਕਰਨ ਲਈ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਆਪਣੀ ਸੰਤਾਨ ਦੇ ਤੌਰ ਤੇ ਲੈਂਦਾ ਹੈ:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
ਲਚਕਦਾਰ, ਪਰ ਕਈ render-prop ਕੰਪੋਨੈਂਟ ਨੂੰ nest ਕਰਨ ਨਾਲ "callback pyramid" ਬਣਦਾ ਹੈ।
Stateful ਲਾਜਿਕ ਨੂੰ useX ਫੰਕਸ਼ਨ ਵਿੱਚ ਕੱਢੋ — ਕੋਈ ਵਾਧੂ 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 ਭੇਜਣਾ)।