Why Does Calling React Setstate Method Not Mutate the State Immediately

Why does calling react setState method not mutate the state immediately?

From React's documentation:

setState() does not immediately mutate this.state but creates a
pending state transition. Accessing this.state after calling this
method can potentially return the existing value. There is no
guarantee of synchronous operation of calls to setState and calls may
be batched for performance gains.

If you want a function to be executed after the state change occurs, pass it in as a callback.

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

Why calling setState method doesn't mutate the state immediately?

Reason is setState is asynchronous, you can't expect the updated state value just after the setState, if you want to check the value use a callback method. Pass a method as callback that will be get executed after the setState complete its task.

Why setState is asynchronous ?

This is because setState alters the state and causes re rendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive.
Thus the setState calls are asynchronous as well as batched for better UI experience and performance.

From Doc:

setState() does not immediately mutate this.state but creates a
pending state transition. Accessing this.state after calling this
method can potentially return the existing value. There is no
guarantee of synchronous operation of calls to setState and calls may
be batched for performance gains.

Using callback method with setState:

To check the updated state value just after the setState, use a callback method like this:

setState({ key: value }, () => {
     console.log('updated state value', this.state.key)
})

Check this:

class NightlifeTypes extends React.Component {

   constructor(props) {

      super(props);

      this.state = {

         barClubLounge: false,

         seeTheTown: true,

         eventsEntertainment: true,

         familyFriendlyOnly: false

      }

   }

   handleOnChange = (event) => {  // Arrow function binds `this`

      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {

         this.setState({ barClubLounge: value}, () => {  //here

             console.log(value);

             console.log(this.state.barClubLounge);

             //both will print same value

         });        

      }

   }

   render() {

      return (

          <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/>

      )

   }

}

ReactDOM.render(<NightlifeTypes/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

setState doesn't update the state immediately

This callback is really messy. Just use async await instead:

async openAddBoardModal(){
    await this.setState({ boardAddModalShow: true });
    console.log(this.state.boardAddModalShow);
}

React state is not updating immediately after setState is being called

Please don't make mistake by directly updating the array element by its index you should first copy the array into a new array, otherwise, it will directly update the array which will cause reacjs to not to re-render the component.

Check this out

const [allnotes, setAllNotes] = useState(notes)

const addNote = () => {
  let notesAllTemp = [...allnotes]; // !IMPORTANT to copy array
  allnotes.forEach((n, index) => {
  if((n.id === clickedId)){
     notesAllTemp[index].notesDescs.push({id: 
      notesAllTemp[index].notesDescs.length+1,desc:''})
    }
  });
  setAllNotes(notesAllTemp);
}

React setState not Updating Immediately

You should invoke your second function as a callback to setState, as setState happens asynchronously. Something like:

this.setState({pencil:!this.state.pencil}, myFunction)

However in your case since you want that function called with a parameter you're going to have to get a bit more creative, and perhaps create your own function that calls the function in the props:

myFunction = () => {
  this.props.updateItem(this.state)
}

Combine those together and it should work.

setState didn't update the set value in React

In React setState is asynchronous, which means that the sate value won't be modified right after you call setState and that is why you get the old values from the console.log.

Why is setState in reactjs Async instead of Sync?

React Docs

handleFilter = (event) => {
    console.log(this.state.answerStatus) // Before update 'all'

    let val= event.target.value === "answered";

    console.log(val); // true or false

    this.setState({answerStatus:val}, () => {
       console.log(this.state.answerStatus);
    });
    
  }

---

Related Topics