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
– Pezhman Parsaee, Commented Sep 19, 2019 at 8:36
why const runEffect = async () => { since there's absolutely no Promises involved — Jaromanda X
– Jaromanda X, Commented Sep 19, 2019 at 8:37
@JaromandaX It is written in this way for simplicity, but the actual code returns a promise — Pezhman Parsaee
– Pezhman Parsaee, Commented Sep 19, 2019 at 8:39
Well, ok, have you searched for the phrase you used as the title of the question - some interesting reading — Jaromanda X
– Jaromanda X, Commented Sep 19, 2019 at 8:42

Luka Dumančić · Accepted Answer · 2019-09-19 09:15:00Z

4

//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]);

answered Sep 19, 2019 at 9:15

Luka Dumančić

1261 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Asynchronous useEffect chains in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related