If you know what fast refresh is, this is for you, otherwise keep scrolling
INTRODUCTION
For those who do not know what is fast refresh (and not, its not the gaterodade shower 🫠) or its former version hot-reload are in development environments, let put you in some context. Let’s say you are working in some website development project, in particular using React (probably set up with Create React App, NextJS, Remix, Vite, you know what I mean), and every time you make some changes in any javascript or css file you are able to see those changes without refreshing the navigator nor loosing the state of the app automatically, without manually refreshing the app.
Welcome to this amazing developer experience.
BACKGROUND
The other day I was just scrolling down Kent C Dodds YouTube Channel and I found this interview with Dan Abramov about several React issues, in particular hot-reload from 7 years ago:
In short (the video lasts almost an hour), in minute 8:30 Kent asks about React Hot Loader, which by that time was one of the first projects of Dan Abramov and he defined as:
the idea of hot module replacement is that you edit some code, you press save and instead of reloading your whole application is going to replace just specific JavaScript Modules
In response to that Kent reasonably points out the huge frustration produces refresh cycle and specially when you are working on has a lot of state involved, routes or as he says “click here, go here and fill out this form and then click this thing”.
In this regard Kent explains how in only 20 minutes implemented hot loader in a experimental react project setup with Webpack hot module API and “how super amazing it was”.
NEW ERA. FAST REFRESH
During summer 2020, Dan Abramov twitted:
Fast refresh is the last iteration of react hot loader. It was implemented in the v.4.0.0 of CRA (Create React App command line) and following versions, in NextJS, Remix, and even React Native has its mobile development of fast refresh.
In general terms fast refresh does the same as the hot loader module but it is faster and more reliable specially in applications with complex local and global states and in particularly supports css-in-js, which I found really amazing.
IMPLEMENTATION WITH WEBPACK
Disclaimer:
As the Fast Refresh Readme exposes this package still is EXPERIMENTAL and may not handle unknown edge cases. Despite of this I have yet not had any issue at the time of writing this article and it does not affect to production environments.
- If you are setting up a project with CRA, NextJs, Remix, comes by default in latest versions.
- React Native projects for mobile app development also includes fast-refresh.
- If you rather prefer configure your react project from scratch I prepared a boilerplate template with Webpack 5 in this GitHub repository https://github.com/imjorgemor/fast-refresh-template following the recommendations of the Official Fast-Refresh documentation and my favourite Webpack presets and linters both for a javascript and typescript project.
- UPDATE: If you are looking for a more comprehensive configuration with sass, routers, postcss, tailwind, I totally recommend this article: https://medium.com/@brandonwie/the-complete-guide-for-setting-up-custom-react-ts-application-c33c36f92666
PERSONAL OPINION
As I am pro of developer experience first, fast refresh or formerly hot reload is the new standard of development. Any frontend technology that does not support it is time consuming and usually frustrates the developer behind the projects (been there). Within my recent experience, implementing fast-refresh with access to the backend API calls, without mutating local state and global states it reduced significantly the time in developing new or maintain product features which in turn ends with a happy Product Owner.
Oh boy, as I always say, there is nothing better than a good developing experience with a happy PO.
🙏 Thanks for reading and please support this content by commenting, sharing or smashing the clap button.
