Fast Refresh

Fast Refresh est une fonctionnalité de React intégrée à Next.js qui permet de recharger la page du navigateur tout en conservant l'état temporaire côté client lorsque vous enregistrez les modifications d'un fichier. Elle est activée par défaut dans toutes les applications Next.js version 9.4 ou supérieure. Avec Fast Refresh activé, la plupart des modifications devraient être visibles en moins d'une seconde.

Fonctionnement

Si vous modifiez un fichier qui exporte uniquement un ou plusieurs composants React, Fast Refresh mettra à jour uniquement le code de ce fichier et re-rendra votre composant. Vous pouvez modifier tout dans ce fichier, y compris les styles, la logique de rendu, les gestionnaires d'événements ou les effets.
Si vous modifiez un fichier avec des exports qui ne sont pas des composants React, Fast Refresh exécutera à nouveau ce fichier ainsi que les autres fichiers qui l'importent. Par exemple, si Button.js et Modal.js importent theme.js, la modification de theme.js mettra à jour les deux composants.
Enfin, si vous modifiez un fichier qui est importé par des fichiers en dehors de l'arborescence React, Fast Refresh effectuera un rechargement complet. Vous pourriez avoir un fichier qui rend un composant React mais exporte également une valeur importée par un composant non-React. Par exemple, votre composant pourrait exporter une constante, et un fichier utilitaire non-React l'importer. Dans ce cas, envisagez de déplacer la constante dans un fichier séparé et de l'importer dans les deux fichiers. Cela permettra à Fast Refresh de fonctionner à nouveau. D'autres cas peuvent généralement être résolus de manière similaire.

Résilience aux erreurs

Erreurs de syntaxe

Si vous faites une erreur de syntaxe pendant le développement, vous pouvez la corriger et enregistrer à nouveau le fichier. L'erreur disparaîtra automatiquement, vous n'aurez donc pas besoin de recharger l'application. Vous ne perdrez pas l'état du composant.

Erreurs d'exécution

Si vous faites une erreur qui entraîne une erreur d'exécution dans votre composant, vous verrez un overlay contextuel. Corriger l'erreur fera disparaître automatiquement l'overlay sans recharger l'application.

L'état du composant sera conservé si l'erreur ne s'est pas produite pendant le rendu. Si l'erreur s'est produite pendant le rendu, React remontera votre application avec le code mis à jour.

Si vous avez des périmètres d'erreur (error boundaries) dans votre application (ce qui est une bonne pratique pour des échecs gracieux en production), ils réessayeront le rendu lors de la prochaine modification après une erreur de rendu. Cela signifie qu'avoir un périmètre d'erreur peut vous éviter de revenir systématiquement à l'état racine de l'application. Cependant, gardez à l'esprit que les périmètres d'erreur ne doivent pas être trop granulaires. Ils sont utilisés par React en production et doivent toujours être conçus intentionnellement.

Limitations

Fast Refresh tente de préserver l'état local React dans le composant que vous modifiez, mais seulement si cela est sûr. Voici quelques raisons pour lesquelles vous pourriez voir l'état local réinitialisé à chaque modification d'un fichier :

L'état local n'est pas préservé pour les composants classe (seuls les composants fonction et les Hooks préservent l'état).
Le fichier que vous modifiez pourrait avoir d'autres exports en plus d'un composant React.
Parfois, un fichier exporterait le résultat de l'appel à un composant d'ordre supérieur comme HOC(WrappedComponent). Si le composant retourné est une classe, son état sera réinitialisé.
Les fonctions fléchées anonymes comme export default () => <div />; empêchent Fast Refresh de préserver l'état local du composant. Pour les grandes bases de code, vous pouvez utiliser notre codemod name-default-component.

Plus votre base de code utilise des composants fonction et des Hooks, plus vous pouvez vous attendre à ce que l'état soit préservé dans davantage de cas.

Conseils

Fast Refresh préserve par défaut l'état local React dans les composants fonction (et les Hooks).
Parfois, vous pourriez vouloir forcer la réinitialisation de l'état et le remontage d'un composant. Par exemple, cela peut être utile si vous ajustez une animation qui ne se produit qu'au montage. Pour ce faire, vous pouvez ajouter // @refresh reset n'importe où dans le fichier que vous modifiez. Cette directive est locale au fichier et indique à Fast Refresh de remonter les composants définis dans ce fichier à chaque modification.
Vous pouvez mettre console.log ou debugger; dans les composants que vous modifiez pendant le développement.
N'oubliez pas que les imports sont sensibles à la casse. Le rechargement rapide ou complet peut échouer si votre import ne correspond pas au nom réel du fichier. Par exemple, './header' vs './Header'.

Fast Refresh et Hooks

Lorsque possible, Fast Refresh tente de préserver l'état de votre composant entre les modifications. En particulier, useState et useRef conservent leurs valeurs précédentes tant que vous ne modifiez pas leurs arguments ou l'ordre des appels de Hook.

Les Hooks avec dépendances—comme useEffect, useMemo, et useCallback—seront toujours mis à jour pendant Fast Refresh. Leur liste de dépendances sera ignorée pendant que Fast Refresh est actif.

Par exemple, lorsque vous modifiez useMemo(() => x * 2, [x]) en useMemo(() => x * 10, [x]), il sera réexécuté même si x (la dépendance) n'a pas changé. Si React ne faisait pas cela, votre modification ne serait pas reflétée à l'écran !

Parfois, cela peut conduire à des résultats inattendus. Par exemple, même un useEffect avec un tableau de dépendances vide serait tout de même réexécuté une fois pendant Fast Refresh.

Cependant, écrire du code résistant à une réexécution occasionnelle de useEffect est une bonne pratique même sans Fast Refresh. Cela facilitera l'ajout de nouvelles dépendances plus tard et c'est imposé par le Mode Strict de React, que nous recommandons fortement d'activer.