Composition de l'état de chargement React Suspense : Gestion du chargement imbriqué

React Suspense, introduit dans React 16.6, fournit un moyen déclaratif de gérer les états de chargement dans votre application. Il vous permet de "suspendre" le rendu d'un composant jusqu'à ce que ses dépendances (comme les données ou le code) soient prêtes. Bien que son utilisation de base soit relativement simple, maîtriser Suspense implique de comprendre comment composer efficacement les états de chargement, en particulier lorsqu'il s'agit de scénarios de chargement imbriqués. Cet article fournit un guide complet sur React Suspense et ses techniques de composition avancées pour une expérience utilisateur fluide et engageante.

Comprendre les bases de React Suspense

À la base, Suspense est un composant React qui accepte une propriété fallback. Ce repli est rendu pendant que les composants enveloppés par Suspense attendent le chargement de quelque chose. Les cas d'utilisation les plus courants impliquent :

• Code Splitting avec React.lazy : Importer dynamiquement des composants pour réduire la taille initiale du bundle.
• Récupération de données : Attendre que les données d'une API soient résolues avant de rendre le composant qui en dépend.

Code Splitting avec React.lazy

React.lazy vous permet de charger des composants React à la demande. Cela peut améliorer considérablement le temps de chargement initial de votre application, en particulier pour les applications volumineuses avec de nombreux composants. Voici un exemple de base :

            import React, { Suspense, lazy } from 'react';

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

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

export default App;

            

              
                Copy
              
            
          

Dans cet exemple, MyComponent n'est chargé que lorsqu'il est nécessaire. Pendant qu'il se charge, le fallback (dans ce cas, un simple message "Chargement...") est affiché.

Récupération de données avec Suspense

Bien que React.lazy fonctionne dès le départ avec Suspense, la récupération de données nécessite une approche légèrement différente. Suspense ne s'intègre pas directement aux bibliothèques de récupération de données standard comme fetch ou axios. Au lieu de cela, vous devez utiliser une bibliothèque ou un modèle capable de "suspendre" un composant tout en attendant les données. Une solution populaire consiste à utiliser une bibliothèque de récupération de données comme swr ou react-query, ou à mettre en œuvre une stratégie personnalisée de gestion des ressources.

Voici un exemple conceptuel utilisant une approche personnalisée de gestion des ressources :

            // Resource.js
const createResource = (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;
    },
  };
};

export default createResource;

// MyComponent.js
import React from 'react';
import createResource from './Resource';

const fetchData = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: 'Données récupérées !' }), 2000)
  );

const resource = createResource(fetchData());

function MyComponent() {
  const data = resource.read();
  return <p>{data.data}</p>;
}

export default MyComponent;

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

function App() {
  return (
    <Suspense fallback={<p>Chargement des données...</p>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Explication :

• createResource : Cette fonction prend une promesse et renvoie un objet avec une méthode read.
• read : Cette méthode vérifie l'état de la promesse. Si elle est en attente, elle lance la promesse, ce qui suspend le composant. Si elle est résolue, elle renvoie les données. Si elle est rejetée, elle lance l'erreur.
• MyComponent : Ce composant utilise la méthode resource.read() pour accéder aux données. Si les données ne sont pas prêtes, le composant se suspend.
• App : Enveloppe MyComponent dans Suspense, fournissant une interface utilisateur de repli pendant le chargement des données.

Composition des états de chargement : la puissance de Suspense imbriqué

La véritable puissance de Suspense réside dans sa capacité à être composé. Vous pouvez imbriquer des composants Suspense pour créer des expériences de chargement plus granulaires et sophistiquées. Ceci est particulièrement utile lorsque vous traitez des composants qui ont plusieurs dépendances asynchrones ou lorsque vous souhaitez prioriser le chargement de certaines parties de votre interface utilisateur.

Suspense imbriqué de base

Imaginons un scénario où vous avez une page avec un en-tête, une zone de contenu principale et une barre latérale. Chacun de ces composants peut avoir ses propres dépendances asynchrones. Vous pouvez utiliser des composants Suspense imbriqués pour afficher différents états de chargement pour chaque section indépendamment.

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<p>Chargement de l'en-tête...</p>}>
        <Header />
      </Suspense>
      <div style={{ display: 'flex' }}>
        <Suspense fallback={<p>Chargement du contenu principal...</p>}>
          <MainContent />
        </Suspense>
        <Suspense fallback={<p>Chargement de la barre latérale...</p>}>
          <Sidebar />
        </Suspense>
      </div>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Dans cet exemple, chaque composant (Header, MainContent et Sidebar) est enveloppé dans sa propre limite Suspense. Cela signifie que si le Header est toujours en cours de chargement, le message "Chargement de l'en-tête..." sera affiché, tandis que MainContent et Sidebar peuvent toujours se charger indépendamment. Cela permet une expérience utilisateur plus réactive et informative.

Priorisation des états de chargement

Parfois, vous souhaiterez peut-être prioriser le chargement de certaines parties de votre interface utilisateur. Par exemple, vous voudrez peut-être vous assurer que l'en-tête et la navigation sont chargés avant le contenu principal. Vous pouvez y parvenir en imbriquant des composants Suspense de manière stratégique.

            import React, { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));

function App() {
  return (
    <Suspense fallback={<p>Chargement de l'en-tête et du contenu...</p>}>
      <Header />
      <Suspense fallback={<p>Chargement du contenu principal...</p>}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Dans cet exemple, le Header et le MainContent sont tous deux enveloppés dans une seule limite Suspense extérieure. Cela signifie que le message "Chargement de l'en-tête et du contenu..." sera affiché jusqu'à ce que le Header et le MainContent soient chargés. Le Suspense interne pour MainContent ne sera déclenché que si le Header est déjà chargé, offrant une expérience de chargement plus granulaire pour la zone de contenu.

Gestion avancée du chargement imbriqué

Au-delà de l'imbrication de base, vous pouvez employer des techniques plus avancées pour gérer les états de chargement dans les applications complexes. Celles-ci incluent :

• Composants de repli personnalisés : Utilisation d'indicateurs de chargement plus visuellement attrayants et informatifs.
• Gestion des erreurs avec les limites d'erreurs : Gestion en douceur des erreurs qui se produisent pendant le chargement.
• Debouncing et Throttling : Optimisation du nombre de fois qu'un composant tente de charger des données.
• Combinaison de Suspense avec des transitions : Création de transitions fluides entre les états de chargement et de chargement.

Composants de repli personnalisés

Au lieu d'utiliser des messages texte simples comme replis, vous pouvez créer des composants de repli personnalisés qui offrent une meilleure expérience utilisateur. Ces composants peuvent inclure :

• Spinners : Indicateurs de chargement animés.
• Squelettes : Éléments d'interface utilisateur d'espace réservé qui imitent la structure du contenu réel.
• Barres de progression : Indicateurs visuels de la progression du chargement.

Voici un exemple d'utilisation d'un composant squelette comme repli :

            import React from 'react';
import Skeleton from 'react-loading-skeleton'; // Vous devrez installer cette bibliothèque

function LoadingSkeleton() {
  return (
    <div>
      <Skeleton count={3} />
    </div>
  );
}

export default LoadingSkeleton;

// Utilisation dans App.js
import React, { Suspense, lazy } from 'react';
import LoadingSkeleton from './LoadingSkeleton';

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

function App() {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Cet exemple utilise la bibliothèque react-loading-skeleton pour afficher une série d'espaces réservés squelettes pendant le chargement de MyComponent.

Gestion des erreurs avec les limites d'erreurs

Il est important de gérer les erreurs qui pourraient survenir pendant le processus de chargement. React fournit des limites d'erreurs, qui sont des composants qui interceptent les erreurs JavaScript n'importe où dans leur arborescence de composants enfants, enregistrent ces erreurs et affichent une interface utilisateur de repli. Les limites d'erreurs fonctionnent bien avec Suspense pour fournir un mécanisme de gestion des erreurs robuste.

            import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Mettez à jour l'état afin que le prochain rendu affiche l'interface utilisateur de repli.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Vous pouvez également enregistrer l'erreur auprès d'un service de rapport d'erreurs
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Vous pouvez rendre n'importe quelle interface utilisateur de repli personnalisée
      return <h1>Quelque chose s'est mal passé.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// Utilisation dans App.js
import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

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

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

export default App;

            

              
                Copy
              
            
          

Dans cet exemple, le composant ErrorBoundary enveloppe le composant Suspense. Si une erreur se produit pendant le chargement de MyComponent, le ErrorBoundary interceptera l'erreur et affichera le message "Quelque chose s'est mal passé.".

Debouncing et Throttling

Dans certains cas, vous souhaiterez peut-être limiter le nombre de fois qu'un composant tente de charger des données. Cela peut être utile si le processus de récupération des données est coûteux ou si vous souhaitez éviter des appels d'API excessifs. Le debouncing et le throttling sont deux techniques qui peuvent vous aider à y parvenir.

Debouncing : Retarde l'exécution d'une fonction jusqu'à ce qu'un certain laps de temps se soit écoulé depuis la dernière fois qu'elle a été invoquée.

Throttling : Limite la vitesse à laquelle une fonction peut être exécutée.

Bien que ces techniques soient souvent appliquées aux événements de saisie de l'utilisateur, elles peuvent également être utilisées pour contrôler la récupération des données dans les limites de Suspense. La mise en œuvre dépendrait de la bibliothèque spécifique de récupération de données ou de la stratégie de gestion des ressources que vous utilisez.

Combinaison de Suspense avec des transitions

L'API React Transitions (introduite dans React 18) vous permet de créer des transitions plus fluides entre les différents états de votre application, y compris les états de chargement et de chargement. Vous pouvez utiliser useTransition pour signaler à React qu'une mise à jour d'état est une transition, ce qui peut aider à éviter les mises à jour de l'interface utilisateur saccadées.

            import React, { Suspense, lazy, useState, useTransition } from 'react';

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

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

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

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Chargement...' : 'Charger le composant'}
      </button>
      {showComponent && (
        <Suspense fallback={<p>Chargement du composant...</p>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Dans cet exemple, cliquer sur le bouton "Charger le composant" déclenche une transition. React priorisera le chargement de MyComponent tout en maintenant l'interface utilisateur réactive. L'état isPending indique si une transition est en cours, ce qui vous permet de désactiver le bouton et de fournir un retour visuel à l'utilisateur.

Exemples et scénarios concrets

Pour illustrer davantage les applications pratiques de Suspense imbriqué, examinons quelques scénarios concrets :

• Page de produit de commerce électronique : Une page de produit peut avoir plusieurs sections, telles que les détails du produit, les avis et les produits associés. Chaque section peut être chargée indépendamment à l'aide de limites Suspense imbriquées. Vous pouvez prioriser le chargement des détails du produit pour vous assurer que l'utilisateur voit les informations les plus importantes le plus rapidement possible.
• Fil d'actualités des médias sociaux : Un fil d'actualités des médias sociaux peut être composé de publications, de commentaires et de profils d'utilisateurs. Chacun de ces composants peut avoir ses propres dépendances asynchrones. Suspense imbriqué vous permet d'afficher une interface utilisateur d'espace réservé pour chaque section pendant le chargement des données. Vous pouvez également prioriser le chargement des propres publications de l'utilisateur pour offrir une expérience personnalisée.
• Application de tableau de bord : Un tableau de bord peut contenir plusieurs widgets, chacun affichant des données provenant de différentes sources. Suspense imbriqué peut être utilisé pour charger chaque widget indépendamment. Cela permet à l'utilisateur de voir les widgets disponibles pendant que d'autres sont toujours en cours de chargement, créant ainsi une expérience plus réactive et interactive.

Exemple : Page de produit de commerce électronique

Décomposons la façon dont vous pourriez implémenter Suspense imbriqué sur une page de produit de commerce électronique :

            import React, { Suspense, lazy } from 'react';

const ProductDetails = lazy(() => import('./ProductDetails'));
const ProductReviews = lazy(() => import('./ProductReviews'));
const RelatedProducts = lazy(() => import('./RelatedProducts'));

function ProductPage() {
  return (
    <div>
      <Suspense fallback={<p>Chargement des détails du produit...</p>}>
        <ProductDetails />
      </Suspense>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Chargement des avis sur le produit...</p>}>
          <ProductReviews />
        </Suspense>
      </div>

      <div style={{ marginTop: '20px' }}>
        <Suspense fallback={<p>Chargement des produits connexes...</p>}>
          <RelatedProducts />
        </Suspense>
      </div>
    </div>
  );
}

export default ProductPage;

            

              
                Copy
              
            
          

Dans cet exemple, chaque section de la page du produit (détails du produit, avis et produits connexes) est enveloppée dans sa propre limite Suspense. Cela permet à chaque section de se charger indépendamment, offrant une expérience utilisateur plus réactive. Vous pourriez également envisager d'utiliser un composant squelette personnalisé comme repli pour chaque section afin de fournir un indicateur de chargement plus attrayant visuellement.

Meilleures pratiques et considérations

Lorsque vous travaillez avec React Suspense et la gestion du chargement imbriqué, il est important de garder à l'esprit les meilleures pratiques suivantes :

• Gardez les limites Suspense petites : Des limites Suspense plus petites permettent un contrôle de chargement plus granulaire et une meilleure expérience utilisateur. Évitez d'envelopper de grandes sections de votre application dans une seule limite Suspense.
• Utilisez des composants de repli personnalisés : Remplacez les messages texte simples par des indicateurs de chargement visuellement attrayants et informatifs, tels que des squelettes, des spinners ou des barres de progression.
• Gérez les erreurs avec élégance : Utilisez les limites d'erreurs pour intercepter les erreurs qui se produisent pendant le processus de chargement et afficher un message d'erreur convivial.
• Optimisez la récupération des données : Utilisez des bibliothèques de récupération de données comme swr ou react-query pour simplifier la récupération et la mise en cache des données.
• Tenez compte des performances : Évitez l'imbrication excessive des composants Suspense, car cela peut avoir un impact sur les performances. Utilisez le debouncing et le throttling pour limiter le nombre de fois qu'un composant tente de charger des données.
• Testez vos états de chargement : Testez minutieusement vos états de chargement pour vous assurer qu'ils offrent une bonne expérience utilisateur dans différentes conditions de réseau.

Conclusion

React Suspense fournit un moyen puissant et déclaratif de gérer les états de chargement dans vos applications. En comprenant comment composer efficacement les états de chargement, en particulier grâce à Suspense imbriqué, vous pouvez créer des expériences utilisateur plus engageantes et réactives. En suivant les meilleures pratiques décrites dans cet article, vous pouvez maîtriser React Suspense et créer des applications robustes et performantes qui gèrent avec élégance les dépendances asynchrones.

N'oubliez pas de donner la priorité à l'expérience utilisateur, de fournir des indicateurs de chargement informatifs et de gérer les erreurs avec élégance. Avec une planification et une mise en œuvre minutieuses, React Suspense peut être un outil précieux dans votre arsenal de développement front-end.

En adoptant ces techniques, vous pouvez garantir que vos applications offrent une expérience fluide et agréable aux utilisateurs du monde entier, quels que soient leur emplacement ou les conditions de leur réseau.