Comprendre le traitement par lots d’états dans React

Introduction

Dans le monde de React, un rendu efficace et une optimisation des performances sont les clés du succès. L’un des concepts les plus importants qui joue un rôle clé dans les mises à jour de l’état de React est Traitement par lots d’état/traitement automatique. Ce mécanisme a été introduit en Réagir version 18ce qui a un impact significatif sur les performances de l’application et la gestion des mises à jour d’état. Dans ce blog, nous approfondirons le concept et percerons tous les mystères du regroupement d’états, pourquoi c’est important et comment nous pouvons le gérer efficacement dans notre Réagir aux applications.

Qu’est-ce que le traitement par lots d’état ?

Lorsque nous définissons une variable d’état dans React, cela déclenche un restituer. Cependant, il peut arriver que nous souhaitions effectuer plusieurs opérations sur la valeur de l’état avant de lancer le prochain rendu. Pour gérer cela efficacement, nous respectons les règles du mécanisme de traitement par lots de l’État. Traitement par lots d’état est une technique d’optimisation des performances utilisée par React pour minimiser le nombre de nouveaux rendus et améliorer l’efficacité des mises à jour. Au lieu de traiter chaque mise à jour d’état immédiatement, React regroupe plusieurs mises à jour d’état et les traite dans un seul rendu. Cela garantit que les composants ne sont restitués qu’une seule fois, quel que soit le nombre de mises à jour d’état déclenchées.

Décomposons le batching d’état dans les termes les plus simples :

L’analogie du dîner

Imaginez que vous organisez un dîner et que vous avez pour règle de servir de la nourriture uniquement lorsque vous avez un plateau plein.

Sans mise en lots: Chaque fois que quelqu’un demande à boire ou à manger, vous vous rendez immédiatement à la cuisine et vous le sortez, même s’il ne s’agit que d’un seul article. Vous faites donc de nombreux allers-retours vers la cuisine.
Avec traitement par lots: Au lieu de cela, vous attendez que plusieurs invités aient demandé des articles différents. Une fois que vous avez un plateau plein de demandes, vous allez à la cuisine, remplissez le plateau et servez le tout en un seul voyage. De cette façon, vous effectuez moins de déplacements et tout est livré plus rapidement et plus efficacement.

Lire aussi: Alimenter des applications Web dynamiques : intégrer React à l’API Drupal 10 pour la sécurité et l’efficacité

Essayons maintenant de comprendre comment cela fonctionne à l’aide du code :

import { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0);
    const handleClick = () => {
       setCount(count + 1);
       setCount(count + 1);
       setCount(count + 1);
       setCount(count + 1);
       setCount(count + 1);
    };
    return (
        <>
          <h1>{count}</h1> 
          <button onClick={handleClick}>+5</button>
        </>
    );
}

Sortir:

Cette image représente le rendu initial de l’application React ayant une valeur initiale de count (c’est-à-dire 0) et un bouton +5 rendu de l’application React.

Cette image représente la valeur de comptage incrémentée (c’est-à-dire 1) après avoir cliqué sur le bouton +5.

Explication:

• D’après le premier aperçu du code ci-dessus, lorsque nous cliquons sur le bouton « +5 », il devrait afficher « 5 » comme sortie, en raison de setCount (compte +1) étant appelé 5 fois de suite, ce qui entraîne un nouveau rendu 5 fois. Cependant, comme le représente la deuxième image, elle affiche l’état du compte comme « 1 » lorsque vous cliquez sur le bouton.
• Selon React, chaque valeur d’état rendue est fixé. Par conséquent, la valeur de l’état (compte) à l’intérieur du gestionnaire d’événements du premier rendu est toujours 0. Quelle que soit la fréquence à laquelle il a été déclenché, React attendra que tout le code des gestionnaires d’événements soit exécuté avant de traiter les mises à jour d’état.
• C’est pourquoi le nouveau rendu n’a lieu qu’après tous les setCount() sont appelés. Cela nous empêche de restituer lorsque nous mettons à jour plusieurs états appelés à partir du même composant ou de composants différents sans déclencher de nouveaux rendus. Ce concept est connu sous le nom de Batching où React attend que tout le code des gestionnaires d’événements soit exécuté, puis commence à mettre à jour l’interface utilisateur. Ce processus aide les applications React à s’exécuter plus rapidement.

Pourquoi le State Batching est-il important ?

• Optimisation des performances: En regroupant les mises à jour d’état, React réduit le nombre de nouveaux rendus et donc la quantité de travail nécessaire pour mettre à jour le DOM est diminuée, ce qui conduit à des applications plus fluides et plus efficaces.
• Comportement prévisible: Avec le traitement par lots d’états, les mises à jour d’état sont prévisibles et moins susceptibles de provoquer des conditions de concurrence ou des comportements inattendus, car React traite toutes les mises à jour d’état de manière contrôlée.

Mettre à jour le même état plusieurs fois avant le prochain rendu

Il peut y avoir un scénario rare dans lequel nous souhaitons mettre à jour la même variable d’état plusieurs fois avant le prochain rendu. Pour gérer ce genre de cas, au lieu de passer l’état suivant comme setCount(compte+1)nous pouvons passer une fonction qui calcule l’état suivant en fonction du précédent, comme setCount(prévCount => prévCount + 1). En utilisant cette méthode, nous demandons à React de se souvenir de l’état précédent et d’effectuer la tâche, au lieu de la remplacer.

Donc si on remplace setCount(compte+1) à setCount(prévCount => prévCount + 1) alors prevCount => prevCount => prevCount + 1 agira comme une fonction de mise à jour qui mettra en file d’attente la valeur précédente pour d’autres tâches.

Ainsi, lorsque nous appelons la fonction de mise à jour, elle est ajoutée à une file d’attente. Lorsque React appelle utiliserÉtat pour le prochain rendu, il passe par la file d’attente. Dans notre cas, la valeur initiale de « count » (soit 0) sera passée en argument à prevCount dans la fonction updater. React prend la valeur renvoyée par notre fonction de mise à jour précédente et la transmet au programme de mise à jour suivant sous le nom prevCount et ainsi de suite, en stockant « 5 » comme résultat final. C’est ainsi que nous pouvons mettre à jour l’état en utilisant la valeur de l’état précédent.

Conclusion

Le State Batching est une optimisation cruciale dans React, qui améliore les performances et la cohérence en regroupant plusieurs mises à jour d’état en une seule passe de rendu. Comprendre le fonctionnement du State Batching peut aider à écrire des applications React plus efficaces et plus prévisibles. En exploitant efficacement State Batching et en suivant les avancées de React, nous pouvons créer des interfaces utilisateur plus fluides et plus réactives qui offrent une meilleure expérience à tous les utilisateurs. Obtenez une consultation gratuite sur la façon dont nous pouvons vous aider Services de développement Web. Cliquez ici pour planifier une rencontre avec nous.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE