El render condicional en React

Damián De Luca

2 meses ago

El render condicional en React es una técnica crucial para controlar qué elementos se muestran en la interfaz de usuario en función del estado de la aplicación. Como desarrolladores, necesitamos una forma eficiente y flexible de manejar la lógica que determina qué componentes deben renderizarse en cada situación.

En este artículo explicaré las técnicas más modernas para realizar render condicional, cuándo usarlas, sus ventajas, y proporcionaremos un ejemplo de código usando JSX, Hooks y estados.

¿Qué es el renderizado condicional en React?

En primer lugar siempre recomiendo en mis capacitaciones conocer los conceptos básicos sobre React y aprender a crear proyectos con esta librería. También es muy importante tener una base sólida de JavaScript.

Con estos conceptos aprendidos, podemos decir que el renderizado condicional en React se refiere a la capacidad de mostrar diferentes componentes o elementos según las condiciones de la aplicación. Esto es similar a cómo usaríamos sentencias if o operadores ternarios en JavaScript. En React esto se puede lograr en una sola línea de JSX.

Un ejemplo que suelo mostrarles a mis alumnos es el de una pantalla de carga. A la hora de crear una aplicación es muy común mostrar una pantalla de carga mientras se obtienen datos, o diferentes componentes para usuarios autenticados o no autenticados.

Técnicas modernas para render condicional

React proporciona varias formas de implementar el renderizado condicional. Las más comunes son:

El operador ternario (condición ? true : false) es uno de los métodos más comunes para el renderizado condicional. Permite evaluar una condición y renderizar un componente si es true o un componente alternativo si es false.

Un ejemplo básico en JSX podría ser si evaluamos el estado de login de un usuario. De manera alternativa podremos mostrar el Dashboard o la pantalla de Login si aún no fue autenticado.

{isLoggedIn ? <Dashboard /> : <Login />}

El operador && en JavaScript es útil cuando solo queremos renderizar un componente si una condición es verdadera. En este caso no se necesita una rama else, como vemos en el código JSX que sigue a continuación:

{isAdmin && <AdminPanel />}

Funciones y Hooks

Otra técnica moderna es utilizar funciones que devuelvan JSX condicionalmente. Esto puede hacer que el código sea más limpio y reutilizable, sobre todo cuando las condiciones son más complejas.

A continuación vemos un ejemplo de JSX que maneja el estado de carga y puede mostrar mensajes de error en caso de que ocurran:

const renderContent = () => {
  if (isLoading) {
    return <Spinner />;
  } else if (error) {
    return <ErrorMessage />;
  } else {
    return <DataDisplay />;
  }
};

return (
  <div>
    {renderContent()}
  </div>
);

React introdujo los Hooks para manejar estados y efectos de una manera funcional y reutilizable. Con el hook useState, podemos controlar el estado de la aplicación y aplicar el renderizado condicional de manera reactiva. El hook useEffect también es útil cuando necesitamos hacer una acción como resultado de un cambio de estado o una llamada a una API.

¿Cuándo usar el render condicional en React?

El render condicional es esencial cuando:

Controlamos el flujo de UI: resulta de utilidad si queremos mostrar u ocultar elementos según el estado de la aplicación. Por ejemplo, mostrar un componente de cargando (loading) cuando los datos aún no se han cargado.
Dependemos de roles o permisos: en aplicaciones con autenticación, podemos renderizar componentes solo si el usuario tiene el rol adecuado, como un administrador.
Manejo de errores: podemos usarlo para mostrar mensajes de error en situaciones en las que algo ha fallado, como una llamada a la API o la carga de un recurso.

Ventajas del render condicional en React

Control preciso sobre la UI: permite controlar exactamente qué elementos se muestran en pantalla en cualquier situación.
Optimización de la UI: brinda la posibilidad de cargar solo los componentes necesarios, mejorando el rendimiento de la aplicación.
Reutilización de lógica: al usar Hooks y funciones para el renderizado condicional, puedes encapsular la lógica en funciones reutilizables, lo que facilita la lectura y mantenimiento del código.

Ejemplo de código usando Hooks y estados

A continuación, veremos un ejemplo sencillo de cómo implementar render condicional usando useState y useEffect. Simularemos el comportamiento de una API que nos dice si un usuario está logueado o no.

import React, { useState, useEffect } from 'react';

const UserPanel = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // Simulamos una llamada a la API con useEffect
  useEffect(() => {
    // A los fines del ejemplo simulamos un retraso de la llamada a la API con un setTimeout de 2 segundos
    setTimeout(() => {
      // Simulamos que el usuario está logueado
      setIsLoggedIn(true);
      setIsLoading(false);
    }, 2000);
  }, []);

  if (isLoading) {
    return <p>Cargando...</p>;  // Mostramos pantalla de carga mientras esperamos
  }

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <h1>¡Bienvenido, usuario!</h1>
          <button>Ver Panel</button>
        </div>
      ) : (
        <div>
          <h1>Por favor, inicia la sesión.</h1>
          <button>Iniciar Sesión</button>
        </div>
      )}
    </div>
  );
};

export default UserPanel;

En este ejemplo usamos useState para manejar el estado isLoading y isLoggedIn. Por su parte, el useEffect simula una llamada a la API que tarda 2 segundos en devolver el estado de autenticación.

Mientras isLoading es true, mostramos un mensaje de «Cargando…». Una vez que isLoading es false, mostramos el contenido basado en si el usuario está logueado (isLoggedIn) o no.

Conclusión

El renderizado condicional es una técnica fundamental en React que nos permite controlar qué mostrar al usuario en función del estado de la aplicación. Usando operadores como el ternario y el cortocircuito lógico, junto con Hooks como useState y useEffect, podemos implementar lógica de renderizado eficiente y moderna. Este enfoque no solo mejora la experiencia del usuario, sino que también facilita el mantenimiento y escalabilidad de la aplicación.

Si deseas saber lo nuevo que llega para esta librería te recomiendo mi artículo: Novedades de React 19.

Para conocer las últimas novedades, guías y referencias a la API de React se puede visitar el sitio oficia l.