Switch from HMR to Fast Refresh

[mmczaplinski]

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

[luisherranz]

Thanks @mmczaplinski.

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

[luisherranz]

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 (
    // ...
  );
}

[mmczaplinski]

create-react-app v4.0 (currently in alpha) is shipping with support for Fast Refresh via the webpack plugin mentioned earlier: https://github.com/pmmmwh/react-refresh-webpack-plugin

Although the webpack plugin itself is still “experimental” (according to the author himself).

[furrysmile2]

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

How to do this now?

[mmczaplinski]

Currently there is no way to implement this in userland, unfortunately.

We are working on adding support for extending the webpack configuration (no ETA as of right now) so that users could add custom webpack plugins and be able to add features like this to their own setup.