React Hooks Re-Renders

Question

У меня есть функциональный компонент, который имеет два состояния:

 let [data, setData] = useState([]);
 let [loading, setLoading] = useState(false);

У меня также есть простой хук useEffect, который вызывает функцию, которая возвращает обещание:

 useEffect(() => {
    someFunctionThatReturnsAPromise().then({
            console.log("Before setData");
            setData(dataFromFetch);
            console.log("After setData");
            console.log("Before setLoading");
            setLoading(true);
            console.log("After setLoading");
        }
        );
},[]);




return (
        <div>
            console.log("Hey i rendered");
        </div>
    );

Просмотртак как у меня есть пустой массив зависимостей ([] внутри useEffect), этот useEffect будет запущен только один раз. Мой вопрос:

Видя, как setData вызывает повторный рендеринг компонента, не должно ли, как только код достигнет setData(dataFromFetch);, разве не должно остановиться выполнение? В моем журнале консоли выводится следующее:

Hey i rendered
Before setData
Hey i rendered
After setData
Before setLoading
Hey i rendered
After setLoading

Я ожидал что-то вроде:

Hey i rendered
Before setData
Hey i rendered

Почему выполнение продолжается даже после повторного рендеринга компонента? Куда я могу пойти, чтобы прочитать что-то подобное?

Answer 1

setState добавляется в стек событий javascript и является асинхронным по своей природе, а useEffect полностью выполняется через стек вызовов javascript независимо от других асинхронных функций, добавляемых в конец стека (таких как console.logs и setStates)

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Вот статья о жизненном цикле очереди / javascript, которая может объяснить лучше: https://flaviocopes.com/javascript-event-loop/