I was interviewed with the following questions, I got the explained answer by my interviewer. But after the interview, I tried to recreate the problem. I got a different results

Here's the code and the answer is to explain what will be printed in console

function App() {
  const [foo, setFoo] = useState('a');

  useEffect(() => {
    setFoo('b');
  }, []);

  useEffect(() => {
    console.log("effect ", foo);
  }, [foo]);

  console.log("render ", foo);

  return (
    <div></div>
    
  );
}

The following is my understanding ( and the interviewer's explanation)

1. it will render the components
2. encountered with useEffect and stored them into the stack first
3. 'render a'
4. Have to deal what's inside the stack
5. First useEffect -> knows that we have to setFoo, but wait till other useEffect to be processed
6. Second useEffect -> 'effect a'
7. setFoo('b') and re-render
8. Pass the first useEffect since it's empty dependency
9. put second useEffect into stack
10. 'render b'
11. deal with second useEffect -> 'effect b'

So the output supposed to be

'render a'
'effect a' 
'render b' 
'effect b'

but when I executed the code, what I got is

'render  a'
'effect  a'
'effect  a'
'render  b'
'effect  b'

Why is there extra 'effect a'?

And is there any reading material regarding to the lifecycle of functional components?