Mode simultané dans React

Découvrez le mode simultané dans React et comment cet ensemble de fonctionnalités aidera à créer des applications plus fluides et plus réactives.

React est l'une des meilleures bibliothèques JavaScript pour créer des applications de nos jours, et nous pouvons lister de nombreux facteurs qui sont responsables de cette réalisation: les concepts (DOM virtuel), l'excellente équipe derrière la technologie, la communauté très engagée, etc.

Tous ces facteurs font la différence dans le succès et l'adoption d'une bibliothèque JavaScript. C'est pourquoi React construit toujours de nouvelles fonctionnalités, pour améliorer l'expérience de ses développeurs et utilisateurs, y compris le sujet de l'article d'aujourd'hui, le mode simultané, un ensemble de fonctionnalités qui ont été très médiatisées et très attendues par de nombreux développeurs React.

Bien qu'annoncé plus de il y a un an à React Conf 2019 le mode concurrent est encore expérimental. Donc, si vous n'avez pas encore saisi l'occasion de l'explorer, découvrons-en plus sur cet ensemble de fonctionnalités appelées mode concurrent et les avantages qu'il peut apporter à nos applications.

Le problème

Il n'y a pas d'autre facteur qui fait que une différence aussi grande dans les applications modernes que la performance. Comment votre application est livrée et rendue, comment les composants communiquent entre eux – tout cela détermine le résultat final.

JavaScript est un langage à un seul thread, ce qui signifie qu'il a une pile d'appels et un tas de mémoire. Pour exécuter le code, JavaScript s'exécute dans l'ordre et doit terminer un morceau de code pour passer au suivant. Parfois, cette synchronicité peut être très nuisible aux performances, en particulier dans React.

Imaginez que nous ayons un champ de saisie et une liste d'éléments. Dans ce champ de saisie, nous pouvons rechercher des éléments et les renvoyer dans cette liste d'éléments. Chaque fois que nous saisissons une nouvelle clé dans le champ de saisie, nous déclenchons un nouveau rendu dans la liste des éléments. Cette situation n'est peut-être pas un problème dans une petite liste d'éléments, mais imaginez qu'au lieu d'une petite liste d'éléments, vous avez 10 000 éléments et vous déclencherez un nouveau rendu à chaque fois que vous tapez une nouvelle clé.

Le déclenchement de nouveaux rendus inutiles peut entraîner un retard dans les performances. C'est pourquoi vous disposez de certaines techniques pour éviter ce comportement. La limitation et le débouncing en JavaScript sont des techniques qui peuvent empêcher les appels d'API inutiles, les chargements et, dans les applications React, les restitutions.

La limitation n'appellera une fonction qu'une seule fois après un laps de temps spécifique. Il réduit considérablement la fréquence des appels de fonction. Le rebond retarde le processus de l'événement pendant une durée prédéterminée.

Vous avez peut-être travaillé ou remarqué ces méthodes dans de nombreuses applications – elles sont très populaires de nos jours. Les deux techniques peuvent empêcher notre interface utilisateur de se restituer encore et encore, et peuvent, si elles sont mises en œuvre correctement, améliorer considérablement les performances.

Ces techniques sont très utiles, en particulier dans React, mais nous devrions rechercher de meilleures alternatives, en particulier à ce moment où JavaScript est un langage de programmation très mature avec des fonctionnalités étonnantes qui n'étaient pas disponibles dans le passé.

C'est pourquoi l'équipe React a commencé le développement d'un nouvel ensemble de fonctionnalités pour nous permettre de créer des applications plus réactives et fluides, et ils l'ont appelé mode concurrent.

Mode concurrent

Le mode concurrent dans React est un ensemble de fonctionnalités qui va nous aider à avoir des interfaces utilisateur plus fluides et réactives en nous permettant d'éviter les mises à jour bloquant le rendu, et de commencer à avoir Rendu interruptible, nous permettant de prioriser les mises à jour de rendu.

React fonctionne aujourd'hui sous l'approche de blocage de rendu. Une fois qu'un nouveau rendu est démarré, nous ne pouvons pas arrêter ou revenir en arrière pendant le rendu. Les autres mises à jour de rendu doivent donc attendre la fin de cette mise à jour de rendu. Cela peut causer beaucoup de problèmes et c'est l'un des cas d'utilisation de la limitation et de la suppression des rebonds dans les applications React.

Le mode simultané résout ce problème en ayant une approche de rendu interruptible. Cela signifie qu'une fois qu'une mise à jour de rendu est lancée, elle peut être arrêtée et une mise à jour de priorité plus élevée peut être exécutée, puis revenir pour mettre à jour ce qu'elle rendait précédemment.

C'est vraiment une fonctionnalité fantastique pour React – imaginez toutes les possibilités que nous avoir et des applications futures que nous pouvons construire avec. Les performances de l'application peuvent s'améliorer, l'expérience de l'utilisateur sera bien plus fluide qu'auparavant, et l'expérience du développeur sera également bien meilleure.

Activation du mode simultané

Pour activer le mode simultané dans votre application React, vous devez utiliser les versions expérimentales de React.

Si vous utilisez create-react-app il est toujours installé avec la dernière version stable de React.

Pour essayer le mode simultané dans votre projet, tout vous devez faire est d'installer l'expérimental:

 mise à niveau du fil react @ experimental react-dom @ experimental

Après avoir installé la version expérimentale de React, comme d'autres fonctionnalités telles que fragments et hooks vous devez l'activer avant de commencer à l'utiliser. Pour activer le mode simultané dans toute votre application, vous devez remplacer ReactDOM.render () par ReactDOM.createRoot () .

 import  ReactDOM  from   'react-dom' ; 
 const  root  =  document .  getElementById  ( 'root' ) ; 
ReactDOM .  createRoot  ( root ) .  render  ( < App  / > [19659027]) ; 

Bien que ce soit expérimental et un ensemble de fonctionnalités en développement, le mode concurrent est actuellement utilisé par Facebook en production. Mais il y a une raison pour laquelle ils l'utilisent en production: ils sont en fait là pour corriger d'éventuels bugs et des changements de rupture.

Il est donc très recommandé de ne pas encore utiliser le mode concurrent en production, car nous ne l'avons pas dans une version stable et toujours en développement, cela peut provoquer des bogues inattendus et des changements cassants.

Suspense

Une des fonctionnalités intéressantes du mode concurrent est Suspense . Le suspense nous permet d'attendre que du code se charge et, pendant le chargement, nous pouvons afficher tout ce que nous voulons – un spinner de chargement, par exemple.

Pour récupérer des données de nos jours, nous avons une façon très courante et par défaut de le faire dans React, et c'est ainsi que de nombreuses applications fonctionnent lorsqu'elles essaient de récupérer des données à partir de leurs API: faites une demande pour récupérer des données; pendant la récupération, restituer quelque chose à l'utilisateur, quelque chose de similaire à un composant spinner de chargement. Lorsque la récupération est terminée, restituez les données à l'utilisateur.

Cette méthode courante peut rapidement devenir un problème si nous ne la faisons pas soigneusement. Beaucoup de développeurs aiment utiliser un état booléen comme isLoading pour vérifier si les données sont prêtes ou non. Pour résoudre ce problème, le mode concurrent propose Suspense.

Suspense permet à un composant de suspendre le rendu alors qu'une condition n'est pas remplie, et tant que cette condition n'est pas remplie, il peut rendre un composant de secours. Assez similaire à un état booléen isLoading mais il peut interrompre le rendu d'un composant et être plus réactif et fluide.

Use Suspense

Nous avons maintenant Suspense disponible – il est disponible depuis React 16.6 – mais comme Suspense fait partie du mode concurrent, il n'est pas recommandé de l'utiliser en production.

Mais créons un exemple pour tester le fonctionnement de Suspense Nous allons créer une nouvelle create-react-app et créez un petit exemple d'appel d'une API publique. Dans cet exemple, nous utiliserons le PokeAPI .

Nous allons créer un composant simple appelé Pokemon.js qui va recevoir un nom ] prop et affichez ce nom prop.

 import  React  from   'react' ; 
 const   Pokemon   = [19659060] ( { _name_ } )   =>   {
   return   < h4 >  { _name_ }  < /  h4 > ; 
} 
 export   default  Pokemon ; 

Maintenant, dans notre composant App.js nous allons importer le composant Pokemon.js que nous venons de créer en utilisant la fonction lazy de React.

Dans notre App.js, nous allons appeler le PokeAPI et renvoyer 50 résultats, et l'enregistrer dans notre état.

 const   [ results  setResults  ]]   =   useState  ( [] ) ; 
   useEffect  ( ()   = >   {
    axios
      .  get  ( "https://pokeapi.co/api/v2/pokemon?limit=50" ) 
      .  puis  (  _res_  =>   setResults  ( _res_ .  data .  results ) ) 
} [19659027]  [] ) 

Nous allons maintenant utiliser Suspense. Importons-le depuis React et enveloppons l'ensemble de notre composant App.js à l'aide du composant Suspense . En tant que composant de secours, nous afficherons un simple élément h1 .

 return   (
   < _Suspense_ _fallback_  =  { < h1 >  Chargement  ...  < /  h1 > } > 
   ... 
   < /  _Suspense_ > 
) ; 

Maintenant, nous allons cartographier notre état résultats et nous allons rendre chaque résultat avec notre composant Pokemon.js l'enveloppant dans un autre Suspense

 return   (
   < _Suspense_ _fallback_  =  { < h1 >  Loading  ... [19659039] < /  h1 > } > 
     { résultats .  carte  ( () { _name_ } )   =>   (
     < _Suspense_ _key_  =  { _name_ }  _fallback_  =  { < h1 >  Loading  ...  < /  h1 >  } > 
       < _Pokemon_ _name_  =  { _name_ }   / > 
     < /  _Suspense_  > 
  ) ) } 
 < /  _Suspense_ > 
) ; 

Nous avons maintenant un petit exemple de Suspense fonctionnant assez bien. Vous pouvez remarquer que pendant que nous récupérons les données, l'élément h1 est rendu, et une fois que les données sont prêtes, il rend le composant Pokemon.

Conclusion

Le mode simultané de React est un ensemble très puissant de fonctionnalités. Nous pouvons totalement voir les avantages qu'il apportera à nos applications, nous permettant d'avoir des applications plus réactives et plus fluides, en priorisant les mises à jour de rendu et en augmentant les performances de l'utilisateur.

Dans cet article, nous en avons appris davantage sur le mode concurrent dans React et les avantages que cet ensemble de fonctionnalités apportera à React. Nous avons également découvert Suspense, une fonctionnalité qui nous permet de gérer les états de chargement tout en résolvant les requêtes asynchrones.