Renderizado condicional — Interfaz de usuario diferente según el contexto

Al finalizar este tema

Conocerás varios patrones para mostrar diferentes componentes en React según condiciones.

Por qué es necesario

Debes mostrar pantallas diferentes dependiendo de si el usuario ha iniciado sesión o no. Durante la carga de datos, se debe mostrar un indicador de progreso; si ocurre un error, se debe mostrar un mensaje de error. Esto es lo que llamamos renderizar una interfaz de usuario diferente según condiciones, conocido como renderizado condicional.

Patrón 1: Retorno anticipado

function Dashboard({ user }) {
  if (!user) {
    return <LoginForm />;
  }

  return <UserDashboard user={user} />;
}

Al inicio de la función, se verifica la condición y se devuelve inmediatamente. Es el patrón más fácil de leer. No es necesario incluir condiciones complejas dentro del JSX.

Patrón 2: Operador ternario

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserMenu /> : <LoginButton />}
    </div>
  );
}

Dentro de JSX, se utiliza el operador ternario para las condiciones. Es adecuado cuando se debe mostrar una de dos opciones.

La anidación dificulta la lectura:

// Mal ejemplo
{isLoading ? <Spinner /> : error ? <Error /> : <Content />}

En estos casos, utiliza un retorno temprano o separa la lógica en una función distinta.

Patrón 3: Operador &&

function Notification({ count }) {
  return (
    <div>
      {count > 0 && <Badge count={count} />}
    </div>
  );
}

Mostrar u ocultar Se usa cuando se debe elegir entre mostrar u ocultar algo. Si la parte else del operador ternario es null, se puede simplificar a &&.

Nota: El número 0 es falsy, pero React lo renderiza.

// Atención: si count es 0, aparece "0" en pantalla
{count && <Badge />}

// Forma segura
{count > 0 && <Badge />}

Patrón 4: Almacenar en una variable

function StatusMessage({ status }) {
  let message;
  if (status === "loading") message = <Spinner />;
  else if (status === "error") message = <ErrorBanner />;
  else if (status === "empty") message = <EmptyState />;
  else message = <DataTable />;

  return <div className="container">{message}</div>;
}

Si hay más de tres ramas, es más limpio almacenarlo en una variable.

Si se devuelve null

function MaybeTooltip({ show, text }) {
  if (!show) return null;
  return <div className="tooltip">{text}</div>;
}

Devolver null no renderiza nada. Se utiliza cuando se desea ocultar el propio componente.

Difiere de la propiedad CSS display: none. Con null, el elemento desaparece por completo del DOM, mientras que con display: none permanece en el DOM pero no es visible.

Conceptos clave

El early return es el patrón de renderizado condicional más fácil de leer. Se utiliza el operador ternario cuando se debe mostrar una de dos opciones, y && cuando se desea mostrar u ocultar algo. Si hay muchas ramas, almacene el resultado en una variable o separe la lógica en componentes distintos.