15

I have a functional component called (First)

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

    console.log("component first rendering") // this logging is happening twice


    return (
        <div>
            first component
        </div>
    )
}

when i initially run the application the console statement is logging twice why is it, It should have been logged only once, because i haven't explicitily updated the state.

Sahith Kurapati
  • 1,617
  • 10
  • 14
user8989
  • 580
  • 2
  • 6
  • 21

2 Answers2

32

I've tried this out in code sandbox and sure enough, it did render twice. This is because, in the index.js file, it uses React.StrictMode.

According to this documentation:

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

  • Functions passed to useState, useMemo, or useReducer

This is usually to help spot side effects only in the development environment. It does not apply to a production environment.

So if you don't want it to render twice, simply remove the <React.StrictMode> </ React.StrictMode> in the index.js file and it'll work normally.

Hope it helps :)

isherwood
  • 58,414
  • 16
  • 114
  • 157
Sahith Kurapati
  • 1,617
  • 10
  • 14
  • If i remove the useState it renders only once, is there something with useState hook – user8989 Jun 11 '20 at 12:33
  • No there is nothing wrong with `useState()`. It is just that in a development environment, when you use `React.StrictMode`, it always calls useState twice. I've shown an example of the code in the sandbox. Just remove `React.StrictMode` in the index.js file and it will be called only once. – Sahith Kurapati Jun 11 '20 at 12:37
  • You are saying that it calls useState twice in React.StrictMode, but what does calling useState twice has to do with rendering of component again – user8989 Jun 11 '20 at 12:46
  • It not only calls `useState` but also renders the whole component twice. – Sahith Kurapati Jun 11 '20 at 12:51
  • 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: I can't understand what this line means which sideEffects does it mean, could you please explain, – user8989 Jun 11 '20 at 12:57
  • In simple terms, it means that when you are in strict mode, it always calls the functions twice and also renders the component twice. – Sahith Kurapati Jun 11 '20 at 12:59
  • @SahithKurapati How do u resolve the twice rendering with strictMode on because i can see the advantages of it? – kailash yogeshwar Apr 28 '21 at 14:50
13

This is happening because your App is wrapped under React.StrictMode.

<React.StrictMode>
<First />
</React.StrictMode>

Strict mode is introduced for functional components in React 16.*. We wrap our component under React.StrictMode to identify the potential errors in our application.

StrictMode helps to maintain stability of large codebases and helps in up-gradation to newer versions of React. StrictMode logs errors in console for the issues which our application can have:

React.StrictMode needs to trigger some methods and lifecycle hooks twice to resolve these problems:

  1. These are methods which might be called more then once and can have side effects, so React.StrictMode trigger these methods twice to check any side effect. If there is any sideeffect, the error will be logged. (side effect: Things which are updated outside the method/component)

    • constructor
    • componentWillMount (or UNSAFE_componentWillMount)
    • componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
    • componentWillUpdate (or UNSAFE_componentWillUpdate)
    • getDerivedStateFromProps
    • shouldComponentUpdate
    • render
    • setState updater functions (the first argument)

  2. There are possibilities that we are using some old React methods and APIs, So React.StrictMode identifies that and log the error to console mentioning, the method is outdated.

  3. React.StrictMode works only in development mode, so no need to worry for production.

Conclusion: React.StrictMode is provided by React community to help our applications keep track of changes and we can easily upgrade our applications to new versions with Confidence.

KushalSeth
  • 3,265
  • 1
  • 26
  • 29
  • I can't understand this line (side effect: Things which are updated outside the method/component). can you give a example – user8989 Jun 11 '20 at 15:21
  • You can think of side effect as anything that modifies something outside the function. Simple examples are, suppose a function updates a global variable, or updates the cache, these are side effect. In presence of side effect, a component's behavior depends upon the history of execution. So, always prefer pure functions in react (given an input produces same output). – KushalSeth Jun 11 '20 at 20:02