Асинхронные цепочки useEffect в React

Question

Я написал этот фрагмент кода, используя 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')
});

Результат таков: useEffect-1 useEffect-2 async operation

Но я хочу дождаться асинхронного useEffect и затем вызватьдругие эффекты использования, т.е. я хочу, чтобы ожидаемый результат был: async operation useEffect-1 useEffect-2

Как это можно сделать?

regards

Answer 1

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