Mohammed Nadeem Shareef

Posted on May 26, 2021

React useState hook is asynchronous!

#webdev #react #hooks #javascript

Hello Developers 👋

I would like to share something I recently got to know, so the background is, in my project I was using useState value right after updating it and I was getting previous value(not updated value) and to my surprise I found out that useState hook is asynchronous

what it is?

Basically, the thing is you don't get update value right after updating state.

What is the work around/solution?

We can use the useEffect hook and add our state in the dependence array, and we will always get the updated value.

Show me the code 🤩🤩🤩

import { useState } from "react";

export default function CountWithoutEffect() {
    const [count, setCount] = useState(0);
    const [doubleCount, setDoubleCount] = useState(count * 2);
    const handleCount = () => {
        setCount(count + 1);
        setDoubleCount(count * 2); // This will not use the latest value of count
    };
    return (
        <div className="App">
            <div>
                <h2>Count Without useEffect</h2>
                <h3>Count: {count}</h3>
                <h3>Count * 2: {doubleCount}</h3>
                <button onClick={handleCount}>Count++</button>
            </div>
        </div>
    );
}

Here we have very simple and stright forward component.
On button click we are updating two states and one state is dependent on other state.
The doubleCount will be one step behind count.
Check out the Live Demo

Solving this issue 🧐🧐🧐

This can be easily solve with useEffect hook, let's see the code


import { useState, useEffect } from "react";

export default function CountWithEffect() {
    const [count, setCount] = useState(0);
    const [doubleCount, setDoubleCount] = useState(count * 2);
    const handleCount = () => {
        setCount(count + 1);
    };

    useEffect(() => {
        setDoubleCount(count * 2); // This will always use latest value of count
    }, [count]);

    return (
        <div>
            <h2>Count with useEffect</h2>
            <h3>Count: {count}</h3>
            <h3>Count * 2: {doubleCount}</h3>
            <button onClick={handleCount}>Count++</button>
        </div>
    );
}

Here, when ever count changes we are updating doubleCount
Check out the live Demo

Closing here 👋👋👋

This is Shareef.
Live demo
GitHub repo of this blog
Stackover flow link for more info
My Portfolio
Twitter ShareefBhai99
Linkedin
My other Blogs

Top comments (24)

Froxx93 • Nov 29 '22

In most cases you don't even need to make doubleCount a state.
You can simply say const doubleCount = count * 2; and it'll just calculate it new when count updates. Sometimes, when you have a more complex setup, useEffect might come in handy though.

Mohammed Nadeem Shareef • Dec 2 '22

Thanks for the info man... 😊

Eliya • Jun 15 '22 • Edited

Another (bit-tricky) way to solve this problem, is by setting the 'count' state with a callback, which returns an IIFE by itself, that will take the result of 'count' incremental as argument, sets doubleCount, and returns back the argument, which is the finally returned value for setCound.

Rishi • Jun 1 '23

Another approach:- codesandbox.io/s/muddy-brook-iyzwk...

ilyamed • Mar 14 '22

Thanks! It was really helpful

Mohammed Nadeem Shareef • Feb 5 '22

Hey man, thanks for the info.

Gabriel Pinheiro • May 4 '22

Can I use async/ await too?

Mohammed Nadeem Shareef • May 5 '22

tbh
I don't know exactly may be you can or can't.
I would prefer not to use it.

Simon Xiong • Apr 25 '22

Thanks for the writeup. Recently had to complete a project and ran into this issue. Now I at least know how to resolve it in future cases. 👍

Mohammed Nadeem Shareef • Apr 26 '22

😄

Diegoo11 • Apr 7 '22

Muchas gracias, fue muy util.
Thank you very much, it was very useful.

noyan • May 26 '21 • Edited

The doubleCount will be one step behind, because state is just a normal number in each call.
So, if you call setCount (count*2) after setCount(count+1), Counter displays 0 every time.
livedemo: codesandbox.io/s/vigorous-antonell...
see: overreacted.io/a-complete-guide-to...

Mohammed Nadeem Shareef • May 26 '21 • Edited

Yeah! absolutely correct... and that's why I use two diffrent states

my scenario was


setState(state); // Update some state
doSomething(); // Do something with the state

and I was not getting the updated state. as you can see in the example
and two solve the I use useEffect.

setState(state); // Updates the state
useEffect(() => {
    doSomething(state) // do something with the updated state.
},[state]) // This will call again when the state is updated

noyan • May 27 '21

I realized my comment was already included in your post. Sorry about that.

Actually, there is a simple way to write it without useEffect: setState(prev => prev + 1). It will update properly even if you update it multiple times in one render.

const Func = () => {
  const [count, setCount] = useState(0);    // initially count = 0 (When it was first mounted)
  const handleClick = () => {
    setCount(prev => prev + 1);                 // count = 1 
    setCount(prev => prev + 1);                 // count = 2
  }

  return (
    <button onClick={handleClick}>{count}</button>
)
}

It is called functional update. This one is easier to use or understand, and I recommend to use it when needed.
reactjs.org/docs/hooks-reference.h...

Mohammed Nadeem Shareef • May 27 '21

Yeah! I will definitely try it...

Jiwei He • Jul 11 '22 • Edited

I modified your code to make it work in the expected way:

codesandbox.io/s/red-field-isi29y?...

Ore Akinwole • Jul 29 '22

This is really good

abdullah565 • Oct 5 '22

Thanks for this article.
But I wanna add here useState is not async. It is actually sync.

why it doesn't update immediately because of the closure.
more on this here: youtube.com/watch?v=RAJD4KpX8LA

thanks :)

PS: i'm still learning it how it does work and how react render works under the hood.

Mohammed Nadeem Shareef • Oct 13 '22

Thanks for the input.

Mithun Varghese • Apr 5 '22

So recently I learnt this the hard way too. But what I realized is if you await setCount call, although it doesnot return a promise, the following code will execute after the count has incremented. Hope it helps :)

Mohammed Nadeem Shareef • Apr 5 '22

Thanks for the info. I would love to read the hard way. It might help many of us.

Lucila Gaudio • Jul 5 '22

I came to the same solution, I I think this is why: developer.mozilla.org/en-US/docs/W...

mahi kaushik • Mar 28 '23

"Great article! Understanding the asynchronous behavior of the useState hook in React is essential for writing efficient and effective code. While it can be easy to assume that the useState hook works synchronously like other functions, it's important to remember that React's state updates are batched and processed asynchronously for performance reasons.

The key takeaway from your article is that relying on the current value of state immediately after calling useState may not always return the most up-to-date value. Instead, you should use the callback function syntax to update state based on its previous value.

For those interested in learning more about React's useState hook, I recommend checking out this React usestate blog. Thanks for sharing your insights!"