React Setstate Not Updating State

React setState not updating state

setState() is usually asynchronous, which means that at the time you console.log the state, it's not updated yet. Try putting the log in the callback of the setState() method. It is executed after the state change is complete:

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
}); 

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.

React setState not updating state immediately

React's setState function is asynchronous. What you're experiencing is completely normal behavior. If u need to do something after the state has been updated, u can pass in a callback function to setState as a second argument like so:

    this.setState({
                ...
            }, () => { 
                  console.log(
                    "Status Updated: ",
                    this.state.BasePlantsSiteHire
                  );
                  // do something here
     })

Also, please don't make calls to componentDidMount explicitly, those are component life cycle methods that will be called by React itself throughout the lifecycle of your component!

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 state inside stomp.js callback function

Ok, so the problem was:
Callbacks were initialized on first visiting the HomePage, but for user to set that they can receive calls, they needed to go to the ProfilePage and flip the switcher. In the process of going back and forth between the pages React loses the pointer to the original isIncomingCall state and sets it on the previous version of the HomePage it seems.

---

Related Topics