তিনটিই উপাদানগুলির মধ্যে লজিক শেয়ার করে, তবে তারা সময়ের সাথে বিকশিত হয়েছে এবং custom hooks হল লজিক শেয়ার করার জন্য আধুনিক ডিফল্ট।
একটি ফাংশন যা একটি উপাদান নেয় এবং একটি উন্নত সংস্করণ ফেরত দেয়:
= => {
user = ();
user ? : ;
};
= ();
ত্রুটিসমূহ: র্যাপার নেস্টিং (গাছে "র্যাপার হেল"), prop নাম সংঘর্ষ, এবং ইঞ্জেক্ট করা props কোথা থেকে আসে তা অস্পষ্ট।
একটি উপাদান অবস্থা শেয়ার করতে একটি ফাংশন তার চাইল্ড হিসাবে নেয়:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
নমনীয়, কিন্তু বেশ কয়েকটি render-prop উপাদান নেস্ট করা একটি "কলব্যাক পিরামিড" তৈরি করে।
স্টেটফুল লজিক একটি useX ফাংশনে নিষ্কাশন করুন — অতিরিক্ত ট্রি নেস্টিং নেই, স্পষ্ট ডেটা প্রবাহ:
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/উপাদান পাস করা)।