useState() do double render

Question

I'm using useState() in function component and first render is calling twice. Is it correct or mistake? If it is correct why does it render twice? setCount renders the component twice too.

function Example() {
  const [count, setCount] = useState(0);
  console.log("render");

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('uu5'));

Thanks

I see the render being called only once. IT may depend on some other portion of your app. https://codesandbox.io/s/zkmqv84krx — Shubham Khatri, Feb 28 '19 at 14:32

score 15 · Accepted Answer · answered May 12 '20 at 22:32

According to react docs, it's an intentional feature to help you to detect unexpected side effects if you're using StrictMode

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methods

Class component static getDerivedStateFromProps method

Function component bodies

State updater functions (the first argument to setState)

Functions passed to useState, useMemo, or useReducer

Note: This only applies to development mode. Lifecycles will not be double-invoked in production mode.

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

score 2 · Answer 2 · answered Mar 04 '19 at 06:43

2

Problem is in React DevTools. When console is closed, component is rendered just one times. But if you open React DevTools and reload the page, render will be shown two times. Open example and try it. (React 16.8.3)

answered Mar 04 '19 at 06:43

Ondřej Čapek

123
1
6

You saved me a ton of head scratching. Thank you! – Stiggler Aug 04 '19 at 04:31
Is this still a problem? I have the same issue. – Norbert Apr 29 '20 at 18:09
been here, asked myself the same. – Paulquappe Dec 22 '21 at 19:08

score 1 · Answer 3 · answered Oct 09 '20 at 16:01

1

remove <React.StrictMode> wrapper in the index.js file

answered Oct 09 '20 at 16:01

Стас Рябцев

1,318
4
19
36

useState() do double render

3 Answers3

Linked