Utilizzare Suspense in React nel caricamento dati

Nelle ultime versioni React ha messo a disposizione Suspense, che in pratica ci forninsce un modo per visualizzare un loading durante il caricamento dei dati.

Ovviamente era possibile ottenere una cosa simile anche prima, solo che prima dovevamo scrivere un pò più di codice.

In questo articolo vi mostro due esempi per fare una comparazione.

Cominciamo col metodo classico:

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

function App() {

  const [data, setData] = useState<any>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res => res.json())
        .then(res => {
          setData(res);

          setIsLoading(false)
        });
  }, []);

  if (isLoading) {
    return <h2>Loading...</h2>
  }

  return (
      <div className="App">
        <ul>
          {data.map(it => (
              <li key={it.id}>
                {it.title}
              </li>
          ))}
        </ul>
      </div>
  );
}

export default App;

Se invece usiamo Suspense:

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

function App() {

  const [data, setData] = useState<any>([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(res => res.json())
        .then(res => {
          setData(res);
        });
  }, []);

  function Loading() {
    return <h2>Loading...</h2>;
  }

  return (
      <div className="App">
        <Suspense fallback={<Loading/>}>
          <ul>
            {data.map(it => (
                <li key={it.id}>
                  {it.title}
                </li>
            ))}
          </ul>
        </Suspense>
      </div>
  );
}

export default App;

Come vedete basta che indichiamo un componente di fallback, ci penserà lui a mostrarlo/nasconderlo.

Enjoy!