Renderizado condicional y listas

Gran parte de una UI consiste en responder a preguntas como estas:

• ¿hay datos?
• ¿está cargando?
• ¿el usuario tiene permisos?
• ¿cuántos elementos hay?

React resuelve eso con JavaScript normal dentro de JSX.

Condicionales

function StatusMessage({ isLoading }) {
  if (isLoading) {
    return <p>Cargando...</p>;
  }

  return <p>Contenido listo</p>;
}

También puedes usar ternarios para casos pequeños:

<p>{isLoggedIn ? 'Bienvenido' : 'Inicia sesión'}</p>

Y && cuando solo quieres mostrar algo si se cumple la condición:

{error && <p>{error}</p>}

No abuses de condicionales anidados dentro del JSX. Si se vuelve confuso, sácalo a variables o funciones.

Renderizar listas

function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

La key ayuda a React a identificar cada elemento entre renders.

Qué key usar

Usa una key estable y única:

• product.id
• user.id
• slug

Evita el índice del array salvo que la lista sea totalmente estática y nunca cambie de orden.

// Evitar en listas dinámicas
items.map((item, index) => <li key={index}>{item.name}</li>)

Con keys malas aparecen bugs sutiles: inputs que conservan valores donde no deben, animaciones raras o estado que “salta” de un item a otro.

Patrón muy común en apps reales

if (isLoading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
if (items.length === 0) return <EmptyState />;

return <ItemList items={items} />;

Ese orden mantiene el render claro y evita JSX inflado.

La siguiente lección toca uno de los puntos peor entendidos de React: useEffect.