Suspense

#Introducció

Suspense is a built-in feature that simplifies managing asynchronous operations managing what is displayed while your components wait for asynchronous tasks to complete.

import { Suspense } from 'react

<Suspense fallback={<DashboardFallback />}>
  <Dashboard />
</Suspense>

When React encounters the Suspense component, it checks if any child components are waiting for a promise to resolve.

If so, React “suspends” the rendering of those components and displays the fallback UI until the promise is resolved.

The fallback UI can be a paragraph, a component, or anything you prefer.

#Data fetching

One of the primary use cases of Suspense is managing data fetching in your applications.

Using Suspense, you can display a loading state while fetching data from an API, providing a smoother user experience.

For example, the code below shows how the DataView fetches data and displays a loading message until the data is available.

const fetchData = () => {
      let data;
      let promise = fetch('/api/data')
        .then(response => response.json())
        .then(json => { data = json });
    
      return {
        read() {
          if (!data) {
            throw promise;
          }
          return data;
        }
      };
    };
    
    const resource = fetchData();
    
    const App = () => (
      <Suspense fallback={<p>Loading data...</p>}>
        <DataComponent />
      </Suspense>
    );
    
    const DataView = () => {
      const data = resource.read();
      return (
        <div>
          <h1>Data: {data.value}</h1>
        </div>
      );
    };

The fetchData function initiates a fetch request and returns an object with a read method. If the data isn’t ready, the read method throws a promise, which tells Suspense to display the fallback UI (“Loading data…”).

Once available, read returns the data, and DataComponent renders it.

#Dades

Quan un component necessita mostrar unes dades que ha de proporiconar un servidor, el component no ha de parar el rederitzar de la página, sinó que ha de mostrar alguna cosa fins que obtingui les dades i pugui mostrar el contingut corresponent.

En aquests casos utilitza el component Suspense:

import { Suspense } from 'react

<Suspense fallback={<DataViewFallback />}>
  <DataView />
</Suspense>

En el moment de renderitzar la pàgina, si el component <Data/> no està llest, React mostrarà el component <DataFallback/> en el seu lloc.

#Aplicació

#lazy()

React té un mecanisme d’importació dinàmica anomenat lazy() que et permet carregar un component només quan sigui necessari.

D’aquesta manera l’aplicació es pot dividir en scripts diferents, i l’script inicial és molt més petit i ràpid de carregar.

La funció lazy() accepta una funció que importa el component;

import { Suspense, lazy } from 'react

const DataView = lazy(() => import('./DataView'))