HOC
Componentes que envuelven componentes
Un Higher-Order Component es una función que recibe un componente y devuelve uno nuevo con comportamiento adicional. Es el patrón de reutilización de lógica de la era pre-hooks — hoy los hooks lo reemplazan en la mayoría de casos, pero siguen apareciendo en código legacy y librerías.
La firma
const Mejorado = withAlgo(Componente). El HOC añade props, envuelve en providers, inyecta comportamiento — sin que el componente original sepa que está siendo envuelto. Por convención se nombran con prefijo with.
HOC vs Hook
Los hooks son más simples y componibles. Usa HOC cuando necesitas envolver el árbol JSX del componente (error boundaries, providers) o cuando trabajas con una librería que los requiere. Para lógica pura reutilizable, un hook personalizado es la opción moderna.
Tropiezos comunes
- 01No definas HOCs dentro de un componente — se recrean en cada render y React desmonta/monta el árbol completo.
- 02Los HOCs ocultan el origen de los props, dificultando el debugging. Con hooks, el origen siempre es explícito.
- 03Al componer múltiples HOCs, el orden importa — se aplican de adentro hacia afuera.