Please look at App.js file for a react app created through create-react-app

import { useState, useEffect } from "react";
 
function App() {
  const [pState, setPState] = useState(false);
 
  useEffect(() => {
    console.log('Use effect parent. ' + pState);
 
    return () => {
      console.log('Parent cleanup function called. Current State: ' + pState);
    }
  }, [pState]);
 
  const pChangeHandler = () => {
    setPState(prevP => {
      return !prevP;
    })
  }
 
  console.log('Parent component rendered. ' + pState);
  return (
    <div className="App">
      <button onClick={pChangeHandler}>Change P State</button>
    </div>
  );
}
 
 
export default App;

After clicking the button 1 time, following is my console output (first 2 consoles are before clicking the button)

When the button is clicked, I get 'parent component rendered' with pState as true. So I expected it to be true(as it is called after the rendering happens and pState while rendering is true) in the 'Parent cleanup function...' called log as well. 'Use effect parent' log has pState true as well.

Could someone please explain this behavior?