یہ تینوں components کے درمیان logic share کرتے ہیں، لیکن وقت کے ساتھ یہ ارتقا پذیر ہوئے اور custom hooks آج کل logic share کرنے کے لیے جدید default ہیں۔
ایک function جو ایک component لیتا ہے اور ایک بہتر شدہ component واپس کرتا ہے:
= => {
user = ();
user ? : ;
};
= ();
نقصانات: wrapper nesting (tree میں "wrapper hell")، prop کے ناموں کا ٹکراؤ، اور یہ واضح نہیں ہوتا کہ inject کیے گئے props کہاں سے آتے ہیں۔
ایک component state share کرنے کے لیے اپنے child کے طور پر ایک function لیتا ہے:
<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 پاس کرنا)۔