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:

fullscreen
// 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:

fullscreen
// 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:

fullscreen
<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.