React state is not updated after dispatch call using React useContext hook

Question

Yow guys, React beginner here.
So basically, I am trying to fetch the updated state using React useContext hook.

The state is set inside a function call where the dispatch is placed, and the function call is bind to the button onClick event.

The function where the dispatch is called:

const fetchLocation = async (id: number) => {
    const [, result] = await getLatestLocation()
    dispatch({ 
      type: "LOCATION_FETCHED", 
      payload: result 
    })
    console.log(result) //this prints the latest/updated location even on button first click
  }

Reducer:

case "LOCATION_FETCHED": {
      return {
        ...state,
        location: payload,
      }
    }

The function call in the component:

const { 
    fetchLocation, 
    location
   } = React.useContext(locationContext)
  const [fetchingLocation, setFetchingLocation] = useState(false)
  const getLocation = (id: number) => {
     fetchLocation(id)
      .then(() => {
        setFetchingLocation(true)
      })
      .finally(() => {
        setFetchingLocation(false)
        console.log(location) //this prints nothing or empty on the first button click
      })
  }

Button onClick function bind:

onClick={() => getLocation(143)}

I'm not sure what is happening, the first click will log nothing but on the second click, I got the updated location state.

Possible Duplicate of [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately/54069332#54069332) — Shubham Khatri, May 15 '20 at 13:31
State updates are async, you cannot console log the updated values immediately after making the update. Move your console.log into the function body and it will be updated as you expect — Brian Thompson, May 15 '20 at 13:31
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Brian Thompson, May 15 '20 at 13:33
Tried to move the console log into the function body but same result I got, I even tried to put it before or above the function call and it still returns empty after first click — fmsthird, May 15 '20 at 13:37
I'm not sure but I do set its value as you can see in the reducer and funky because I get the updated state after the 2nd button click — fmsthird, May 15 '20 at 13:44

score 3 · Accepted Answer · answered May 15 '20 at 13:48

3

As the comments say, the dispatch works asynchronously. So if you want to know the new value you should use the useEffect hook like this.

useEffect(() => {
  console.log(location)
}, [location])

You can read more about here: https://reactjs.org/docs/hooks-effect.html

answered May 15 '20 at 13:48

MaCadiz

1,699
9
11

tried it just now but I got the same results, still an empty log on first button click – fmsthird May 15 '20 at 14:05
I just made this [sandbox](https://codesandbox.io/s/useeffecttest-54ssc) and useEffect seems to be working good – MaCadiz May 15 '20 at 14:42

React state is not updated after dispatch call using React useContext hook

1 Answers1