The number of console.log calls in setState is incorrect

[Sylvenas]

Hello, I'm confused about how useState and setState work, for a simple example:

import React, { useState } from 'react';

const globalLog = console.log.bind(window);

function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount((c) => {
      console.log('local log');
      globalLog('global log');
      return c + 1;
    });
  }
  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={handleClick}>add</button>
    </div>
  );
}

You can use this prepared code example:https://codesandbox.io/s/goofy-sea-6evwt?file=/src/App.js

React StrictMode:

• On the first click，local log and global log print once each.
• On the second click, local log prints once, but global log prints twice.
• Third，fourth..., same as the second time

General mode:

• On the first click，local log and global log print once each.
• Second,third，fourth..., same as the second time.

And I know React uses a cycle linked-list to store the updater，and call all updaters in a loop during the update phase the source code，

So in strict mode, what does React do to the 'local' console.log and why does it only print once.

Is this a bug or a question ?

[a-c-sreedhar-reddy]

In StrictMode React rerenders the app two times (in dev mode) to detect and warn if there are side-effects while rendering.
So as long as there are no sideeffects in render,setState etc it should be fine.
https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

[Sylvenas]

@a-c-sreedhar-reddy thank you, this is a problem not a bug, this issus can be closed.

[taichiyi]

Related PRs:

Double-render function components with Hooks in DEV in StrictMode

Disable console.logs in the second render pass of DEV mode double render

[gaearon]

We've changed the logging behavior to be more intuitive in React 18.
#21783 (comment)