Los tres comparten lógica entre componentes, pero evolucionaron con el tiempo y los custom hooks son la opción moderna por defecto para compartir lógica.
Una función que toma un componente y devuelve uno mejorado:
= => {
user = ();
user ? : ;
};
= ();
Desventajas: anidamiento de envoltorios ("wrapper hell" en el árbol), colisiones de nombres de props y resulta poco claro de dónde provienen las props inyectadas.
Un componente toma una función como hijo para compartir estado:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
Flexible, pero anidar varios componentes con render props crea una "pirámide de callbacks".
Extrae la lógica con estado en una función useX — sin anidamiento extra en el árbol, con un flujo de datos 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).Conocer los tres patrones te permite leer bases de código de cualquier época y elegir el enfoque adecuado: custom hooks para lógica, composición para estructura de la interfaz, y HOCs/render props cuando una integración lo exige — manteniendo el código plano, legible y reutilizable.