Qu''est-ce que React Fiber et comment permet-il le rendu concurrent dans React ?

Question

Accepted Answer

React Fiber est l''architecture de réconciliation introduite dans React 16 qui a fondamentalement changé la façon dont React traite les mises à jour. C''est le fondement du rendu concurrent.

**Le problème avant Fiber :**

Dans les versions précédentes de React, le processus de réconciliation, c''est-à-dire la comparaison du Virtual DOM, était synchrone et ne pouvait pas être interrompu. Pour une mise à jour importante touchant de nombreux composants, React devait tout traiter d''un coup. Pendant ce temps, le thread principal était bloqué, causant des saccades et une interface non réactive.

**Comment Fiber résout ce problème :**

**Premièrement, le travail est découpé en unités.** Fiber divise le travail de rendu en petites unités appelées fibers. Chaque fiber représente un composant ou un nœud du Virtual DOM. Ce découpage permet de traiter le travail progressivement.

**Deuxièmement, le travail peut être interrompu.** Entre chaque unité de travail, React peut céder le contrôle au navigateur. Si l''utilisateur tape quelque chose ou clique, React peut mettre en pause le travail de rendu actuel pour traiter l''interaction plus urgente.

**Troisièmement, le travail peut être priorisé.** React assigne des priorités aux mises à jour. Les interactions utilisateur comme les clics ou la saisie ont une priorité élevée. Les mises à jour de données en arrière-plan ont une priorité plus basse.

**Le rendu concurrent en pratique :**

**useTransition** permet de marquer une mise à jour comme non urgente. L''interface reste réactive pendant que la transition s''effectue en arrière-plan.

**useDeferredValue** permet de différer la mise à jour d''une valeur. Utile pour les recherches où vous voulez que l''input reste réactif pendant que les résultats se calculent.

**Suspense** permet d''afficher un fallback pendant le chargement asynchrone. Avec le rendu concurrent, React peut commencer à rendre le nouveau contenu en arrière-plan tout en gardant l''ancien visible.

**Ce que cela change pour les développeurs :**

Le rendu concurrent n''est pas activé par défaut pour le code existant. Vous devez explicitement utiliser les APIs concurrentes. Le code legacy continue de fonctionner en mode synchrone. Évitez les effets de bord dans le rendu car un composant peut être rendu puis abandonné.