📋 Cómo renderizar listas de elementos en React de forma eficiente

📋 Cómo renderizar listas de elementos en React de forma eficiente

En React, a menudo necesitamos mostrar listas de elementos basados en datos. Para esto, usamos el método map() de JavaScript dentro del JSX. Además, cada elemento renderizado debe tener un key único para mejorar el rendimiento y ayudar a React a identificar cambios.

---

1️⃣ Renderizar una lista simple

Ejemplo con un array de nombres:

function App() {
  const nombres = ['Ana', 'Luis', 'Carlos', 'María'];

  return (
    <ul>
      {nombres.map((nombre, index) => (
        <li key={index}>{nombre}</li>
      ))}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

• Ana
• Luis
• Carlos
• María

---

2️⃣ Renderizado de objetos con información

Si tenemos un array de objetos, podemos mostrar varias propiedades:

function App() {
  const usuarios = [
    { id: 1, nombre: 'Ana', edad: 25 },
    { id: 2, nombre: 'Luis', edad: 30 },
    { id: 3, nombre: 'Carlos', edad: 28 },
  ];

  return (
    <ul>
      {usuarios.map(usuario => (
        <li key={usuario.id}>{usuario.nombre} ({usuario.edad} años)</li>
      ))}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

• Ana (25 años)
• Luis (30 años)
• Carlos (28 años)

---

3️⃣ Usar componentes para cada elemento de la lista

Para mantener el código limpio y escalable, podemos crear un componente para cada elemento:

function Usuario({ nombre, edad }) {
  return <li>{nombre} ({edad} años)</li>;
}

function App() {
  const usuarios = [
    { id: 1, nombre: 'Ana', edad: 25 },
    { id: 2, nombre: 'Luis', edad: 30 },
    { id: 3, nombre: 'Carlos', edad: 28 },
  ];

  return (
    <ul>
      {usuarios.map(usuario => (
        <Usuario key={usuario.id} nombre={usuario.nombre} edad={usuario.edad} />
      ))}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

---

4️⃣ Buenas prácticas

• ✅ Siempre usar key único en cada elemento de la lista.
• ✅ Evitar usar índices como key si la lista puede cambiar de orden.
• ✅ Separar elementos en componentes pequeños para mantener el JSX limpio.
• ✅ Usar map() para iterar arrays dentro del JSX.

💡 Con estas técnicas, tus listas se renderizan eficientemente y tu código es más fácil de mantener.

← Volver al índice