React - State variable inside cleanup function

Question

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?

Answer 1

From the docs:

React cleans up the effect from previous render before running the next render.

The false value that is logged is from the useEffect cleanup from the previous render (when pState was false).

Docs