Herencias en React, como desarrollador con experiencia en programación orientada a objetos, una de mis dudas iniciales fue sobre el uso de herencias en React. Había asumido que, como en otros frameworks, “extender” componentes a través de herencia sería lo estándar. Sin embargo, pronto descubrí que React no sigue caminos tradicionales y apuesta por un paradigma mucho más flexible y moderno: la composición de componentes y el uso de hooks.
En este artículo te contaré, desde mi propia experiencia, qué significa todo esto de Herencias en React y por qué no solo desaconseja el uso de herencia clásica, sino que su ecosistema y diseño la hacen innecesaria, además de problemática. Te guiaré paso a paso con ejemplos claros y explicaré las alternativas que sí funcionan y que te ayudarán a construir aplicaciones robustas.
¿Qué es la herencia tradicional y por qué genera dudas en React?
En programación orientada a objetos (OOP), la herencia permite que una clase “herede” propiedades y métodos de otra. Esto facilita reutilizar código y especializar comportamientos. Por ejemplo, una clase Animal puede ser la base para una clase Perro que herede sus características y añada nuevas.
Pero React no es un framework OOP tradicional, sino un entorno basado en componentes. La herencia puede hacer que los árboles de componentes sean rígidos y difíciles de mantener. Muchos tutoriales y la propia documentación oficial de React dejan claro que la herencia clásica debe evitarse, ya que:
- Implica un acoplamiento fuerte y difícil de escalar.
- Dificulta el entendimiento y pruebas de la UI.
- Existen alternativas más simples y poderosas diseñadas para React.
¿Por qué React prefiere la composición a la herencia?
La composición consiste en construir interfaces uniendo múltiples componentes independientes y reutilizables. En lugar de “heredar”, los componentes “se componen” entre sí, delegando responsabilidades.
1. Flexibilidad real
La composición permite incorporar componentes hijos bajo demanda, inyectar contenido o funcionalidades, y crear UI modulares que se adaptan sin rigidez.
2. Mayor claridad y mantenimiento
Con componentes que cumplen funciones específicas y se combinan explícitamente, el código es más legible. Se evita la confusión propia de jerarquías heredadas complejas.
3. Reutilización sin dependencia
Cada componente puede reutilizarse en distintos contextos sin arrastrar dependencias innecesarias. Con la herencia tradicional, esto suele ser más complejo.
Experiencia práctica: Cómo decantarse por composición en un proyecto real
Herencias en React, en un proyecto para una startup, desarrollamos un panel de administración con React donde el desafío era crear tarjetas de usuario altamente personalizables. Intentar resolver esto con herencia implicaría crear múltiples clases base y derivadas para variantes específicas.
Optamos por un enfoque basado en composición: la tarjeta básica recibía props y componentes hijos como botones, iconos o acciones específicas. Además, usamos hooks para gestionar estados compartidos, como la validación o la comunicación con APIs.
El resultado fue un código mucho más sencillo de escalar y personalizado sin tener que modificar jerarquías. Las nuevas funcionalidades se añadían como simples componentes o hooks sin romper nada.
Alternativas a las herencias en React: Composición y hooks de forma práctica
Composición en componentes
Usar la propiedad children o pasar otros componentes como props para ensamblar la UI flexiblemente:
function Panel({ titulo, children }) {
return (
<section>
<h1>{titulo}</h1>
{children}
</section>
)
}
function App() {
return (
<Panel titulo=»Usuarios»>
<button>Agregar Usuario</button>
<ListaUsuarios />
</Panel>
)
}
Hooks personalizados para compartir lógica:
import { useState, useEffect } from ‘react’;
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(resp => resp.json())
.then(setData);
}, [url]);
return data;
}
function Usuarios() {
const usuarios = useFetch(‘/api/usuarios’);
if (!usuarios) return <p>Cargando…</p>;
return <ul>{usuarios.map(u => <li key={u.id}>{u.nombre}</li>)}</ul>;
}
Render Props y High-Order Components (HOCs)
Antes de hooks, React usaba patrones como render props y HOCs para composición y reutilización, todavía válidos:
// Render prop ejemplo
function MouseTracker({ render }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
const manejarMovimiento = e => setPos({ x: e.clientX, y: e.clientY });
return <div onMouseMove={manejarMovimiento}>{render(pos)}</div>;
}
function App() {
return (
<MouseTracker render={pos => <p>Mouse en: {pos.x},{pos.y}</p>} />
);
}
¿Tiene algún sentido usar herencia en React?
En la práctica, rara vez. Sin embargo, si trabajas con clases (componentes clase), podrías extender ciertas clases base, pero esto no es recomendado porque:
- Los componentes funcionales y hooks son la vía moderna.
- React no provee utilidades para herencia.
- La comunidad y librerías estándar optan por composición.
Solo en casos muy específicos — como crear un componente base con métodos muy especializados — la herencia en React puede aparecer, pero son excepciones.
Beneficios claros de dejar la herencia y priorizar la composición
- Reutilización de componentes sencilla y explícita
- Mantener el código limpio y modular
- Fácil adaptación a nuevas funcionalidades
- Mejor depuración y testing
- Alineación con evolución y buenas prácticas de React
Conclusión
¿Quieres profundizar y transformarte en un desarrollador profesional React? Te invito a conocer el Bootcamp Desarrollo Web, donde aprenderás desde cero con expertos, aplicando las mejores prácticas del mercado.
Si quieres dominar este framework, es fundamental que entiendas y aproveches la composición de componentes y los hooks, que además de más modernos, hacen tu código más limpio, mantenible y escalable. En mi experiencia, aplicar estos principios ha sido clave para crear aplicaciones React sólidas y fácilmente ampliables, evitando mucha complejidad innecesaria.
Para profundizar en la importancia de la composición sobre la herencia en React y mejorar tu desarrollo, consulta la Documentación oficial React – Composición vs Herencia.
