Setup react fast refresh config & remove react-hot-loader

[charrondev]

What is fast refresh?

It's essentially a successor to react-hot-loader but with first class support in react. https://facebook.github.io/react-native/docs/fast-refresh

A few notable improvements:

• Automatically detect roots. Previously if code was not explicitly wrapped in hot() it couldn't be hot reloaded. On top of that, if code changed from something that was not hot reloadable everywhere (eg. updated some core component, and not everything that uses it is reloaded), then a full page refresh would occur. This no longer happens. It will try and hot reload everything (much better detection) and if something isn't reloadable you will need to refresh manually.
• Better at preserving state (especially with hooks).
• Better at recovering from errors. If you have some error you will no longer necessarily need to refresh to get the benefit.

Testing

• These changes only apply to development builds. The babel plugin & webpack plugin only apply in yarn build:dev.
• Checkout branch.
• Run yarn install
• Restart/start dev build.
• Load some page and change some components. You should see the page instantly refresh.

The Repo

I've forked off of https://github.com/pmmmwh/react-refresh-webpack-plugin. The webpack integration may still be a ways off from getting a public implementation which is why I forked it.

Since we apply it only ever in dev mode and it represents such a massive improvement in development experience, I think we should proceed with it even before finalization & official react-refresh branding.

Even if the implementation changes 100% we don't have anything that ever relies on it's behaviour.

See it actually working

[tburry]

Now this looks pretty cool. 🚶