Mismatch between rendered state and logged state

Describe the bug

👋🏼

I noted today that I was getting mismatches between the logged state and the rendered state in a very simple react application. I’m probably missing something but I’m at my wits end.

This is only an issue when running the development server. Running the built application does not have this issue.

Did you try recovering your dependencies?

1.22.11

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /home/sqve/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: Linux 5.13 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 14.17.6 - ~/.local/share/nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.11 - ~/.local/share/nvm/versions/node/v14.17.6/bin/yarn
    npm: 7.22.0 - ~/.local/share/nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 4.0.3 => 4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Run npx create-react-app state-mismatch.
2. Change the default App into:

import { useState } from "react";
​
const getRandomString = () => Math.round(Math.random()).toString();
​
export  function App() {
  const [state, setState] = useState([getRandomString()]);
​
  console.log(state);
​
  return <div className="App">{state.map((x) => x)}</div>;
}
​
export default App

1. Run yarn run start and refresh until there is a mismatch.

Expected behavior

The state should always be the same.

Actual behavior

There’s a mismatch between what the console outputs and what is rendered.

[implicitdef]

Hi, I just ran into this problem and found the culprit. I’ll explain because it took me a while. It’s <React.StrictMode>, that create-react-app is probably using under the hood in development mode.

As explained here https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects, StrictMode runs the rendering twice. That’s why you get two different random values. StrictMode also swallows the logs from one of the two renders 😕 that’s why one of the random values is not logged in the console.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.