Todos os três compartilham lógica entre componentes, mas evoluíram ao longo do tempo e custom hooks são o padrão moderno para compartilhar lógica.
Uma função que pega um componente e retorna uma versão aprimorada:
= => {
user = ();
user ? : ;
};
= ();
Desvantagens: aninhamento de wrapper ("wrapper hell" na árvore), colisões de nomes de props, e fica pouco claro de onde vêm as props injetadas.
Um componente recebe uma função como seu filho para compartilhar estado:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexível, mas aninhar vários componentes render-prop cria uma "pirâmide de callback".
Extraia a lógica com estado em uma função useX — sem aninhamento extra de árvore, fluxo de dados explícito:
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/componentes).