React hook, accessing state value directly after updating it

Question

I know this has been asked a lot and in many different ways but I couldn't find something that works for me. The functionality I want in my code is this

const TestApp() => {
  const [count, setCount] = useState(null);
  const updateAndShowCount = () => {
    setCount(count + 1);
    // This console.log should be happen after setCount() has completed it's job
    console.log(count);
  }
}

The function will be called by a button onClick effect. What it currently does is to update count and print the value of count before the update.

I want the button press to update count and immediately "after" print the updated value.

This is a test case for achieving what I want, in my actual project the function will receive a value from an input field and then make a get request using that value (with axios). I am assuming that the answer to this simple test case will work in my case as well, and since this asynchronous behaviour is something I don't quite understand yet I thought it would be sensible to get a grasp of the general concept first.

From what I have gathered though, I think I should mention that useEffect() is already being used for an initial get request, so if your answer involves using that you should assume that I don't know how to add something to useEffect() while retaining it's current functionality.

The current useEffect():

useEffect(() => {
  axios.get("mybackend/").then(res) => {
    setRequestData(res.data);
  });
}, []);

My actual question is in bold for clarity. Any info regarding the situation as a whole is welcome as well. Thanks for reading!

Because javascript passes by value, it's literally impossible to do what you want. The problem why there are so many questions about this topic is because this is not a react thing and it's also completely irrelevant whether setCount is async or not. It's simply not possible. If you want the new value immediately, use what you pass to setCount (count + 1). — Yoshi
– Yoshi, Commented Apr 9, 2021 at 9:52

Jonas Wilms · Accepted Answer · 2021-04-09 09:43:06Z

1

The solution follows naturally when adding count to your request (I guess it's some query parameter of some sort), because as you then use count inside the effect, it is a dependency of the effect, thus whenever the dependency changes, the effect will run again:

useEffect(() => {
  axios.get("mybackend?count=" + count).then(res) => {
   setRequestData(res.data);
  });
}, [count]);

Note that the effect is still missing a cleanup callback, which would cancel an ongoing request, so that when count changes again while the request is still ongoing, not two requests run at the same time concurrently.

answered Apr 9, 2021 at 9:43

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

supah0t Over a year ago

This works perfectly in my case. If you could also advise me on how to implement a "loading" prop while the request is being processed so that the count variable can't be modified until then it would be the optimal. Regardless of that, your answer is awesome, thanks for your time :)

Jonas Wilms Over a year ago

if(requestData === null) /* don't do something */

Як Цидрак · Accepted Answer · 2021-04-09 09:45:55Z

0

i'am not sure that i understood your question completely, but i think the answer is: you should use the callback in your setState, like that:

setCount(count => count + 1)

answered Apr 9, 2021 at 9:45

Як Цидрак

411 silver badge5 bronze badges

Collectives™ on Stack Overflow

React hook, accessing state value directly after updating it

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related