2

I am trying to use the setState react hook and I am trying to make an object of states for different states like this

const [myState, setMyState] = useState({bulb1state: true, bulb2state: true})

then i try to change the states by doing:

setMyState({...myState, bulb1state: false})
//My state is now {bulb1state: false, bulb2state: true }

which is normal and expected, but when i try to set the other state of the object by doing 

setMyState({...myState, bulb2state: false})
//My state now becomes {bulb1state: true, bulb2state: false }

I was expecting 

{bulb1state: false, bulb2state: false }

What could be the cause? is this normal or is this because of the asynchronous way states work?

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118
olayemii
  • 590
  • 1
  • 3
  • 16
  • If you're only changing one value & not the other, then of course one property will not be the same as the other. I.e. in the second instance you're passing it a copy of the original ```myState```. I've assumed that this is the case, could you provide more code by any chance? – JO3-W3B-D3V Jun 19 '19 at 14:51
  • Where are you checking for this? You can't `console.log` in the function body due to the asynchronous nature, you have to use a hook. – Avin Kavish Jun 19 '19 at 14:51
  • Yes, try to use `setMyState(prevState => { ... })` and log your prev state, also in your case I suggest you to use `setMyState(prevState => return {...prevState, ... })` – Dennis Vash Jun 19 '19 at 14:52
  • Possible duplicate of [Why is setState in reactjs Async instead of Sync?](https://stackoverflow.com/questions/36085726/why-is-setstate-in-reactjs-async-instead-of-sync) – Easwar Jun 19 '19 at 14:52

1 Answers1

7

My best guess is that you have a function which is closing over an obsolete version of the state. I'd have to see the rest of the code surrounding your use of setMyState to be sure.

Regardless, you should be able to fix it by using the callback version of setMyState to make sure you have the latest state: 

setMyState(prevState => ({
  ...prevState, 
  bulb2state: false
});
Nicholas Tower
  • 72,740
  • 7
  • 86
  • 98