Pattern di React Suspense: Recupero dati e limiti di errore

React Suspense è una potente funzionalità che ti consente di "sospendere" il rendering dei componenti durante l'attesa di operazioni asincrone, come il recupero dei dati, per essere completate. Abbinato ai Limiti di Errore, fornisce un meccanismo robusto per la gestione degli stati di caricamento e degli errori, risultando in un'esperienza utente più fluida e resiliente. Questo articolo esplora vari pattern per sfruttare Suspense e i Limiti di Errore in modo efficace nelle tue applicazioni React.

Comprendere React Suspense

Al suo interno, Suspense è un meccanismo che consente a React di attendere qualcosa prima di eseguire il rendering di un componente. Questo "qualcosa" è in genere un'operazione asincrona, come il recupero di dati da un'API. Invece di visualizzare una schermata vuota o uno stato intermedio potenzialmente fuorviante, puoi visualizzare un'interfaccia utente di fallback (ad es. uno spinner di caricamento) mentre i dati vengono caricati.

Il vantaggio principale è un miglioramento della performance percepita e un'esperienza utente più piacevole. Gli utenti vengono immediatamente presentati con un feedback visivo che indica che sta succedendo qualcosa, piuttosto che chiedersi se l'applicazione è bloccata.

Concetti chiave

• Componente Suspense: Il componente <Suspense> avvolge i componenti che potrebbero sospendersi. Accetta una prop fallback, che specifica l'interfaccia utente da visualizzare mentre i componenti avvolti sono sospesi.
• Interfaccia utente di fallback: Questa è l'interfaccia utente visualizzata mentre l'operazione asincrona è in corso. Può essere qualsiasi cosa, da un semplice spinner di caricamento a un'animazione più elaborata.
• Integrazione con le Promise: Suspense funziona con le Promise. Quando un componente tenta di leggere un valore da una Promise che non è ancora stata risolta, React sospende il componente e visualizza l'interfaccia utente di fallback.
• Origini dati: Suspense si basa su origini dati che sono consapevoli di Suspense. Queste origini espongono un'API che consente a React di rilevare quando i dati vengono recuperati.

Recupero dati con Suspense

Per utilizzare Suspense per il recupero dei dati, avrai bisogno di una libreria di recupero dati consapevole di Suspense. Ecco un approccio comune che utilizza una funzione `fetchData` personalizzata:

Esempio: Recupero dati semplice

Innanzitutto, crea una funzione di utilità per il recupero dei dati. Questa funzione deve gestire l'aspetto della "sospensione". Avvolgeremo le nostre chiamate fetch in una risorsa personalizzata per gestire correttamente lo stato della promise.

            // 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
              
            
          

Ora, creiamo un componente che utilizza Suspense per visualizzare i dati dell'utente:

            // 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>Phone: {user.phone}</p>
    </div>
  );
}

export default UserProfile;
            

              
                Copy
              
            
          

Infine, avvolgi il componente UserProfile con <Suspense>:

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

function App() {
  return (
    <Suspense fallback={<p>Caricamento dei dati utente...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

In questo esempio, il componente UserProfile tenta di leggere i dati user dalla resource. Se i dati non sono ancora disponibili (la Promise è ancora in sospeso), il componente si sospende e viene visualizzata l'interfaccia utente di fallback ("Caricamento dei dati utente..."). Una volta recuperati i dati, il componente viene nuovamente renderizzato con le informazioni utente effettive.

Vantaggi di questo approccio

• Recupero dati dichiarativo: Il componente esprime *quali* dati sono necessari, non *come* recuperarli.
• Gestione centralizzata dello stato di caricamento: Il componente Suspense gestisce lo stato di caricamento, semplificando la logica del componente.

Limiti di errore per la resilienza

Mentre Suspense gestisce gli stati di caricamento in modo appropriato, non gestisce intrinsecamente gli errori che potrebbero verificarsi durante il recupero dei dati o il rendering dei componenti. È qui che entrano in gioco i Limiti di Errore.

I Limiti di Errore sono componenti React che intercettano gli errori JavaScript ovunque nel loro albero dei componenti figlio, registrano tali errori e visualizzano un'interfaccia utente di fallback invece di arrestare l'intera applicazione. Sono fondamentali per la creazione di interfacce utente resilienti in grado di gestire gli errori imprevisti in modo appropriato.

Creazione di un limite di errore

Per creare un Limite di Errore, è necessario definire un componente di classe che implementi i metodi del ciclo di vita static getDerivedStateFromError() e 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) {
    // Aggiorna lo stato in modo che il rendering successivo mostri l'interfaccia utente di fallback.
    return {
       hasError: true,
       error: error
     };
  }

  componentDidCatch(error, errorInfo) {
    // Puoi anche registrare l'errore su un servizio di segnalazione errori
    console.error("Errore rilevato: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Puoi eseguire il rendering di qualsiasi interfaccia utente di fallback personalizzata
      return (
        <div>
          <h2>Qualcosa è andato storto.</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
              
            
          

Il metodo getDerivedStateFromError viene chiamato quando viene generato un errore in un componente discendente. Aggiorna lo stato per indicare che si è verificato un errore.

Il metodo componentDidCatch viene chiamato dopo che è stato generato un errore. Riceve l'errore e le informazioni sull'errore, che è possibile utilizzare per registrare l'errore in un servizio di segnalazione errori o visualizzare un messaggio di errore più informativo.

Utilizzo dei limiti di errore con Suspense

Per combinare i limiti di errore con Suspense, è sufficiente avvolgere il 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>Caricamento dei dati utente...</p>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Ora, se si verifica un errore durante il recupero dei dati o il rendering del componente UserProfile, il Limite di Errore intercetterà l'errore e visualizzerà l'interfaccia utente di fallback, impedendo l'arresto anomalo dell'intera applicazione.

Pattern avanzati di Suspense

Oltre al recupero dei dati di base e alla gestione degli errori, Suspense offre numerosi pattern avanzati per la creazione di interfacce utente più sofisticate.

Code Splitting con Suspense

Il code splitting è il processo di suddivisione dell'applicazione in blocchi più piccoli che possono essere caricati su richiesta. Ciò può migliorare significativamente il tempo di caricamento iniziale dell'applicazione.

React.lazy e Suspense rendono il code splitting incredibilmente semplice. Puoi utilizzare React.lazy per importare dinamicamente i componenti e quindi avvolgerli con <Suspense> per visualizzare un'interfaccia utente di fallback mentre i componenti vengono caricati.

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

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

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

export default App;
            

              
                Copy
              
            
          

In questo esempio, il MyComponent viene caricato su richiesta. Mentre viene caricato, viene visualizzata l'interfaccia utente di fallback ("Caricamento del componente..."). Una volta caricato il componente, viene renderizzato normalmente.

Recupero dati parallelo

Suspense ti consente di recuperare più origini dati in parallelo e visualizzare una singola interfaccia utente di fallback mentre tutti i dati vengono caricati. Questo può essere utile quando è necessario recuperare dati da più API per eseguire il rendering di un singolo 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>Caricamento dei dati utente e dei post...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

In questo esempio, il componente UserProfile recupera sia i dati utente che i dati dei post in parallelo. Il componente <Suspense> visualizza una singola interfaccia utente di fallback mentre entrambe le origini dati vengono caricate.

API Transition con useTransition

React 18 ha introdotto l'hook useTransition, che migliora Suspense fornendo un modo per gestire gli aggiornamenti dell'interfaccia utente come transizioni. Ciò significa che puoi contrassegnare determinati aggiornamenti dello stato come meno urgenti e impedire loro di bloccare l'interfaccia utente. Questo è particolarmente utile quando si ha a che fare con il recupero di dati più lento o operazioni di rendering complesse, migliorando le prestazioni percepite.

Ecco come puoi usare 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>Phone: {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}>
        Mostra Profilo Utente
      </button>
      {isPending && <p>Caricamento...</p>}
      <Suspense fallback={<p>Caricamento dei dati utente...</p>}>
        {showProfile && <UserProfile />}
      </Suspense>
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

In questo esempio, fare clic sul pulsante "Mostra Profilo Utente" avvia una transizione. startTransition contrassegna l'aggiornamento di setShowProfile come transizione, consentendo a React di dare la priorità ad altri aggiornamenti dell'interfaccia utente. Il valore isPending da useTransition indica se una transizione è in corso, consentendoti di fornire feedback visivo (ad es. disabilitando il pulsante e mostrando un messaggio di caricamento).

Best practice per l'utilizzo di Suspense e dei limiti di errore

• Avvolgi Suspense attorno all'area più piccola possibile: Evita di avvolgere grandi parti della tua applicazione con <Suspense>. Invece, avvolgi solo i componenti che devono effettivamente essere sospesi. Ciò ridurrà al minimo l'impatto sul resto dell'interfaccia utente.
• Usa interfacce utente di fallback significative: L'interfaccia utente di fallback dovrebbe fornire agli utenti un feedback chiaro e informativo su ciò che sta accadendo. Evita gli spinner di caricamento generici; invece, prova a fornire più contesto (ad es. "Caricamento dei dati utente...").
• Posiziona strategicamente i limiti di errore: Pensa attentamente a dove posizionare i limiti di errore. Posizionali abbastanza in alto nell'albero dei componenti per intercettare gli errori che potrebbero influire su più componenti, ma abbastanza in basso per evitare di intercettare gli errori specifici di un singolo componente.
• Registra gli errori: Usa il metodo componentDidCatch per registrare gli errori su un servizio di segnalazione errori. Questo ti aiuterà a identificare e correggere gli errori nella tua applicazione.
• Fornisci messaggi di errore intuitivi: L'interfaccia utente di fallback visualizzata dai limiti di errore dovrebbe fornire agli utenti informazioni utili sull'errore e su cosa possono fare al riguardo. Evita il gergo tecnico; invece, usa un linguaggio chiaro e conciso.
• Testa i tuoi limiti di errore: Assicurati che i tuoi limiti di errore funzionino correttamente generando deliberatamente errori nella tua applicazione.

Considerazioni internazionali

Quando utilizzi Suspense e i Limiti di Errore in applicazioni internazionali, considera quanto segue:

• Localizzazione: Assicurati che le interfacce utente di fallback e i messaggi di errore siano correttamente localizzati per ogni lingua supportata dalla tua applicazione. Usa librerie di internazionalizzazione (i18n) come react-intl o i18next per gestire le traduzioni.
• Layout da destra a sinistra (RTL): Se la tua applicazione supporta lingue RTL (ad es. arabo, ebraico), assicurati che le interfacce utente di fallback e i messaggi di errore vengano visualizzati correttamente nei layout RTL. Usa proprietà logiche CSS (ad es. margin-inline-start invece di margin-left) per supportare sia i layout LTR che RTL.
• Accessibilità: Assicurati che le interfacce utente di fallback e i messaggi di errore siano accessibili agli utenti con disabilità. Usa gli attributi ARIA per fornire informazioni semantiche sullo stato di caricamento e sui messaggi di errore.
• Sensibilità culturale: Tieni presente le differenze culturali quando progetti le interfacce utente di fallback e i messaggi di errore. Evita di usare immagini o linguaggi che potrebbero essere offensivi o inappropriati in determinate culture. Ad esempio, uno spinner di caricamento comune potrebbe essere percepito negativamente in alcune culture.

Esempio: Messaggio di errore localizzato

Usando react-intl, puoi creare messaggi di errore localizzati:

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

class ErrorBoundary extends React.Component {
  // ... (come prima)

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2><FormattedMessage id="error.title" defaultMessage="Qualcosa è andato storto." /></h2>
          <p><FormattedMessage id="error.message" defaultMessage="Riprova più tardi." /></p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

Quindi, definisci le traduzioni nei tuoi file di localizzazione:

            // 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
              
            
          

Conclusione

React Suspense e i Limiti di Errore sono strumenti essenziali per la creazione di interfacce utente moderne, resilienti e intuitive. Comprendendo e applicando i pattern descritti in questo articolo, puoi migliorare significativamente le prestazioni percepite e la qualità generale delle tue applicazioni React. Ricorda di considerare l'internazionalizzazione e l'accessibilità per garantire che le tue applicazioni siano utilizzabili da un pubblico globale.

Il recupero asincrono dei dati e la corretta gestione degli errori sono aspetti critici di qualsiasi applicazione web. Suspense, combinato con i Limiti di Errore, offre un modo dichiarativo ed efficiente per gestire queste complessità in React, risultando in un'esperienza utente più fluida e affidabile per gli utenti di tutto il mondo.