A strange problem about updating useState

Here is my code :

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

const {useState, useEffect} = React;

function App() {
   let [count, setCount] = useState(0);
   let [num, setNum] = useState(0);

   useEffect(() => {
       setCount((pre) => {
           return pre + 1;
       });
       setNum(num + 1);
   }, []);

   return (
     <p>
         count:{count} num:{num}
     </p>
  );
}


ReactDOM.createRoot(document.querySelector("#app"))
  .render(<React.StrictMode><App /></React.StrictMode>);

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

<!-- end snippet -->

The result is : count:2 num:1! why?

In theory, num and count should be synchronous, I don't know what happend!<br>
In dev mode, useEffect's callback executed twice.

This is because of StricMode :
>Strict Mode only runs in development, which does not impede the production build. It logs extra warnings or errors and invokes functions twice to ensure that the expected results always occur

you may wonder why they have different values and you think that they should have the same, either 1 or 2 <br>

This is because when you update a state value with the function like you did for count :

setCount((pre) => {
   return pre + 1;
});

This will make the state updates based on it previous values not based on its value in the last render <br> and this is why we use the function of useState so to have access to the previous value of the state before the next render and we can also update it again just before the component rerenders as it happend in this example

So here the second time useEffect runs (because of strictMode) pre is equal to 1 so the final value will be 2.<br>
However when you update your state this way :

setNum(num + 1);

It will be updated based on num and num is still equal to 0 because the component didn't rerendered yet

The prime reason behind this is StrictMode
> StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).

If you want to get rid of this, change

 ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

to

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );