If you use react-hot-loader, now is a good time to remove it and try Fast Refresh (and its webpack plugin by @pmmmwh). RHL is extremely brittle, relies on many hacks, and has caused countless issues. It served its purpose and its time is due.
RHL was my first popular personal project. At the time, few people took it seriously. Many thought it’s a silly gimmick. I was genuinely sure that it wouldn’t catch on in the community, and that people would keep reloading their app on every JS change.
I was wrong in that, as gradually the ability to edit component code in place has become the norm and the expectation. I’ll take some credit for that. However, as React moved to ES classes and later proposals like class properties, it has become harder and harder to support.
When @sebmarkbage came up with Hooks, it took me a few weeks before I realized they solved all the problems I’ve had with my previous approaches. State being moved outside of instances, and effects expressed as destroy/create pairs means you can hot swap code with more precision.
I wrote what I learned over the years in my blog and later made a proof of concept. I spent most of 2019 rolling it out — first in React Native, then at FB, and later helping @timer150 and @pmmmwh with Next.js and webpack integrations. overreacted.io/my-wishlist-fo…
The webpack plugin is getting more mature now and it’s a good time to give it a try. Coming to CRA and other setups (ask yours!). github.com/pmmmwh/react-r…
