Cómo utilizar React Suspense para mejorar tus proyectos React

El ecosistema de React está en constante crecimiento, y parece que siempre hay nuevas funciones y mejoras para hacer que el desarrollo sea más eficiente y amigable para el usuario. React Suspense es una de las características que se ha vuelto bastante popular entre los desarrolladores de React. En esta guía, aprenderás todo sobre React Suspense y examinarás sus

El ecosistema de React siempre está creciendo, y parece que siempre hay nuevas características y mejoras para hacer el desarrollo más efectivo y amigable para el usuario.

React Suspense es una de esas características que se ha vuelto bastante popular entre los desarrolladores de React.

En esta guía, aprenderás todo sobre React Suspense y examinarás sus características, casos de uso y el potencial para transformar tus aplicaciones web.

¿Qué es React Suspense?

React Suspense es una nueva característica lanzada en la versión 16.6 de React.js. Con esta nueva característica, los componentes pueden pausar la renderización mientras esperan que un proceso asincrónico termine, como separar código o recuperar datos.

Suspense fue creado para facilitar a los desarrolladores la creación de aplicaciones con mejores indicaciones de carga y una experiencia de usuario más cohesionada. Permite detener la renderización del árbol de componentes hasta que se cumplan criterios específicos, lo que facilita el trabajo de los desarrolladores con datos asincrónicos.

Un problema que enfrentan los estados de carga en React

La gestión de los estados de carga en React era un poco más complicada antes de React Suspense. Los desarrolladores tenían que implementar el mecanismo de carga utilizando frameworks de terceros como Redux o Mobx, renderizado condicional o gestión de estados. Esto a menudo resultaba en un código complicado y propenso a errores.

Este problema se resolvió con React Suspense, que ofrece un método más sofisticado e integrado para gestionar acciones asincrónicas y estados de carga.

Conceptos clave y características de React Suspense

Hablemos sobre algunos conceptos y características que te ayudarán a entender React Suspense y cómo funciona.

1) Componente Suspense

Un elemento esencial de React Suspense es el componente Suspense. Te permite declarar cómo manejar el contenido de respaldo mientras las acciones asincrónicas están pendientes y encapsular cualquier parte de tu árbol de componentes.

<Suspense fallback={<LeoFallback />}>  <LeoComponent /></Suspense>

En este caso de uso, si el LeoComponent no está listo, React mostrará en su lugar el componente LeoFallback.

2) Uso de React.lazy() o lazy()

React tiene un mecanismo de importación dinámica llamado lazy() que te permite cargar componentes de manera perezosa.

Básicamente, la carga perezosa se refiere a la necesidad de que un componente o porción de código se cargue solo cuando sea necesario. Esta funcionalidad, que se incluyó por primera vez en React 16.6, se utiliza frecuentemente en conjunto con React Suspense para mejorar la velocidad de las aplicaciones web cargando componentes solo cuando se necesitan.

Esto es muy útil para minimizar la velocidad de carga de tu aplicación y reducir el tamaño inicial del paquete.

Ahora investigaremos lazy() en mayor profundidad y aprenderemos cómo funciona.

Sintaxis básica de lazy()

Para usar lazy(), debes seguir estos pasos:

Primero, importa los componentes Suspense de React, así como cualquier componente que desees cargar de manera perezosa.

import { Suspense } from 'react';

Luego, utiliza lazy() para definir una importación dinámica. Para el componente que deseas cargar lentamente, esta función acepta un argumento que es una función que produce una declaración de importación dinámica.

const LeoComponent = lazy(() => import('./LeoComponent'));

En este caso de uso, el LeoComponent se cargará de manera perezosa cuando sea necesario. La declaración de importación dinámica import() especifica la ruta al componente que deseas importar.

A continuación, encierra el elemento que deseas cargar de manera perezosa en un elemento Suspense. Puedes designar un componente de respaldo para mostrar mientras el componente cargado perezosamente se está recuperando utilizando el componente Suspense.

function App() {  return (    <div>      <Suspense fallback={<div>Cargando...</div>}>        <LeoComponent />      </Suspense>    </div>  );}

Aquí, mientras se está obteniendo el LeoComponent, se mostrará el componente de respaldo, indicando que el contenido se está cargando.

Ventajas de React.lazy()

1. Velocidad mejorada: Al cargar selectivamente los componentes necesarios para la vista actual y no cargar todos los componentes de una vez, la carga tardía de componentes puede mejorar la velocidad de la aplicación.
2. Experiencia de usuario mejorada: Puedes mejorar la experiencia del usuario informándoles que la aplicación está cargando material de manera activa utilizando “Suspense” para mostrar una indicación de carga.
3. División de código: Una de las principales ventajas de lazy() es que permite la división de código. El proceso de división de código consiste en dividir el código de tu aplicación en paquetes más pequeños y bajo demanda. Esto reduce el tamaño del paquete inicial y acelera el tiempo de carga de tu aplicación.

Con lazy(), puedes dividir el código y cargar los componentes de forma tardía en tus aplicaciones de React. Esta es una gran característica. Es una herramienta útil para optimizar la eficiencia y los tiempos de carga de tus aplicaciones web, mejorando la experiencia del usuario al cargar componentes solo cuando sea necesario.

Tiene restricciones y consideraciones específicas, pero cuando se utiliza correctamente, puede ser una herramienta útil en tu conjunto de herramientas para el desarrollo de React.

3) Límites de errores

Los componentes de React conocidos como límites de errores tienen la capacidad de detectar y manejar fallos dentro de su subárbol. Dado que pueden gestionar suavemente cualquier problema que surja mientras se espera datos asíncronos, son esenciales para tratar con la suspensión.

class ErrorBoundary extends React.Component {  componentDidCatch(error, info) {    // Manejar el error  }  render() {    return this.props.children;  }}

4) ¿Qué es el renderizado concurrente?

React Suspense se introdujo como parte del Modo Concurrente, que es un conjunto experimental de características en React. Más tarde, se introdujo el renderizado concurrente.

El renderizado concurrente permite la ejecución de numerosas tareas a la vez, mejorando la capacidad de respuesta y la eficiencia de las aplicaciones de React. Es un componente del Modo Concurrente, una colección de características de prueba y error diseñadas para superar algunas de las desventajas del renderizado convencional de React.

El objetivo principal del renderizado concurrente es asegurarse de que la interfaz de usuario se mantenga fluida y receptiva incluso cuando React está gestionando una renderización complicada u otras operaciones asíncronas.

¿Cómo funciona React Suspense?

Cuando utilizas React Suspense con operaciones asíncronas, sigue estos pasos:

1. Después de cargar React, se renderiza un árbol de componentes.
2. React verifica si alguno de sus componentes hijos está en un estado de suspensión cuando encuentra un componente de Suspense.
3. Si un componente hijo está esperando datos (por ejemplo, como resultado de una importación lazy() o una búsqueda de datos), React mostrará la interfaz de usuario de respaldo proporcionada hasta que los datos estén listos.
4. Una vez que los datos estén disponibles, React realiza una transición fluida para renderizar el contenido real.

Debido a que este proceso es automatizado, el manejo de acciones asíncronas sin programar lógica sofisticada es mucho más fácil para los desarrolladores.

Casos de uso de React Suspense

React Suspense es una herramienta flexible para tu conjunto de herramientas que se puede utilizar en una variedad de casos, que incluyen:

1. Obtención de datos

La función de obtención de datos de React Suspense facilita la gestión de la carga asíncrona de datos en tus aplicaciones de React. React Suspense te permite retrasar el renderizado hasta que los datos estén disponibles, mejorando la experiencia del usuario al ofrecer contenido de respaldo o indicaciones de carga.

Voy a dar un ejemplo utilizando una API falsa para mostrar cómo recuperar datos utilizando React Suspense.

Así es cómo se utiliza React Suspense para gestionar la carga de datos, asumiendo que estás utilizando un framework como React Query o Relay para la obtención de datos:

Establecer límite de error y React Suspense

Para capturar cualquier fallo durante la obtención de datos, primero debes configurar un límite de error y un componente React Suspense. Así es como puedes hacer un componente personalizado de ErrorBoundary en React para la obtención de datos:

import React from 'react';class ErrorBoundary extends React.Component {  constructor(props) {    super(props);    this.state = { hasError: false };  }  static getDerivedStateFromError(error) {    return { hasError: true };  }  render() {    if (this.state.hasError) {      return <div>Error: ¡Algo salió mal!</div>;    }    return this.props.children;  }}export default ErrorBoundary;

Usar React Query para obtener datos

Si estás utilizando React Query para obtener datos, puedes crear un componente que use useQuery para obtener los datos y envolverlo en Suspense:

import React from 'react';import { useQuery } from 'react-query';import ErrorBoundary from './ErrorBoundary';// Define tu función para obtener los datosasync function fetchData() {  const response = await fetch('https://api.example.com/data');  if (!response.ok) {    throw new Error('La respuesta de la red no fue correcta');  }  return response.json();}function DataFetching() {  const { data, isLoading, isError } = useQuery('data', fetchData);  if (isLoading) {    throw new Promise((resolve) => setTimeout(resolve, 2000)); // Simula un retraso en la carga  }  if (isError) {    throw new Error('Error al obtener los datos');  }  return (    <div>      <h1>Obteniendo datos con React Suspense</h1>      <p>{data}</p>    </div>  );}function App() {  return (    <div>      <h1>Aplicación de Leo</h1>      <ErrorBoundary>        <React.Suspense fallback={<div>Cargando...</div>}>          <DataFetchingComponent />        </React.Suspense>      </ErrorBoundary>    </div>  );}export default App;

En este ejemplo, obtenemos datos utilizando el gancho useQuery de React Query. Para mostrar un indicador de carga, utilizamos throw in new Promise para simular un retraso en la carga si los datos aún se están cargando (isLoading es true). Lanzamos un error para que el límite de error pueda capturarlo si hay algún problema.

Puedes proporcionar un componente de respaldo para mostrar mientras se está cargando envolviendo el componente DataFetching en Suspense. En este caso, es un mensaje sencillo de “Cargando…”.

También debes asegurarte de personalizar el manejo de errores, las indicaciones de carga y la función de obtención de datos según tus necesidades únicas para obtener datos.

Este ejemplo muestra cómo React Suspense facilita la gestión del estado y la obtención de datos, lo que lleva a una base de código más organizada y comprensible.

Estos son ejemplos de Suspense utilizado en un escenario de obtención de datos en React.

2. Carga perezosa en React Suspense

Cargar componentes de tu aplicación solo cuando se necesitan (carga perezosa, también conocida como división de código) puede reducir el tamaño de tu paquete inicial y acelerar la carga de tu aplicación de React.

Puedes utilizar React.lazy() junto con React Suspense para incluir fácilmente la carga perezosa en tu aplicación.

A continuación, se muestran los pasos para implementar la carga perezosa con React Suspense:

Primero, importa Suspense de React:

import { Suspense } from 'react';

A continuación, crea un componente con carga perezosa en tu aplicación de React. Para construir un componente que cargue lentamente, utiliza el método React.lazy(). Proporciona una función de flecha para importar dinámicamente el componente.

const LennyComponent = lazy(() => import('./LennyComponent'));

Luego, envuelve tu componente con un Suspense. Envuelve Suspense alrededor de la parte lenta. Mientras el componente con carga perezosa se está cargando, puedes designar un indicador de carga o un componente de respaldo para mostrar.

function App() {  return (    <div>      <h1>Aplicación de Leo</h1>      <Suspense fallback={<div>Cargando...</div>}>        <LennyComponent />      </Suspense>    </div>  );}

El componente se puede usar como cualquier otro componente en tu aplicación de React.

function LennyComponent() {  return <div>Este componente se carga de forma perezosa.</div>;}

Para terminar la construcción de tu aplicación, debes usar un servidor de desarrollo y una herramienta como Webpack para construir y servir tu aplicación con el fin de garantizar que la división de código funcione como se desea. Tu código se dividirá automáticamente en piezas utilizando Webpack para la carga perezosa.

Esta configuración minimizará el tamaño del paquete inicial y acelerará la carga de tu aplicación de React al cargar solo el LazyComponent cuando sea necesario. Mientras se recupera el componente, los usuarios verán la indicación de carga (en este ejemplo, “Cargando…”). El componente se carga y se renderiza en la aplicación con facilidad.

3. Experiencias de Usuario Mejoradas

React Suspense se puede utilizar para garantizar una experiencia de usuario fluida mostrando indicadores de carga o contenido alternativo durante la carga de datos. Esto reduce el tiempo de carga percibido para las personas que utilizan tu aplicación de React.

Por ejemplo, pongamos que tienes un componente que obtiene datos de una API utilizando fetch y quieres mostrar un spinner de carga mientras se obtienen los datos. Aquí tienes un ejemplo básico utilizando React Suspense:

import React, { Suspense } from 'react';// Un componente que obtiene datosconst fetchApiData = () => {  return new Promise((resolve) => {    setTimeout(() => {      resolve('¡Datos cargados!');    }, 2000); // Simulando un retraso de 2 segundos para obtener los datos  });};// Un componente que utiliza Suspense para manejar la obtención de datos de forma asincrónicaconst DataComponent = () => {  const apidata = fetchApiData(); // Esto puede ser cualquier función asíncrona, como una llamada a una API  return <div>{apiData}</div>;};// Envolviendo el componente con Suspenseconst App = () => {  return (    <Suspense fallback={<LoadingSpinner />}>      <DataComponent />    </Suspense>  );};// Un componente simple de spinner de cargaconst LoadingSpinner = () => {  return <div>Cargando...</div>;};

En este ejemplo:

El método fetchApiData es utilizado por el componente DataComponent para obtener datos. Ten en cuenta que aunque fetchApiData es realmente una función sencilla que devuelve una promesa, en aplicaciones prácticas podría ser una llamada a una API.

El componente Suspense, que requiere un argumento de fallback, encapsula el componente App. El componente que se mostrará mientras la operación asincrónica se está ejecutando es la prop fallback. En este ejemplo, es el componente LoadingSpinner.

React Suspense se encargará automáticamente de la obtención de datos asincrónicos cuando se renderice el componente DataComponent. El componente LoadingSpinner se renderizará si los datos aún no están disponibles. Después de que se recuperen los datos, se actualizará la interfaz de usuario.

Este método elimina la necesidad de gestionar manualmente el estado de carga, lo que conduce a una experiencia de usuario más fluida. Este código es sencillo y React Suspense funciona eficientemente aquí.

Conclusión

React Suspense es una gran adición al ecosistema de React. Proporciona un método más simple e integrado para gestionar acciones asincrónicas y estados de carga. Puedes utilizarlo para diseñar aplicaciones que ofrecen tiempos de carga más rápidos, obtención de datos más eficiente y mejores experiencias de usuario utilizando Suspense, React.lazy() y límites de errores.

Es fundamental comprender las capacidades, limitaciones y mejores prácticas de cualquier herramienta sólida. Concurrent Mode y React Suspense tienen el poder de revolucionar el desarrollo de aplicaciones web y mejorar aún más la experiencia de usuario. Sin embargo, a medida que el ecosistema de React continúa creciendo, es imperativo mantenerse al día con los avances más recientes y las mejores prácticas de la industria.

• Asynchronous
• React