Aprende a crear componentes flexibles y mantenibles en React con los patrones render props y composition. Verás cómo un componente padre delega el “cómo se pinta” al hijo mediante una función, maximizando la reutilización de lógica y reduciendo código, con tipado sólido en TypeScript. Además, se explican ventajas, desventajas y cómo evitar errores comunes como el prop drilling.
¿Qué es render props y por qué mejora la reutilización?
El patrón render props consiste en pasar una función como prop para decidir el renderizado. Así, el padre controla la salida visual y el hijo solo expone datos o estado. Este enfoque aporta flexibilidad, mantenibilidad y reutilización al separar la lógica del diseño.
¿Cómo funciona el primer ejemplo con función render?
- Dos componentes: parent component y child component.
- El hijo recibe una prop función llamada render que retorna un elemento JSX.
- El hijo define un nombre, por ejemplo, "DevCode", y llama a render(nombre).
- El padre decide el marcado: por ejemplo, un párrafo con “Hello, nombre”.
Fragmento de tipado y uso en TypeScript:
// Child
type ChildComponentProps = {
render: (name: string) => JSX.Element;
};
const ChildComponent: React.FC<ChildComponentProps> = ({ render }) => {
const name = 'DevCode';
return <div>{render(name)}</div>;
};
// Parent
const ParentComponent: React.FC = () => (
<ChildComponent render={(name) => <p>Hello, {name}</p>} />
);
¿Qué aporta el tipado de TypeScript en las props?
- Define la forma exacta de la función: parámetros y retorno.
- Evita errores en tiempo de desarrollo y facilita el autocompletado.
- Mejora la comunicación dentro del equipo al documentar contratos.
¿Cómo aplicar render props para listas con data del padre?
Se crea la lógica en el padre: una función render que recibe un arreglo de strings y retorna nodos de React. El padre mantiene la data en un estado local con useState, y el hijo únicamente la pinta con un map dentro de elementos LI.
¿Cómo tipar las props con TypeScript en padre e hijo?
- El padre expone una interfaz con la firma de la función render.
- El hijo declara una interfaz con la prop data: string[] y la recorre.
Fragmentos clave:
// Parent
interface ParentComponentProps {
render: (data: string[]) => React.ReactNode;
}
const ParentComponent: React.FC<ParentComponentProps> = ({ render }) => {
const [data] = React.useState<string[]>(/* array de strings */);
return <ul>{render(data)}</ul>;
};
// Child
interface ChildComponentProps {
data: string[];
}
const ChildComponent: React.FC<ChildComponentProps> = ({ data }) => (
<>
{data.map((item, index) => (
<li key={index}>{item}</li>
))}
</>
);
¿Qué sucede al integrar el parent component en la UI?
- Se importa el parent component y el child component en la vista.
- Se pasa la función render del padre que delega el renderizado al hijo.
Uso de integración:
<ParentComponent render={(data: string[]) => <ChildComponent data={data} />} />
- Resultado: el padre controla la lógica y el hijo se encarga del pintado de la lista dentro de un UL.
- Preparación del entorno: clonar el repositorio, ejecutar
npm install, luego npm run dev y abrir el localhost.
¿Cuáles son ventajas, desventajas y relación con composition?
El patrón render props convive muy bien con composition: construir interfaces complejas desde componentes pequeños que se combinan. En los ejemplos, el padre define la estructura y el hijo se especializa en pintar datos.
- Ventajas.
- Reutilización de lógica sin duplicar componentes.
- Mantenibilidad y flexibilidad al separar responsabilidades.
- Tipado con TypeScript que reduce errores.
- Desventajas.
- Riesgo de prop drilling si la función o datos viajan por múltiples niveles.
- Curva de aprendizaje más exigente para personas nuevas en React.
- Habilidades y keywords trabajadas.
- Definir interfaces y types de props en TypeScript.
- Usar React.FC con genéricos para tipar componentes.
- Implementar funciones render que retornan JSX.Element o ReactNode.
- Mapear arreglos a elementos LI con key estable.
- Aplicar composition para escalar la UI.
¿Qué casos de uso ves para aplicar el patrón de render props en tus componentes? Comparte tus ideas y dudas en los comentarios.
