Mifumo hii mitatu yote inashiriki logic kati ya components, lakini ilibadilika kwa muda na custom hooks ndizo chaguo-msingi la kisasa kwa kushiriki logic.
Function inayopokea component na kurudisha iliyoboreshwa:
= => {
user = ();
user ? : ;
};
= ();
Hasara: kuwekana kwa wrapper ("wrapper hell" katika mti), migongano ya majina ya props, na haijulikani wazi props zilizoingizwa zinatoka wapi.
Component inapokea function kama mtoto wake ili kushiriki state:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Inaweza kubadilika kwa urahisi, lakini kuwekana kwa render-prop components kadhaa huunda "piramidi ya callback."
Toa logic yenye state kuwa function ya useX — bila kuwekana kwa ziada katika mti, mtiririko wa data ulio wazi:
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).