On this question React batch updates for multiple setState() calls inside useEffect hook There is a snippet posted in question I try to replicate the same thing with code sandbox but I got too many render than question I donot know the reason
I am attaching the code sandbox link and javascript snippet both works differently
react batch update Code Sandbox link
function App() {
console.log('Rendering app...');
const [myState,setMyState] = React.useState(0);
const [booleanState, setBooleanState] = React.useState(false);
console.log('myState: ' + myState);
console.log('booleanState: ' + booleanState);
React.useEffect(()=>{
console.log('Inside useEffect...');
setMyState(1);
setMyState((prevState) => prevState +1);
setMyState(3);
setMyState(4);
setMyState(5);
setBooleanState(true);
},[]);
return(
<div>App - Check out my console!</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>