React setState not updating state

Question

So I have this:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({ dealersOverallTotal: total });
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

newDealersDeckTotal is just an array of numbers [1, 5, 9] e.g. however this.state.dealersOverallTotal does not give the correct total but total does? I even put in a timeout delay to see if this solved the problem. any obvious or should I post more code?

Besides what is said in the answers, you are explicitly logging the value of the state, before you are calling setState. — Felix Kling
– Felix Kling, Commented Jan 3, 2017 at 15:27
@FelixKling no I'm calling this.state after I set it. I am logging a variable before. no? — The worm
– The worm, Commented Jan 3, 2017 at 15:34
Because of the timeout your setState is indeed executed after you log the state. I think what you meant to do in debugging was putting the console.log part inside the timeout, and the setState outside. — Fabian Schultz
– Fabian Schultz, Commented Jan 3, 2017 at 15:36
@FabianSchultz can you explain one thing I'm not getting then. consider this code: if(this.state.playersOverallTotal > 21){ console.log('bust'); this.setState({playerBusted: true}); } when it gets to over 21, the log fires but the state does not change and then only changes once the number increments again. e.g. if it got to 24 it would not set the state but then if it got to 28 for example it would — The worm
– The worm, Commented Jan 3, 2017 at 15:58

Fabian Schultz · Accepted Answer · 2017-03-14 15:54:46Z

322

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');
});

edited Mar 14, 2017 at 15:54

answered Jan 3, 2017 at 15:16

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Felix Kling Over a year ago

In addition to that, the OP explicitly logs the state value before they call setState.

Jozcar Over a year ago

This works for me as well, in the past I have used this: `this.setState({someVar: newValue},function(){ console.log("force update}); ' but for some reason it was't worring any more, when I updated the code as describe above it work. any idea why?

Fabian Schultz Over a year ago

@Jozcar Should work also, syntax wasn't right (missing parentheses): this.setState({someVar: newValue},function(){ console.log("force update") });

Johncy Over a year ago

imgur.com/Ku0OjTl Please tell me what should i do to get rid of this problem.

Hem M Over a year ago

I had completely forgot the fact that it's async call and did all possible code changes except for this one and here you saved my brain from burning out. thanks

|

Siraj Alam · Accepted Answer · 2019-11-13 12:30:15Z

52

In case of hooks, you should use useEffect hook.

const [fruit, setFruit] = useState('');

setFruit('Apple');

useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

answered Nov 13, 2019 at 12:30

Siraj Alam

10.2k10 gold badges61 silver badges76 bronze badges

3 Comments

alex351 Over a year ago

Great, it works with useEffect. But why does it need one?

Siraj Alam Over a year ago

useEffect runs on every re-render, and if the items passed into the array are state variable sand changed. So when the fruit changed and component re-renders, that useEffect will run.

alex351 Over a year ago

I run setFruit and console.log fruit outside of useEffect, and it does not change. :/

Mahesh Joshi · Accepted Answer · 2018-03-20 16:34:58Z

29

setState is asynchronous. You can use callback method to get updated state.

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () => 
    console.log(this.state.yourName));
 }

answered Mar 20, 2018 at 16:34

Mahesh Joshi

6288 silver badges10 bronze badges

Comments

Arun Gopalpuri · Accepted Answer · 2020-05-07 01:21:39Z

21

I had an issue when setting react state multiple times (it always used default state). Following this react/github issue worked for me

const [state, setState] = useState({
  foo: "abc",
  bar: 123
});

// Do this!
setState(prevState => {
  return {
    ...prevState,
    foo: "def"
  };
});
setState(prevState => {
  return {
    ...prevState,
    bar: 456
  };
});

answered May 7, 2020 at 1:21

Arun Gopalpuri

2,51228 silver badges34 bronze badges

2 Comments

Ethicist Over a year ago

setting the state like this fixed it for me

AlecZ Over a year ago

This fixed an issue that none of the other suggestions were fixing.

Mokesh S · Accepted Answer · 2021-06-15 07:26:01Z

17

The setState is asynchronous in react, so to see the updated state in console use the callback as shown below (Callback function will execute after the setState update)

this.setState({ email: '[email protected]' }, () => {
   console.log(this.state.email)
)}

edited Jun 15, 2021 at 7:26

answered Jun 26, 2020 at 19:52

Mokesh S

8037 silver badges11 bronze badges

2 Comments

notacorn Over a year ago

THANK YOU this is it, you have to directly set the variable

john k Jun 9 at 0:48

I think the functionality was removed.

Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().

Massimiliano Kraus · Accepted Answer · 2019-11-21 22:12:00Z

16

The setState() operation is asynchronous and hence your console.log() will be executed before the setState() mutates the values and hence you see the result.

To solve it, log the value in the callback function of setState(), like:

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

edited Nov 21, 2019 at 22:12

Massimiliano Kraus

3,8925 gold badges32 silver badges51 bronze badges

answered Jan 3, 2017 at 15:20

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

5 Comments

Santosh Singh Over a year ago

JavaScript is always synchronous.

Shubham Khatri Over a year ago

@santoshsingh you have a misconception. API calls, timeouts all happen asynchronously.

Santosh Singh Over a year ago

As you mentioned above that javascript is asynchronous --- it's not correct. Its mainly synchronous and for cases it's asynchronous. stackoverflow.com/questions/2035645/…

Shubham Khatri Over a year ago

@santoshsingh. Ohh that was a mistake on my part. Didn't form the sentence correctly

user1204214 Over a year ago

very clever use of the callback to ensure the state is updated before the subsequent call!

Dev01 · Accepted Answer · 2019-03-23 20:48:13Z

13

Using async/await

async changeHandler(event) {
    await this.setState({ yourName: event.target.value });
    console.log(this.state.yourName);
}

answered Mar 23, 2019 at 20:48

Dev01

14.3k22 gold badges80 silver badges130 bronze badges

1 Comment

ggorlen Over a year ago

setState doesn't return a promise, so I don't expect this to work.

Gus T Butt · Accepted Answer · 2021-01-18 14:39:52Z

6

As well as noting the asynchronous nature of setState, be aware that you may have competing event handlers, one doing the state change you want and the other immediately undoing it again. For example onClick on a component whose parent also handles the onClick. Check by adding trace. Prevent this by using e.stopPropagation.

answered Jan 18, 2021 at 14:39

Gus T Butt

1972 silver badges5 bronze badges

1 Comment

Gavin Over a year ago

Thanks for leaving this. Your comment pointed me in the right direction. I found the problematic code being updated in a conflicting event, then in that spot I used prevState callback to set new state as mentioned above by @Arun Gopalpuri ``` this.setState(prevState=>{ return {...prevState, newProperty }}); ```

Dani Alcalà · Accepted Answer · 2021-10-26 12:08:45Z

6

If you work with funcions you need to use UseEffect to deal with setState's asynchrony (you can't use the callback as you did when working with classes). An example:

import { useState, useEffect } from "react";

export default function App() {
 const [animal, setAnimal] = useState(null);

 function changeAnimal(newAnimal) {
  setAnimal(newAnimal);
  // here 'animal' is not what you would expect
  console.log("1", animal);
 }

 useEffect(() => {
  if (animal) {
   console.log("2", animal);
  }
 }, [animal]);

 return (
  <div className="App">
  <button onClick={() => changeAnimal("dog")} />
 </div>
 );
}

First console.log returns null, and the second one returns 'dog'

edited Oct 26, 2021 at 12:08

answered Oct 26, 2021 at 12:02

Dani Alcalà

2624 silver badges5 bronze badges

Comments

zmechanic · Accepted Answer · 2020-06-04 22:59:00Z

5

I had the same situation with some convoluted code, and nothing from the existing suggestions worked for me.

My problem was that setState was happening from callback func, issued by one of the components. And my suspicious is that the call was occurring synchronously, which prevented setState from setting state at all.

Simply put I have something like this:

render() {
    <Control
        ref={_ => this.control = _}
        onChange={this.handleChange}
        onUpdated={this.handleUpdate} />
}

handleChange() {
    this.control.doUpdate();
}

handleUpdate() {
    this.setState({...});
}

The way I had to "fix" it was to put doUpdate() into setTimeout like this:

handleChange() {
    setTimeout(() => { this.control.doUpdate(); }, 10);
}

Not ideal, but otherwise it would be a significant refactoring.

answered Jun 4, 2020 at 22:59

zmechanic

2,02022 silver badges28 bronze badges

4 Comments

thargenediad Over a year ago

This solved my issue, but I put the setState() inside of the setTimeout() instead. Thank you!

Omar Dulaimi Over a year ago

Thanks a lot man. You just saved me from even more debugging.

Mukundhan Over a year ago

wish there could be more of an elegant way to solve this, but this works, thanks

john k Jun 9 at 1:15

why would it matter if it is being updated from a callback?

Pravin Ghorle · Accepted Answer · 2019-10-24 09:28:21Z

3

just add componentDidUpdate(){} method in your code, and it will work. you can check the life cycle of react native here:

https://images.app.goo.gl/BVRAi4ea2P4LchqJ8

answered Oct 24, 2019 at 9:28

Pravin Ghorle

6888 silver badges9 bronze badges

Collectives™ on Stack Overflow

React setState not updating state

11 Answers 11

8 Comments

3 Comments

Comments

2 Comments

2 Comments

5 Comments

1 Comment

1 Comment

Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

8 Comments

3 Comments

Comments

2 Comments

2 Comments

5 Comments

1 Comment

1 Comment

Comments

4 Comments

Comments

Linked

Related