Switch from HMR to Fast Refresh

Description

The react team has been working on a new solution for hot-reloading called Fast Refresh.

Its main advantage is that it works very reliably (unlike the current hacky hot-module-replacement).

It is already available for React Native and they are working on integrating it into Create React App

Once it’s stable enough, we should integrate it into Frontity and remove the current HMR solution.

User Stories

As a Frontity user
I want to Reliably update the page for each code change without doing a full reload
so that My workflow is more efficient

As a Frontity user
I want to preserve my internal component state when I edit my code
so that I can see my changes in context

Examples

There is already a webpack plugin: https://github.com/pmmmwh/react-refresh-webpack-plugin

The plugin has been merged into CRA: https://github.com/facebook/create-react-app/pull/8582 so we can expect it in a future CRA version

Discussion on Facebook/react repo: https://github.com/facebook/react/issues/16604

Thanks @mmczaplinski.

Could you please add the relevant user stories? You can get the template from the canned replies.

Thanks @mmczaplinski.


For context, this refers to React internal state, not to Frontity state, which is already preserved between re-renders.

const Comp = ({ state }) => {
  // This is preserved today.
  const frontityState = state.some.part.of.the.state;
  // This is not.
  const [internalState] = React.useState(0);

  return (
    // ...
  );
}