Fast Refresh

Fast Refresh ist eine in Next.js integrierte React-Funktion, die das Live-Reloading der Browserseite ermöglicht, während der temporäre clientseitige Zustand bei Dateiänderungen erhalten bleibt. Diese Funktion ist standardmäßig in allen Next.js-Anwendungen ab Version 9.4 oder höher aktiviert. Mit Fast Refresh sind die meisten Änderungen innerhalb einer Sekunde sichtbar.

Funktionsweise

Wenn Sie eine Datei bearbeiten, die nur React-Komponenten exportiert, aktualisiert Fast Refresh nur den Code dieser Datei und rendert die Komponente neu. Sie können alles in dieser Datei bearbeiten, einschließlich Stile, Render-Logik, Event-Handler oder Effekte.
Wenn Sie eine Datei mit Exporten bearbeiten, die keine React-Komponenten sind, führt Fast Refresh sowohl diese Datei als auch die Dateien, die sie importieren, erneut aus. Wenn also sowohl Button.js als auch Modal.js theme.js importieren, werden durch die Bearbeitung von theme.js beide Komponenten aktualisiert.
Falls Sie eine Datei bearbeiten, die von Dateien außerhalb des React-Baums importiert wird, führt Fast Refresh ein vollständiges Neuladen durch. Möglicherweise haben Sie eine Datei, die eine React-Komponente rendert, aber auch einen Wert exportiert, der von einer nicht-React-Komponente importiert wird. Beispielsweise könnte Ihre Komponente auch eine Konstante exportieren, die von einer nicht-React-Hilfsdatei importiert wird. In diesem Fall sollten Sie erwägen, die Konstante in eine separate Datei auszulagern und sie in beide Dateien zu importieren. Dadurch wird Fast Refresh wieder aktiviert. Andere Fälle können meist ähnlich gelöst werden.

Fehlertoleranz

Syntaxfehler

Wenn Sie während der Entwicklung einen Syntaxfehler machen, können Sie ihn beheben und die Datei erneut speichern. Der Fehler verschwindet automatisch, sodass Sie die App nicht neu laden müssen. Der Komponentenzustand geht nicht verloren.

Laufzeitfehler

Wenn Sie einen Fehler machen, der zu einem Laufzeitfehler in Ihrer Komponente führt, erscheint ein kontextuelles Overlay. Die Behebung des Fehlers schließt das Overlay automatisch, ohne die App neu zu laden.

Der Komponentenzustand bleibt erhalten, wenn der Fehler nicht während des Renderings aufgetreten ist. Wenn der Fehler während des Renderings auftrat, wird React Ihre Anwendung mit dem aktualisierten Code neu mounten.

Wenn Sie Error Boundaries in Ihrer App haben (was für eine elegante Fehlerbehandlung in der Produktion empfehlenswert ist), versuchen sie beim nächsten Bearbeiten nach einem Renderfehler erneut zu rendern. Das bedeutet, dass eine Error Boundary verhindern kann, dass Sie immer auf den Root-App-Zustand zurückgesetzt werden. Allerdings sollten Error Boundaries nicht zu granular sein. Sie werden von React in der Produktion verwendet und sollten bewusst gestaltet werden.

Einschränkungen

Fast Refresh versucht, den lokalen React-Zustand in der bearbeiteten Komponente zu erhalten, aber nur wenn dies sicher ist. Hier sind einige Gründe, warum der lokale Zustand bei jeder Dateiänderung zurückgesetzt werden könnte:

Der lokale Zustand wird bei Klassenkomponenten nicht erhalten (nur Funktionskomponenten und Hooks behalten den Zustand).
Die bearbeitete Datei könnte neben einer React-Komponente andere Exporte enthalten.
Manchmal exportiert eine Datei das Ergebnis eines Higher-Order Components wie HOC(WrappedComponent). Wenn die zurückgegebene Komponente eine Klasse ist, wird ihr Zustand zurückgesetzt.
Anonyme Pfeilfunktionen wie export default () => <div />; führen dazu, dass Fast Refresh den lokalen Komponentenzustand nicht erhält. Für größere Codebasen können Sie unseren name-default-component-Codemod verwenden.

Je mehr Ihr Codebase auf Funktionskomponenten und Hooks umstellt, desto häufiger wird der Zustand erhalten bleiben.

Tipps

Fast Refresh erhält standardmäßig den lokalen React-Zustand in Funktionskomponenten (und Hooks).
Manchmal möchten Sie den Zustand erzwingen, zurückgesetzt zu werden und eine Komponente neu zu mounten. Dies kann beispielsweise nützlich sein, wenn Sie eine Animation anpassen, die nur beim Mounten auftritt. Dazu können Sie // @refresh reset an einer beliebigen Stelle in der bearbeiteten Datei hinzufügen. Diese Anweisung ist dateilokal und weist Fast Refresh an, die Komponenten in dieser Datei bei jeder Änderung neu zu mounten.
Sie können console.log oder debugger; in die Komponenten einfügen, die Sie während der Entwicklung bearbeiten.
Denken Sie daran, dass Importe case-sensitiv sind. Sowohl Fast als auch Full Refresh können fehlschlagen, wenn Ihr Import nicht mit dem tatsächlichen Dateinamen übereinstimmt. Beispiel: './header' vs. './Header'.

Fast Refresh und Hooks

Wenn möglich, versucht Fast Refresh, den Zustand Ihrer Komponente zwischen Bearbeitungen zu erhalten. Insbesondere behalten useState und useRef ihre vorherigen Werte, solange Sie ihre Argumente oder die Reihenfolge der Hook-Aufrufe nicht ändern.

Hooks mit Abhängigkeiten – wie useEffect, useMemo und useCallback – werden immer während Fast Refresh aktualisiert. Ihre Abhängigkeitsliste wird während Fast Refresh ignoriert.

Wenn Sie beispielsweise useMemo(() => x * 2, [x]) in useMemo(() => x * 10, [x]) ändern, wird es erneut ausgeführt, obwohl sich x (die Abhängigkeit) nicht geändert hat. Wenn React das nicht tun würde, würde Ihre Änderung nicht auf dem Bildschirm erscheinen!

Manchmal kann dies zu unerwarteten Ergebnissen führen. Beispielsweise würde selbst ein useEffect mit einem leeren Abhängigkeitsarray während Fast Refresh einmal neu ausgeführt werden.

Allerdings ist das Schreiben von Code, der gelegentliches erneutes Ausführen von useEffect toleriert, auch ohne Fast Refresh eine gute Praxis. Es erleichtert Ihnen das spätere Hinzufügen neuer Abhängigkeiten und wird durch den React Strict Mode erzwungen, den wir dringend empfehlen zu aktivieren.