React useState is 1 step behind the real value of the variable

Question

I know that it's repeat, but i don't understand how to fix it in my case I send put request to server, but it has old value, what i should do?

React code:

const [sizeValue, setSizeValue] = useState(basketItem.clotheSize)

<select
   name={"size"}
   className={"sizeSelector"}
   value={sizeValue}
   onChange={e => {
      setSizeValue(e.target.value)
      updateClothesSize(basketItem.id, sizeValue)
   }}
>
  <option value="s">s</option>
  <option value="m">m</option>
  <option value="l">l</option>
  <option value="xl">xl</option>
  <option value="xxl">xxl</option>
</select>

axios code:

export const updateClothesSize = async (id, size) => {
    const {data} = await $host.put('api/basket/' + id, {clothesSize: size})
    return data
}

`setSizeValue` *does not* immediately change the value of `sizeValue` in the context which it is called. Instead, it triggers a re-render where the new value of `sizeValue` is available. Just use `e.target.value` or use a `useEffect` separately. — crashmstr, Jan 04 '23 at 16:25

score 3 · Accepted Answer · answered Jan 04 '23 at 16:33

useState will not update the state value immediately. You can fix your issue by either directly passing the value to updateClothesSize(basketItem.id, e.target.value).Or use a useEffect in which you'll call updateClothesSize.

useEffect(() => {
  updateClothesSize(basketItem.id, sizeValue)
},[sizeValue])

React useState is 1 step behind the real value of the variable

1 Answers1