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