︙

Fast Refresh

Fast Refresh は、あなたの React コンポーネントに対する編集のフィードバックを瞬時に提供する Next.js の機能です。Fast Refresh は、9.4 以上の versionで動作するすべての Next.js アプリケーションで、 default で有効になっています。 Next.js の Fast Refresh が有効になっている場合、ほとんどの編集内容は second に表示され、component の状態を失うことなく更新されます。

How It Works

もしReact コンポーネントのみをエクスポートするファイルを編集した場合、Fast Refresh はそのファイルのみの code を更新し、 component を再レンダリングします。そのファイル内の styles 、レンダリングロジック、イベントハンドラ、エフェクトなど、何でも編集できます。
React コンポーネントでない exports を持つファイルを編集すると、Fast Refresh はそのファイルとそれをインポートする他のファイルの両方を再実行します。したがって、Button.jsとModal.jsの両方が theme.jsを import する場合、theme.jsの編集により両方のコンポーネントが更新されます。
最後に、ファイルを編集する際に React ツリーの外部からインポートされるファイルである場合、Fast Refresh は完全なリロードを行うように切り替わります。例えば、React component を rendering するファイルがあり、そのファイルが value をエクスポートし、それが非 React component にインポートされている場合があります。たとえば、 component が定数をエクスポートし、非 React のユーティリティファイルがそれをインポートしている場合です。その場合、その定数を別のファイルに移行し、両方のファイルにインポートすることを検討してみてください。これにより、Fast Refresh が再び機能するようになります。他のケースも通常、同様の方法で解決できます。

Error Resilience

Syntax error

development 中に syntax error (構文 app )を起こしても、修正してファイルを再度保存すれば大丈夫です。 error は自動的に消えるので、アプリを再読み込みする必要はありません。component の状態は失われません。

Runtime error

あなたがミスを犯し、その結果として component 内に runtime error が発生した場合、コンテキストに基づいたオーバーレイが表示されます。 error を修正すると、 app を再読み込みすることなくオーバーレイは自動的に消えます。

Component の状態は、レンダリング中に error が発生しなかった場合に保持されます。もしレンダリング中に error が発生した場合、 React は更新された code を使用してアプリケーションを再マウントします。

あなたの app にerror boundaries がある場合(これは production での優雅な失敗にとって良い考えです)、それらはレンダリングの error の後に next の編集でレンダリングを再試行します。これは、 error boundary が常に root app の状態にリセットされるのを防ぐことができます。ただし、 error boundaries は過度に詳細になってはなりません。それらは React によって production で使用され、常に意図的に設計されるべきです。

Limitations

Fast Refresh は、編集中の component のローカル React ステートを保持しようとしますが、それが安全な場合に限ります。次に、ファイルの各編集でローカルステートがリセットされる可能性のあるいくつかの理由を示します:

ローカルステートはクラスコンポーネントに対して保存されません(ステートを保存するのは関数コンポーネントと Hooks のみです)。
編集中のファイルには、 React component に加えて、他のエクスポートも含まれているかもしれません。
時折、ファイルは HOC(WrappedComponent) のような高次の component を呼び出した結果を export することがあります。返された component がクラスである場合、その状態はリセットされます。
export default () => <div />;のような匿名のアロー関数は、Fast Refresh がローカルの component ステートを保存しない原因となります。大規模なコードベースに対しては、name-default-component codemodを使用することができます。

あなたのコードベースのより多くが関数コンポーネントと Hooks に移行するにつれて、より多くのケースで状態が保持されることを期待できます。

Tips

高速な Refresh は、関数コンポーネント(および Hooks)での React のローカル状態を default で保持します.
ときどき、状態を強制的にリセットし、 component を再マウントしたいかもしれません。たとえば、マウント時にのみ発生するアニメーションを微調整している場合に便利です。これを行うには、編集中のファイルの任意の位置に// @refresh resetを追加できます。このディレクティブはファイルにローカルであり、そのファイルで定義されたコンポーネントを Fast Refresh がすべての編集ごとに再マウントするように指示します。
development 中に編集する components には、console.logやdebugger;を入れることができます。
インポートは大文字と小文字を区別することを覚えておいてください。 refresh が速いものも完全なものも、 import が実際のファイル名と一致しない場合には失敗することがあります。たとえば、 './Header'対'./header'のようにです。

Fast Refresh and Hooks

可能な場合、Fast Refresh は編集の間に component の状態を保持しようとします。特に、useStateとuseRefは、その引数や、 Hook の呼び出し順序を変更しない限り、前回の値を保持します。

依存関係を持つフック - 例えばuseEffect、useMemo、useCallbackなど - は、Fast Refresh 中に常に更新されます。Fast Refresh が行われている間は、その依存関係リストは無視されます。

たとえば、useMemo(() => x * 2, [x])をuseMemo(() => x * 10, [x])に編集すると、x(依存性)が変更されていないにも関わらず再実行されます。もし React がそれを行わなければ、あなたの編集は画面に反映されません！

これは時々、予期しない結果をもたらすことがあります。例えば、依存性の配列が empty のuseEffectでも、Fast Refresh 中に一度再実行されます。

しかし、 useEffectのたまに再実行されることに耐える code を書くことは、Fast Refresh がなくても良い習慣です。これにより、後で新しい依存関係を導入しやすくなり、React Strict Modeで強制されることがあります。私たちはこれを有効にすることを強くお勧めします。