Mismatch between rendered state and logged state

[sQVe]

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

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

[petetnt]

Hi @sQVe,

I'd think this is due to the asynchronous nature of React (and it's hooks) and hot module reloading in general.

Does wrapping the console.log to useEffect "fix" the issue?

export function App() {
  const [state, setState] = useState([getRandomString()]);

  useEffect(() => {
    console.log(state);
  }, state);

  return <div className="App">{state.map((x) => x)}</div>;
}

[sQVe]

@petetnt That seems to work. Ugly but it works.

I noted another issue that is sort of similar when working with setState, prevState and an interval. It is very buggy when running on the dev server.

I have the following code:

import { useEffect, useState } from 'react';

const getRandomString = () => Math.floor(Math.random() * 10).toString();

export function App() {
  const [state, setState] = useState([]);

  useEffect(() => {
    console.log('state changed to', state);
  }, [state]);

  useEffect(() => {
    const interval = setInterval(
      () =>
        setState((prevState) => {
          const newItem = getRandomString();

          if (prevState.length > 10) return prevState;
          console.log('interval state  ', [...prevState, newItem]);

          return [...prevState, newItem];
        }),
      2000,
    );

    return () => clearInterval(interval);
  }, []);

  return <div className="App">{state}</div>;
}

export default App;

The expected behaviour is that the state changed to should match the state set by the setState in the useEffect interval but it does not. See:

Note that your fix isn't working in this case 😞

[sQVe]

Maybe I should create a new issue with the case ☝🏼? 🤔

[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]

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.