Hot Reload stopped working with React "^17.0.1"
See original GitHub issueDescribe the bug
Hot reloading when the redux-state change stopped working when I use CRA to get the last React version. Noticed that it is due to React version and I made a test creating a new react project, as a result the package.json shows
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.1",
"react-scripts": "4.0.0",
"redux": "^4.0.5",
"web-vitals": "^0.2.4"
},
then change it to a previous version of react (copied from an old project)
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-scripts": "3.4.3",
"redux": "^4.0.5"
},
And it continue to works as always.
Did you try recovering your dependencies?
yes
Environment
current version of create-react-app: 4.0.0 running from C:\Users\stewa\AppData\Roaming\npm\node_modules\create-react-app
System:
OS: Windows 10 10.0.19041
Binaries:
Node: 12.9.1 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 86.0.4240.111
Edge: Spartan (44.19041.423.0), Chromium (86.0.622.51)
Internet Explorer: 11.0.19041.1
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.0 => 4.0.0
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
(Write your steps here:)
- I have a file with a state with this value in my Redux reducer
const initialState = [
{
id: Date.now(),
task: "new todo ",
completed: false,
}
];
- Modify the object in the file to this
const initialState = [
{
id: 1,
task: "new todo ",
completed: false,
},
{
id:123,
task: "new todo ",
completed: false,
}
];
- As previous versions of React / CRA the page force a reload, displaying in the page the new object added, but it’s not anymore
Expected behavior
Even if you change the text of one of the objects in the reducer it used to reload the page. I’m expecting to see the new state in the page as I save a file when the state change
Actual behavior
Here you can see I saved the file and the page is not showing the new state, and the new data.
Reproducible demo
https://github.com/StewartGF/todo-test
I created this clean project with CRA, it has react v17
You can change the version in the package.json to what I paste in the description and use npm install
in order to see the project working as it was working in previous versions.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:96
- Comments:115 (3 by maintainers)
Worked! With React 17.0.1 and react-scripts 4.0.0 and with
FAST_REFRESH=true
(default) changes to components are reflected seemlessly, but changes to other dependencies are not reflected in the UI at all without manual refresh, despite obvious recompilation in the console. Setting the flag tofalse
in.env
didn’t change anything but when I updated toreact-scripts 4.0.1
settingFAST_REFRESH=false
in.env
brought back the hot reload.fast refresh is enabled by default.