तीनों घटकों के बीच तर्क साझा करते हैं, लेकिन वे समय के साथ विकसित हुए हैं और कस्टम hooks तर्क साझा करने के लिए आधुनिक डिफ़ॉल्ट हैं।
एक फ़ंक्शन जो एक घटक लेता है और एक बेहतर घटक लौटाता है:
= => {
user = ();
user ? : ;
};
= ();
मुसीबतें: wrapper nesting (पेड़ में "wrapper hell"), prop नाम टकराव, और यह स्पष्ट नहीं है कि इंजेक्ट किए गए props कहाँ से आते हैं।
एक घटक अपने बच्चे के रूप में एक फ़ंक्शन लेता है:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
लचकदार, लेकिन कई render-prop घटकों को नेस्ट करने से एक "callback पिरामिड" बनता है।
stateful तर्क को useX फ़ंक्शन में निकालें — कोई अतिरिक्त पेड़ की nesting नहीं, स्पष्ट डेटा प्रवाह:
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/घटक)।