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