Conditional operator for setting value not working synchronously?

Question

Morning.

I have a silly looking problem with setting new value with conditional operator. Below is a hugely simplified code block, that is meant to switch value of 'selectedDc' from 0 to 1 or vice versa, and after that it gets new values from server with the changed value. However the new value of 'selectedDc' is not there instantly as the code reaches API calling rows, so the calls are made with old value. This causes the program to run 'one click behind' the users intentions.

import React, {useState} from 'react';

const App = () => {
  const [selectedDc, setDc] = useState(0)

  //event triggered by pressing button
  const handleDcChange = async (event) => {
    event.preventDefault()
    console.log(selectedDc) //prints 0 as expected
    const dcValue = (selectedDc === 0) ? 1 : 0
    console.log(dcValue) //prints 1 as expected
    setDc(dcValue)
    console.log(selectedDc) //still after setting new value, prints 0??

    //Following lines are just several api calls that work as intended, no need to show implementation.
    await daycareService.changeDc(selectedDc)
    setShifts(await shiftService.getAll())
    setDcTeams(await daycareService.getGroups(selectedDc))
  }
}

I first tried to set new value without creating new const first, but it worked exactly the same way, one step behind.

selectedDc === 0 ?
  setDc(1) :
  setDc(0)

What am I doing wrong, what should I do to get the correct output with the first trigger?

You can just keep using `dcValue` for the rest of the function because that's the value that you want anyway. — Guy Incognito, Jun 27 '20 at 06:31
Hmm thanks, didn't know that useState is anyhow related to setting new values without the actual useState() call. Must read and learn that post. — Saplu, Jun 27 '20 at 06:35
That doesn't make any sense, but I guess the duplicate will clarify things. — Guy Incognito, Jun 27 '20 at 06:36
Yeah sorry I am really new to React, I might talk nonsense :) But thanks for help! — Saplu, Jun 27 '20 at 06:39
`useState` is the react hook that provides the state and state updater function. duplicate should help, but if not here are the official react hook [docs](https://reactjs.org/docs/hooks-intro.html) to help get you going. — Drew Reese, Jun 27 '20 at 06:39

score 1 · Accepted Answer · answered Jun 27 '20 at 06:35

selectedDoc will contain the value of state that was retrieved at the time of last invocation of useState (during render) and will not change after that.

The useState implementation does not have any way to access the selectedDoc variable as it is outside its scope, and so can not alter its value.

In addition to the above, you might want to keep in mind that setState is asynchronous.

Conditional operator for setting value not working synchronously?

1 Answers1