სამივე მუშაობს კომპონენტებს შორის ლოგიკის გაზიარებაზე, მაგრამ ისინი ვითარდებოდნენ დროის განმავლობაში და custom hooks არის თანამედროვე სტანდარტი ლოგიკის გაზიარებისთვის.
ფუნქცია, რომელიც იღებს კომპონენტს და აბრუნებს გაუმჯობესებულს:
= => {
user = ();
user ? : ;
};
= ();
ნაკლოვანებები: wrapper nesting ("wrapper hell" ხეში), prop სახელების კოლიზიები და აუცილებელია იმის გაგება, თუ სად მოდის injected props-ები.
კომპონენტი იღებს ფუნქციას როგორც child-ს state-ის გაზიარებისთვის:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
ნახევრად მოქნილი, მაგრამ რამდენიმე render-prop კომპონენტის nesting-ი ქმნის "callback pyramid"-ს.
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/კომპონენტების გადაცემა).