How to resolve a promise after react hooks setState complete?

Question

I need to resolve the promise after setState complete but in react hooks setState (useState) does not have a callback function.

React hooks version of this code:

handleBeforeGetContent = () => {
    return new Promise((resolve, reject) => {
        this.setState({ key: 'updatedValue' }, () => resolve());
    });
}

Answer 1

You can use async function inside the useEffect like below.

  const [isLoadingComplete, setLoadingComplete] = React.useState(false);


  React.useEffect(() => {
        async function loadDataAsync() {
          try {    
            await loadAsyncSomething();
          } catch (e) {
            console.warn(e);
          } finally {
            setLoadingComplete(true);
          }
        }

        loadDataAsync();
      }, []);