How does this useState hook work in React?

Question

const App = () => {
   const [ counter, setCounter ] = useState(0)
   console.log(counter)

   return (
      <>
      <div>You clicked {counter} times.</div>
      <button onClick={ () => setCounter(counter+1) }>Click me!</button>
      </>
   )
}

Here's my react component. My question is when I run this, I see 0 two times in the console. Then when I click on the button, I see 1 two times in the console. Can anyone explain why does that happen? I was expecting 0, 1, 2 to be printed only once in the console whenever I click on the button.

Please forgive if this question has already been answered or my title of the question is not related with what I'm asking as this is my first question here.

score 1 · Accepted Answer · answered Jul 14 '20 at 16:02

It is because of React.StrictMode

If you go to your index.js , you will find that your App component is wrapped with <React.StrictMode>. If you strip off the StrictMode you will notice that your App component will render only once.

Refer the below doc to understand 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

Please refer: https://reactjs.org/docs/strict-mode.html

thank you for your answer! I now understand why I see two console logs. — Deep Parekh, Jul 15 '20 at 17:25

Kevin Li · Answer 2 · 2020-07-17T13:56:07.430

-1

return (<React.StrictMode><App /><React.StrictMode>)

This would solve your problem.

edited Jul 17 '20 at 13:56

answered Jul 14 '20 at 15:48

Kevin Li

130
5

How does this useState hook work in React?

2 Answers2