What is Fast Refresh?

Fast Refresh is a feature that gives you instant feedback on edits that are made to your React Components. Basically, it refreshes the webpage after you save your code editor, making it unnecessary for you to go to your browser and refresh the page to see changes.

How does Fast Refresh work?

• Editing a file that only exports React Components: Fast Refresh updates the code of that file and re-renders your component.- You can edit everything in that component.

• Editing a file with no React Components export: Fast Refresh will re-run the file you are editing and also all other files that are importing it.

• Editing a file that is imported by files outside the React Tree: Fast Refresh will have a fallback and do a full reload.

Errors

There are two types of errors that have to do with Fast Refresh:

1. Syntax Errors: Basic error, when you fix it, everything will keep working.

2. Runtime Errors: You get an overlay that will be dismissed when you fixed the error, no reload required.

Limitations

Next.js preserves the Local React State to make Fast Refresh possible. But it only preserves Local State when it is safe to do so.

Reasons Fast Refresh might not work

• Local state is not preserved for class components.

• Only function components and hooks preserve state.

• The file you are editing might have other exports in addition to a React component.

• A file can export the result of calling higher-order components like HOC(WrappedComponent).

• If the returned component is a class, the state will be reset.

• Anonymous arrow functions cause Fast Refresh to not preserve local component state.

• For large codebases, use name-default-component codemod.

Tips

• It is a default that Fast Refresh preserves React local state in function components (and hooks).

• You might want to force a state to be reset and a component to be remounted.

• You can put console.log or debugger in to the components you are editing during development.

Fast Refresh and Hooks

• Hooks that have dependencies, like useEffect will always update during Fast Refresh.

• Their list of dependencies will be ignored while the Fast Refresh is happening.