Hot Reload stopped working with React "^17.0.1"

Describe 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:)

1. I have a file with a state with this value in my Redux reducer

const initialState = [
  {
    id: Date.now(),
    task: "new todo ",
    completed: false,
  }
];

1. Modify the object in the file to this

const initialState = [
  {
    id: 1,
    task: "new todo ",
    completed: false,
  },
  {
    id:123,
    task: "new todo ",
    completed: false,
  }
];

1. 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.

[fast-reflexes]

I am not sure everyone is having the same problem.

For me, when i have nothing on .env or FAST_REFRESH=true, i will get the fast refreshes for components change, but other files changes will not reload the page, despite my console showing that it recompiled.

When i have FAST_FRESH=false, everything is hot-reloading and everything works.

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 to false in .env didn’t change anything but when I updated to react-scripts 4.0.1 setting FAST_REFRESH=false in .env brought back the hot reload.

[FezVrasta]

fast refresh is enabled by default.