Why does my state not update right away in console log

Question

i'm learning React and React hooks and i have a question. I have this state called rooms that contains array of room objects. I created a component that adds a new room. You fill out a form and when a submit button is clicked it fires up a function where I edited the state with setRooms([...rooms, newRoom]) and while it updates the rooms on the page. For some reason when I try to log it in the console (in the same onSubmit function that edited rooms the first time), it shows the previous state, even though it's supposed to be updated and i can tell it's updated, because the new room is displayed on the page.

Please help me understand this, i can't wrap my head around it.

score 3 · Answer 1 · answered Mar 23 '20 at 20:16

3

That's surely because the rooms state hasn't been updated yet when you console.log it.

You should keep in mind that useState is assyncronus, meaning that it's altered value it's not instantly reflected.

If you do:

const handleSubmit = (newRoom) => {
  setRooms([...rooms, newRoom])
  console.log(rooms)
  // Possibly won't get the desired result
}

But as React, when a state is changed, it rerenders. You can put the console.log anywhere before the return (o render function if it's a class)

const Component = () => {
  const handleSubmit = (newRoom) => {
    setRooms([...rooms, newRoom])
  }

  console.log(rooms)
    // Possibly you will get the desired result

  return (
     ..your component JSX
  )
}

answered Mar 23 '20 at 20:16

niconiahi

545
4
5

Thanks, you are right. By the way, why is setTimeout function in the same handleSubmit method, doesn't show the correct state? I thought, since state update is being delayed in the function, if i were to setTimeout for 4 seconds or so, it would be enough time for it to update the state. – codemebro Mar 23 '20 at 22:09
React tells you in the documentation that they cannot assure you that anything you do with `states` will have the desired effect. From React: ```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. ``` – niconiahi Mar 23 '20 at 23:23

score 0 · Answer 2 · answered Mar 23 '20 at 20:12

setState actions are asynchronous and are batched for performance gains. This is explained in the documentation of setState.

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.

Hence, though your setState() is given the latest value of rooms, it takes time to update it by that time, your console.log gets printed. Hence, you don't see the updated values by accessing this.state in console immediately after setting the state.

If you wanted to understand why setState() is asynchronous here is the stackoverflow link - Link

Why does my state not update right away in console log

2 Answers2

Linked