I face this issue in my real project. To present it more clearly, I built a very basic project, which consists of just a parent and a child component.
I have a random value that I define (no matter if as a state variable or as a 'regular' variable) in the body of the parent component and pass it as props to the child component.
For some reason, when I log (console.log) this random value in the body of the parent component, it appears to be different from the value in the body of the child component. They are equal in the jsx of each component, and when I log the value in an useEffect hook in the parent, but different when I log them in the body of each component.
Parent component:
import React, { useEffect } from 'react';
import ChildComponent from './ChildComponent';
function App() {
const rand = Math.random();
console.log('parent - in body', rand);
useEffect(() => {
console.log('parent - in useEffect', rand);
});
return (
<div>
<h1>parent {rand}</h1>
<ChildComponent rand={rand}></ChildComponent>
</div>
);
}
export default App;
Child component:
import React from 'react';
function ChildComponent(props) {
console.log('child', props.rand);
return (
<div>
<h3>child {props.rand}</h3>
</div>
);
}
export default ChildComponent;
The results (the different value in the console is circled):
Can someone explain this behavior?
UPDATE:
I realized that the <React.StrictMode> in the index.js file was responsible for the re-rendering, hence the different values of the random variable.
However:
- If due to the strict mode the component was rendered twice, why there is only one appearance for each console.log()?
- Is it safe to remove the strict mode to solve this issue (I don't want to lose necessary things on the other hand)?
- Which component was rendered twice (the parent, the child, or both), and how does it works?
