React 17. FastRefresh, not HotReload.

4 Aug, 2021

2 Mins Read

A must upgrade version of React is React 17. I was surprised by the things it brings to the equation.

I was working on a project which is old. Not so old but kind of not recent also. And we just pushed our production application to live environment.

At that point I have some time to update the project. So I did. The first upgrade I thought should be the React library itself. This project was made with create-react-app and not exited the flow. I was a little worried as to whether to update it or not. Because in past I have maintained a React project for some years and knew the pain of upgrading. And this time the project is on create-react-app. However I took the chance and did upgrade the react-script and other libraries used in the project manually using yarn. After all this I was hoping things will break and complain about missing dependencies and all that.

I just run the development build command and done. The project ran as it should. However when source code changed, nothing really happened in the UI. As previously any change will re-render the page. Now nothing happened!

I thought I broke something, somewhere. Then searched for it and found FastRefresh in React17. I went back to code and did some changes and this time instead of waiting for the page to re-render, I checked for the changes in that page. And there it is. The changes were there without re-rendering the whole page.

This is huge in terms of developer experience and productivity.

If you are running a project which is not so old. Atleast using hooks and functional components then just try and upgrade to React 17.

Below are some more interesting reads about Fast-Refresh in React 17.

Happy Coding.