Të tri ndajnë logjikën midis komponentëve, por kanë evoluar me kalimin e kohës dhe custom hooks janë standardi modern për të ndarë logjikën.
Një funksion që merr një komponent dhe kthen një version të përmirësuar:
= => {
user = ();
user ? : ;
};
= ();
Mangësi: hapsirë e mbulimeve ("wrapper hell" në pemë), përplasje emrash props, dhe nuk është e qartë se nga vijnë props-et e injektuar.
Një komponent merr një funksion si fëmijën e tij për të ndarë gjendjen:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Fleksibël, por hapsira e disa komponentëve render-prop krijon një "piramidë callback-esh".
Ekstraho logjikën me gjendjen në një funksion useX — pa hapsirë shtesë të pemës, fluks i qartë i të dhënave:
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/komponentësh).