All three share logic between components, but they evolved over time and custom hooks are the modern default for sharing logic.
A function that takes a component and returns an enhanced one:
= => {
user = ();
user ? : ;
};
= ();
Downsides: wrapper nesting ("wrapper hell" in the tree), prop name collisions, and it's unclear where injected props come from.
A component takes a function as its child to share state:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexible, but nesting several render-prop components creates a "callback pyramid."
Extract the stateful logic into a useX function — no extra tree nesting, explicit data flow:
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).A library of IT interview questions with detailed answers — from Junior to Senior.
Donate