React 19 a introduit plusieurs nouvelles fonctionnalités et améliorations, mais certaines d’entre elles ont été accueillies avec scepticisme. Par exemple, la suppression d’une fonctionnalité liée à Suspense a entraîné des états de chargement instantanés, ce qui a provoqué un effet cascade lorsque plusieurs composants initiés par des requêtes de données se suspendent simultanément. Cette modification a été perçue par certains comme une régression qui pourrait affecter la performance et l’expérience utilisateur.React, l'un des framework d'interface utilisateur les plus populaires et les plus utilisés, alimente certains grands noms du web comme Netflix, Airbnb, Discord et bien sûr, le berceau de React, Meta (Facebook, Instagram et Whatsapp). Étant donné que React est utilisé pour créer des interfaces utilisateur qui sont utilisées par des milliards de personnes, il est raisonnable de supposer qu'une part non négligeable de tout le trafic internet est « gérée » par React.
En début d'année, la très attendue React 19 a été annoncée, mais avec toutes les nouvelles fonctionnalités brillantes et les améliorations DX, il y avait un petit changement qui est passé inaperçu jusqu'à la semaine dernière et qui pourrait potentiellement dégrader de manière significative la performance de nombreux sites web qui s'appuient sur React.
Tout a commencé par ce post sur X de Dominik, alias TkDodo, l'un des principaux mainteneurs de TanStack Query :
Est-ce que je me fais des idées ou est-ce qu'il y a une différence entre React 18 et 19 en ce qui concerne la façon dont Suspense gère le parallel fetch ? Dans 18, il y a une division "par composant", donc mettre deux composants dans la même frontière de Suspense, où chacun faisait un fetch, les lançait toujours en parallèle :
Ceci lance deux requêtes en parallèle, attend que les deux soient résolues et affiche ensuite le sous-arbre entier.
Dans React 19, pour autant que je sache, les requêtes sont maintenant exécutées en cascade. Je crois me souvenir que @rickhanlonii avait mentionné quelque chose de ce genre, mais je n'ai pas trouvé de preuve maintenant.
| Code React : | Sélectionner tout |
1 2 3 4 | <Suspense fallback={<p>...</p>}>
<RepoData name="tanstack/query" />
<RepoData name="tanstack/table" />
</Suspense> |
Ceci lance deux requêtes en parallèle, attend que les deux soient résolues et affiche ensuite le sous-arbre entier.
Dans React 19, pour autant que je sache, les requêtes sont maintenant exécutées en cascade. Je crois me souvenir que @rickhanlonii avait mentionné quelque chose de ce genre, mais je n'ai pas trouvé de preuve maintenant.
Am I imagining things or is there a difference between React 18 and 19 in terms of how Suspense handles parallel fetching? In 18, there is a "per component" split, so putting two components into the same Suspense Boundary, where each was doing a fetch, was still firing them in…
— Dominik 🔮 (@TkDodo) June 11, 2024
Pour mémoire, React Suspense est une fonctionnalité introduite dans React 16.6 qui permet de « suspendre » le rendu de l’arbre de composants jusqu’à ce qu’une certaine condition soit remplie, généralement utilisée pour gérer la récupération de données de manière déclarative. Elle améliore l’expérience utilisateur en évitant l’affichage de contenu incomplet ou vide en attendant que les données soient chargées. Suspense utilise une approche déclarative pour la gestion des opérations asynchrones comme la récupération de données ou le fractionnement de code, et permet d’afficher un contenu de repli ou des indications de chargement pendant que les données sont en cours de chargement. C’est une partie importante de la construction d’applications React plus réactives et efficaces.
Les propos de TkDodo ont entraîné des réactions comme celle d'Adam Rackis :
C'est un changement exaspérant et incompréhensible. D'après les commentaires, il _semble_ que cela s'applique aux composants clients, mais les fetches parallèles fonctionnent toujours dans RSC. Ce qui détruit react-query, la seule bonne façon de gérer les données avec React. J'espère que les esprits s'apaiseront, mais je suis sûr que ce ne sera pas le cas.
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.