Add experimental react-refresh support by charrondev · Pull Request #8582 · face...

Issue pmmmwh/react-refresh-webpack-plugin#7Since react-refresh was released, I've been really excited to use it as a replacement for react-hot-loader & others.@pmmmmwh/react-refresh-webpack-plugin is the farthest along webpack plugin right now. You can see it's progress over time here pmmmwh/react-refresh-webpack-plugin#1Now as you might see as of Feb 28th 2020, not all of that issue is complete, however the remaining pieces don't really seem relevant as CRA doesn't really need advanced configuration options. If the maintainers here determine that those would be blockers to adoption in CRA, then maybe this PR will help get some additional eyes on the project.ChangesBring in the @pmmmmwh/react-refresh-webpack-plugin & react-refresh.Create a new version of the webpack entry. I removed everything involving the error/warning overlay. (the webpack plugin provides it's own that looks a lot more like the react native one used for fast refresh).Open QuestionsSince the error overlay isn't being used here anymore should it be removed, or should it be kept around for some time? In any case I didn't do it because there may be other complications involved in that.I tried just replacing the react-dev-utils webpack entry with one of the built in ones, but then the refresh didn't work anymore. It may be nice for that not to be necessary anymore in the future, but I don't think it necessarily has to be the work of this PR.I removed the console logging and errors from the dev entry. Should that be left alone? Currently that other entry provides an overlay but doesn't seem to do any console logging. Maybe it would be best handled over in that plugin at this point in time? I'm open to any changes here.Testing instructionsClone the repo & checkout this branch.Spin up a local CRA from this branch. yarn create-react-app test-react-refreshcd test-react-refreshyarn startAfter some feedback, I've put this behind a ENV variable right now to enable, so add the following file to the root of your created project..env# Enable React RefreshFAST_REFRESH=trueHot Reloading Hooks & State preservationHook state preservation is one the main improvements out of react-refresh vs it's predecessors, so the following should be a quick way to validate that it works.Open App.jsReplace it's contents with the following:import React, { useState } from 'react';import logo from './logo.svg';import './App.css';function App() { const [inputValue, setInputValue] = useState("initial"); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <input style={{ fontSize: 40 }} value={inputValue} onChange={e => setInputValue(e.target.value)} /> <button type="button" onClick={() => { throw new Error("runtime error"); }}>Throw Runtime error</button> <p> Edit <code>src/App.js</code> and save to reloadasdf. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> );}export default App;Open the page and see the input.Type some value into the input.Go back to source code and change some other value.See the updated value, and the hook state preserved.Create a syntax error in App.jsSee the syntax error appear in the page.Fix the syntax error.See the page go back to normal. The hook/input value should still be preserved.Gifs make everything better.