Fast Refresh

Exemples

Démonstration de Fast Refresh

Fast Refresh est une fonctionnalité de Next.js qui fournit un retour instantané sur les modifications apportées à vos composants React. Fast Refresh est activé par défaut dans toutes les applications Next.js à partir de la version 9.4 ou ultérieure. Avec Fast Refresh activé dans Next.js, la plupart des modifications devraient être visibles en moins d'une seconde, sans perte de l'état du composant.

Fonctionnement

Si vous modifiez un fichier qui exporte uniquement des 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 réexécutera 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 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 être réinitialisé à chaque modification d'un fichier :

L'état local n'est pas préservé pour les composants à base de classes (seuls les composants fonctionnels 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 d'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 grands codebases, vous pouvez utiliser notre codemod name-default-component.

À mesure que votre codebase migre vers des composants fonctionnels et des Hooks, vous pouvez vous attendre à ce que l'état soit préservé dans plus de cas.

Conseils

Fast Refresh préserve par défaut l'état local React dans les composants fonctionnels (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 des 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 et 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. Leurs listes de dépendances seront ignorées 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 réexécuté une fois pendant Fast Refresh.

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