What the heck is React Fast Refresh

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 Fast Refresh:

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:

• React renderer 16.9.0+
• react-refresh/runtime entrypoint
• react-refresh/babel Babel plugin
• Hot module replacement being 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 React component when we edit a module that exports only React components
• it will reload all React components that import a non-React module and the module itself, when we edit it
• it will do a full reload when we edit a module outside of the React tree
• it will continue working once we resolve a syntax or a runtime error without having to reload manually
• local state will be preserved for function components and Hooks out of the box
• local state won't be preserved for class components

You can read a thorough explanation in React Native docs if you want to go deeper.

# Create React App

Right now, 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 FAST_REFRESH in .env file:

FAST_REFRESH=true

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 FAST_REFRESH.

# 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!!