Asynchronous useEffect chains in React

Question

I've written this piece of code using Hooks in React:

useEffect(() => {
  const runEffect = async () => {
    const data = await AsyncFunction();
    console.log('async operation')
  };
  runEffect();
});

useEffect(() => {
  console.log('useEffect-1')
});

useEffect(() => {
  console.log('useEffect-2')
});

The result is this: useEffect-1 useEffect-2 async operation

But I want to wait for async useEffect and then call another use effects, i.e. I want the expected result to be: async operation useEffect-1 useEffect-2

How it could be done?

regards

@Rajesh it is not important in result, with async or without it the result is what I wrote in the question — Pezhman Parsaee, Sep 19 '19 at 08:36
why `const runEffect = async () => {` since there's absolutely no Promises involved — Jaromanda X, Sep 19 '19 at 08:37
@JaromandaX It is written in this way for simplicity, but the actual code returns a promise — Pezhman Parsaee, Sep 19 '19 at 08:39
Well, ok, have you searched for the phrase you used as the title of the question - some interesting reading — Jaromanda X, Sep 19 '19 at 08:42
Async useEffect is pretty much unreadable: https://github.com/facebook/react/issues/14326 and https://stackoverflow.com/questions/55008076/react-useeffect-hook-and-async-await-own-fetch-data-func — Oleg, Sep 19 '19 at 09:08
@Oleg thanks, but I want to wait for async useEffect and then do another useEffects, how it could be possible? — Pezhman Parsaee, Sep 19 '19 at 09:16
You can build promise with then chain or await in one useeffect why you need more — Oleg, Sep 19 '19 at 09:24

score 3 · Accepted Answer · answered Sep 19 '19 at 09:15

//Add 2 states
const [variable1, setVariable1] = useState(null);
const [variable2, setVariable2] = useState(null);

//Remove this out from useEffect
const runEffect = async () => {
  const data = await AsyncFunction();
  console.log('async operation');
  setVariable1(true); //Something that is not null
};

useEffect(() => {
  runEffect();
}, []);

useEffect(() => {
  if (variable1) {
    console.log('useEffect-1');
    setVariable2(true); //Something that is not null
  }
}, [variable1]);

useEffect(() => {
  if (variable2) {
    console.log('useEffect-2');
  }
}, [variable2]);

Asynchronous useEffect chains in React

1 Answers1