How to manage async functions using React Hooks API

Question

I am working with React Hooks and i am trying to update state then do something async and then do someting based on state. This doesn't work since the update state is not available inside the async function. How could you solve such a task using react hooks?

Demo

I basically tried to change the scope of the function but apparently its all immuteable which means the refrences inside the async functions points to old state.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// Constants
function somethingAsync(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

function App() {
  const [loading, setLoading] = React.useState(false);

  const doSomethingAsync = async () => {
    setLoading(true);
    await somethingAsync(2000);
    if (loading) {
      setLoading(false);
    }
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>Current Status: {loading ? "Loading" : "Not Loading"}</p>
      <button onClick={doSomethingAsync}>Do Something Async</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I would like the loading flag to be reset back to false everytime the async function is done and this should be done based on state the have been updated while doing the async function. Right now it only works every second time due to the old references in the async scope.

I didn't look closely in your code, but I would use useEffect hook if I want to execute something based on state changes — LeoCantThinkofAName
– LeoCantThinkofAName, Commented Aug 2, 2019 at 6:16

cbdeveloper · Accepted Answer · 2019-08-02 07:48:25Z

3

Just remove the if around your setLoading(false) call.

If you don't, that function will access a stale loading status. Because when that function was created, loading was false. So, after you run your async function, after the await, your function will resume, and even though loading is true it will see it as false. But you'll know that it will be true because you just set it and your App has re-rendered at the await statement. See the behavior below:

CodeSandbox

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// Constants
function somethingAsync(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

function App() {
  const [loading, setLoading] = React.useState(false);
  console.log("App rendering...");

  const doSomethingAsync = async () => {
    setLoading(true);
    console.log("Before await...");
    await somethingAsync(2000);
    console.log("After await...");
    setLoading(false);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>Current Status: {loading ? "Loading" : "Not Loading"}</p>
      <button onClick={doSomethingAsync}>Do Something Async</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

edited Aug 2, 2019 at 7:48

answered Aug 2, 2019 at 7:26

cbdeveloper

31.9k45 gold badges210 silver badges404 bronze badges

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

1 Comment

Thupi Over a year ago

Alright, but i my case what if i need the updated state :-) ? Let's say that something is updated and i need the updated value in my async function. Is there any way to achive this :-) ?

Clarity · Accepted Answer · 2019-08-02 06:09:54Z

1

You just need to remove the if condition in your async function:

  const doSomethingAsync = async () => {
      setLoading(true);
      await somethingAsync(2000);
      setLoading(false);      
    };

answered Aug 2, 2019 at 6:09

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

2 Comments

Thupi Over a year ago

Alright, but i my case what if i need the updated state :-) ? Let's say that something is updated and i need the updated value in my async function. Is there any way to achive this :-) ?

Clarity Over a year ago

You need to look into useEffect for that: reactjs.org/docs/hooks-effect.html

Collectives™ on Stack Overflow

How to manage async functions using React Hooks API

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related