CODEWITHSUNDEEP
javascriptreactjs
user123456789
user123456789

Reputation: 478

React - State variable inside cleanup function

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) enter image description here

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?

Upvotes: 1

Views: 73

Answers (1)

Tushar Shahi
Tushar Shahi

Reputation: 20451

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

Upvotes: 2

Related Questions