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.
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 :)
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.useState but also renders the whole component twice.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:
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)
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.
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.
