What the heck is React Fast Refresh
· 2 mins read · React
React Fast Refresh is the successor of
React Hot Loader. It is fully supported by the React team and was initially shipped alongside React Native 0.6.1 back in 2019.
The actual plan is to make it available eventually for the whole ecosystem since the core implementation is platform-agnostic. This means that all engineers who are using
React including the ones who are developing web applications are going to take advantage of its goodies.
# So why React Fast Refresh?
The reason why, is that
React Hot Loader wasn't that perfect, so the
Development Experience wasn't great either. If you have found yourself searching in troubleshooting docs, you know what I mean 😬
Here is a statement we can find in React Hot Loader repository that summarizes this and prepares the ground for
React-Hot-Loader has been your friendly neighbour, living outside of React. But it has been limiting its powers and causing not the greatest experience. It's time to make a next step.
React Fast Refresh aims to solve all these issues and provide a far better
Development Experience with robust
Hot Module Replacement by preserving components state accurately between reloads using a smarter API.
# What does it consist of?
React Fast Refresh relies on the combination of the following technologies:
Hot module replacementbeing enabled in the bundler (Webpack etc)
This means that it cannot work with previous
React versions such as
React 15 for example.
# How it works?
Some key points:
- it will re-render a
Reactcomponent when we edit a module that exports only
- it will reload all
Reactcomponents that import a
non-Reactmodule and the module itself, when we edit it
- it will do a full reload when we edit a module outside of the
- it will continue working once we resolve a syntax or a runtime error without having to reload manually
- local state will be preserved for
Hooksout of the box
- local state won't be preserved for
You can read a thorough explanation in React Native docs if you want to go deeper.
# Create React App
CRA is using Webpack's Hot Module Replacement API to apply hot updates and fallbacks to full page reloads whenever this is not feasible. A closer look to react-dev-utils can unveil how all this mechanism works under the hood.
CRA is going to support soon
React Fast Refresh as an experimental feature though. Only thing we 'll have to do is to set explicitly an environmental variable named
Actually all that is left till it gets included officially in upcoming
CRA releases is to resolve some issues that Webpack bundler still has.
Under the hood the plugin @pmmmwh/react-refresh-webpack-plugin is used so that
React Fast Refresh can work but there is definitely some work to be done as mentioned in the repository:
First - this plugin is not 100% stable. It works pretty reliably, and we have been testing it for some time, but there are still edge cases yet to be discovered. Please DO NOT use it if you cannot afford to face breaking changes in the future.
So this is why
Fast Refresh will be considered an experimental feature for the next months and will be enabled in
CRA with the use of
# Next Steps
At the moment of this writing some changes have been already applied in
CRA docs in master branch regarding
Fast Refresh, that are not published yet:
It is getting there guys 😄 Cheers!!