До Реагируют, обеспечивает лучший путь, можно создать помощника, [112 лет]:

import { useEffect } from 'react';


export default function useEffectAsync(effect, inputs) {
    useEffect(() => {
        effect();
    }, inputs);
}

Теперь можно передать асинхронную функцию:

useEffectAsync(async () => {
    const items = await fetchSomeItems();
    console.log(items);
}, []);

Я прочитал этот вопрос и чувствую, что лучший способ реализовать useEffect не упоминается в ответах. Скажем, Вы имеете сетевой вызов и хотели бы сделать что-то, после того как у Вас есть ответ. Ради простоты давайте сохраним сетевой ответ в переменной состояния. Можно было бы хотеть использовать действие/редуктор для обновления хранилища с сетевым ответом.

const [data, setData] = useState(null);

/* This would be called on initial page load */
useEffect(()=>{
    fetch(`https://www.reddit.com/r/${subreddit}.json`)
    .then(data => {
        setData(data);
    })
    .catch(err => {
        /* perform error handling if desired */
    });
}, [])

/* This would be called when store/state data is updated */
useEffect(()=>{
    if (data) {
        setPosts(data.children.map(it => {
            /* do what you want */
        }));
    }
}, [data]);

Ссылка => https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects