Patrones de React Suspense: Obtención de datos y límites de error

React Suspense es una característica poderosa que te permite "suspender" la renderización de componentes mientras esperas que se completen las operaciones asíncronas, como la obtención de datos. Combinado con los Límites de Error, proporciona un mecanismo robusto para manejar estados de carga y errores, lo que resulta en una experiencia de usuario más fluida y resistente. Este artículo explora varios patrones para aprovechar Suspense y los Límites de Error de manera efectiva en tus aplicaciones React.

Comprendiendo React Suspense

En esencia, Suspense es un mecanismo que permite a React esperar algo antes de renderizar un componente. Este "algo" es típicamente una operación asíncrona, como obtener datos de una API. En lugar de mostrar una pantalla en blanco o un estado intermedio potencialmente engañoso, puedes mostrar una interfaz de usuario de respaldo (por ejemplo, un spinner de carga) mientras se cargan los datos.

El beneficio clave es la mejora del rendimiento percibido y una experiencia de usuario más agradable. Los usuarios se presentan inmediatamente con retroalimentación visual que indica que algo está sucediendo, en lugar de preguntarse si la aplicación está congelada.

Conceptos clave

• Componente Suspense: El componente <Suspense> envuelve los componentes que podrían suspenderse. Acepta una propiedad fallback, que especifica la interfaz de usuario a renderizar mientras los componentes envueltos están suspendidos.
• Interfaz de usuario de respaldo: Esta es la interfaz de usuario que se muestra mientras la operación asíncrona está en curso. Puede ser cualquier cosa, desde un simple spinner de carga hasta una animación más elaborada.
• Integración de promesas: Suspense funciona con promesas. Cuando un componente intenta leer un valor de una Promesa que aún no se ha resuelto, React suspende el componente y muestra la interfaz de usuario de respaldo.
• Fuentes de datos: Suspense se basa en fuentes de datos que son compatibles con Suspense. Estas fuentes exponen una API que permite a React detectar cuándo se están obteniendo datos.

Obtención de datos con Suspense

Para usar Suspense para la obtención de datos, necesitarás una biblioteca de obtención de datos compatible con Suspense. Aquí tienes un enfoque común que utiliza una función fetchData personalizada:

Ejemplo: Obtención de datos simple

Primero, crea una función de utilidad para obtener datos. Esta función debe manejar el aspecto de 'suspensión'. Envolveremos nuestras llamadas fetch en un recurso personalizado para manejar correctamente el estado de la promesa.

            // utils/api.js
const wrapPromise = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise.then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const fetchData = (url) => {
  const promise = fetch(url)
    .then((res) => res.json())
    .then((data) => data);
  return wrapPromise(promise);
};

export default fetchData;
            

              
                Copy
              
            
          

Ahora, creemos un componente que utiliza Suspense para mostrar datos de usuario:

            // components/UserProfile.js
import React from 'react';
import fetchData from '../utils/api';

const resource = fetchData('https://jsonplaceholder.typicode.com/users/1');

function UserProfile() {
  const user = resource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Teléfono: {user.phone}</p>
    </div>
  );
}

export default UserProfile;
            

              
                Copy
              
            
          

Finalmente, envuelve el componente UserProfile con <Suspense>:

            // App.js
import React, { Suspense } from 'react';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Suspense fallback={<p>Cargando datos del usuario...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

En este ejemplo, el componente UserProfile intenta leer los datos del usuario del recurso. Si los datos aún no están disponibles (la Promesa aún está pendiente), el componente se suspende y se muestra la interfaz de usuario de respaldo ("Cargando datos del usuario..."). Una vez que se obtienen los datos, el componente se vuelve a renderizar con la información real del usuario.

Beneficios de este enfoque

• Obtención de datos declarativa: El componente expresa *qué* datos necesita, no *cómo* obtenerlos.
• Gestión centralizada del estado de carga: El componente Suspense maneja el estado de carga, simplificando la lógica del componente.

Límites de error para la resiliencia

Si bien Suspense maneja los estados de carga con elegancia, no maneja inherentemente los errores que pueden ocurrir durante la obtención de datos o la renderización de componentes. Ahí es donde entran los Límites de Error.

Los Límites de Error son componentes de React que capturan los errores de JavaScript en cualquier lugar del árbol de componentes secundarios, registran esos errores y muestran una interfaz de usuario de respaldo en lugar de bloquear toda la aplicación. Son críticos para construir interfaces de usuario resilientes que puedan manejar con gracia los errores inesperados.

Creando un límite de error

Para crear un Límite de Error, debes definir un componente de clase que implemente los métodos de ciclo de vida static getDerivedStateFromError() y componentDidCatch().

            // components/ErrorBoundary.js
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }

  static getDerivedStateFromError(error) {
    // Actualiza el estado para que el siguiente renderizado muestre la interfaz de usuario de respaldo.
    return {
       hasError: true,
       error: error
     };
  }

  componentDidCatch(error, errorInfo) {
    // También puedes registrar el error en un servicio de informes de errores
    console.error("Error capturado: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Puedes renderizar cualquier interfaz de usuario de respaldo personalizada
      return (
        <div>
          <h2>Algo salió mal.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

El método getDerivedStateFromError se llama cuando se lanza un error en un componente descendiente. Actualiza el estado para indicar que ha ocurrido un error.

El método componentDidCatch se llama después de que se ha lanzado un error. Recibe el error y la información del error, que puedes usar para registrar el error en un servicio de informes de errores o mostrar un mensaje de error más informativo.

Usando límites de error con Suspense

Para combinar Límites de Error con Suspense, simplemente envuelve el componente <Suspense> con un componente <ErrorBoundary>:

            // App.js
import React, { Suspense } from 'react';
import UserProfile from './components/UserProfile';
import ErrorBoundary from './components/ErrorBoundary';

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Cargando datos del usuario...</p>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Ahora, si ocurre un error durante la obtención de datos o la renderización del componente UserProfile, el Límite de Error capturará el error y mostrará la interfaz de usuario de respaldo, evitando que toda la aplicación se bloquee.

Patrones avanzados de Suspense

Más allá de la obtención básica de datos y el manejo de errores, Suspense ofrece varios patrones avanzados para construir interfaces de usuario más sofisticadas.

División de código con Suspense

La división de código es el proceso de dividir tu aplicación en trozos más pequeños que se pueden cargar bajo demanda. Esto puede mejorar significativamente el tiempo de carga inicial de tu aplicación.

React.lazy y Suspense facilitan increíblemente la división de código. Puedes usar React.lazy para importar componentes dinámicamente y luego envolverlos con <Suspense> para mostrar una interfaz de usuario de respaldo mientras se cargan los componentes.

            // components/MyComponent.js
import React from 'react';

const MyComponent = React.lazy(() => import('./AnotherComponent'));

function App() {
  return (
    <Suspense fallback={<p>Cargando componente...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

En este ejemplo, el MyComponent se carga bajo demanda. Mientras se está cargando, se muestra la interfaz de usuario de respaldo ("Cargando componente..."). Una vez que se carga el componente, se renderiza normalmente.

Obtención de datos en paralelo

Suspense te permite obtener múltiples fuentes de datos en paralelo y mostrar una única interfaz de usuario de respaldo mientras se cargan todos los datos. Esto puede ser útil cuando necesitas obtener datos de múltiples API para renderizar un solo componente.

            import React, { Suspense } from 'react';
import fetchData from './api';

const userResource = fetchData('https://jsonplaceholder.typicode.com/users/1');
const postsResource = fetchData('https://jsonplaceholder.typicode.com/posts?userId=1');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <h3>Posts:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>)))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Cargando datos del usuario y publicaciones...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

En este ejemplo, el componente UserProfile obtiene datos de usuario y datos de publicaciones en paralelo. El componente <Suspense> muestra una única interfaz de usuario de respaldo mientras se cargan ambas fuentes de datos.

API de transición con useTransition

React 18 introdujo el hook useTransition, que mejora Suspense al proporcionar una forma de gestionar las actualizaciones de la interfaz de usuario como transiciones. Esto significa que puedes marcar ciertas actualizaciones de estado como menos urgentes e impedir que bloqueen la interfaz de usuario. Esto es especialmente útil cuando se trata de una obtención de datos más lenta o de operaciones de renderizado complejas, mejorando el rendimiento percibido.

Así es como puedes usar useTransition:

            import React, { useState, Suspense, useTransition } from 'react';
import fetchData from './api';

const resource = fetchData('https://jsonplaceholder.typicode.com/users/1');

function UserProfile() {
  const user = resource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Teléfono: {user.phone}</p>
    </div>
  );
}

function App() {
  const [isPending, startTransition] = useTransition();
  const [showProfile, setShowProfile] = useState(false);

  const handleClick = () => {
    startTransition(() => {
      setShowProfile(true);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        Mostrar perfil de usuario
      </button>
      {isPending && <p>Cargando...</p>}
      <Suspense fallback={<p>Cargando datos del usuario...</p>}>
        {showProfile && <UserProfile />}
      </Suspense>
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

En este ejemplo, al hacer clic en el botón "Mostrar perfil de usuario" se inicia una transición. startTransition marca la actualización setShowProfile como una transición, lo que permite a React priorizar otras actualizaciones de la interfaz de usuario. El valor isPending de useTransition indica si hay una transición en curso, lo que te permite proporcionar retroalimentación visual (por ejemplo, deshabilitar el botón y mostrar un mensaje de carga).

Mejores prácticas para usar Suspense y límites de error

• Envuelve Suspense alrededor del área más pequeña posible: Evita envolver grandes partes de tu aplicación con <Suspense>. En su lugar, envuelve solo los componentes que realmente necesitan suspenderse. Esto minimizará el impacto en el resto de la interfaz de usuario.
• Usa interfaces de usuario de respaldo significativas: La interfaz de usuario de respaldo debe proporcionar a los usuarios información clara e informativa sobre lo que está sucediendo. Evita los spinners de carga genéricos; en su lugar, intenta proporcionar más contexto (por ejemplo, "Cargando datos del usuario...").
• Coloca los límites de error estratégicamente: Piensa detenidamente dónde colocar los límites de error. Colócalos lo suficientemente alto en el árbol de componentes para capturar errores que puedan afectar a múltiples componentes, pero lo suficientemente bajos para evitar capturar errores que sean específicos de un solo componente.
• Registra los errores: Usa el método componentDidCatch para registrar los errores en un servicio de informes de errores. Esto te ayudará a identificar y solucionar errores en tu aplicación.
• Proporciona mensajes de error amigables para el usuario: La interfaz de usuario de respaldo que se muestra mediante los Límites de Error debe proporcionar a los usuarios información útil sobre el error y qué pueden hacer al respecto. Evita la jerga técnica; en su lugar, usa un lenguaje claro y conciso.
• Prueba tus límites de error: Asegúrate de que tus Límites de Error funcionen correctamente lanzando errores deliberadamente en tu aplicación.

Consideraciones internacionales

Al usar Suspense y Límites de Error en aplicaciones internacionales, considera lo siguiente:

• Localización: Asegúrate de que las interfaces de usuario de respaldo y los mensajes de error estén correctamente localizados para cada idioma compatible con tu aplicación. Usa bibliotecas de internacionalización (i18n) como react-intl o i18next para administrar las traducciones.
• Diseños de derecha a izquierda (RTL): Si tu aplicación admite idiomas RTL (por ejemplo, árabe, hebreo), asegúrate de que las interfaces de usuario de respaldo y los mensajes de error se muestren correctamente en diseños RTL. Usa propiedades lógicas de CSS (por ejemplo, margin-inline-start en lugar de margin-left) para admitir diseños LTR y RTL.
• Accesibilidad: Asegúrate de que las interfaces de usuario de respaldo y los mensajes de error sean accesibles para los usuarios con discapacidades. Usa atributos ARIA para proporcionar información semántica sobre el estado de carga y los mensajes de error.
• Sensibilidad cultural: Ten en cuenta las diferencias culturales al diseñar interfaces de usuario de respaldo y mensajes de error. Evita usar imágenes o lenguaje que puedan ser ofensivos o inapropiados en ciertas culturas. Por ejemplo, un spinner de carga común podría percibirse negativamente en algunas culturas.

Ejemplo: Mensaje de error localizado

Usando react-intl, puedes crear mensajes de error localizados:

            // components/ErrorBoundary.js
import React from 'react';
import { FormattedMessage } from 'react-intl';

class ErrorBoundary extends React.Component {
  // ... (igual que antes)

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2><FormattedMessage id="error.title" defaultMessage="Something went wrong." /></h2>
          <p><FormattedMessage id="error.message" defaultMessage="Please try again later." /></p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

Luego, define las traducciones en tus archivos de configuración regional:

            // locales/en.json
{
  "error.title": "Something went wrong.",
  "error.message": "Please try again later."
}

// locales/fr.json
{
  "error.title": "Quelque chose s'est mal passé.",
  "error.message": "Veuillez réessayer plus tard."
}

            

              
                Copy
              
            
          

Conclusión

React Suspense y los Límites de Error son herramientas esenciales para construir interfaces de usuario modernas, resistentes y fáciles de usar. Al comprender y aplicar los patrones descritos en este artículo, puedes mejorar significativamente el rendimiento percibido y la calidad general de tus aplicaciones React. Recuerda considerar la internacionalización y la accesibilidad para garantizar que tus aplicaciones sean utilizables por una audiencia global.

La obtención de datos asíncronos y el manejo adecuado de errores son aspectos críticos de cualquier aplicación web. Suspense, combinado con los Límites de Error, ofrece una forma declarativa y eficiente de gestionar estas complejidades en React, lo que resulta en una experiencia de usuario más fluida y confiable para usuarios de todo el mundo.