React useEffect порядок срабатывания
Есть вот такой код
123456789101112131415161718192021222324
import { useState, useEffect } from "react";
export const App = () => {
const [state, setState] = useState(0);
console.log(1);
useEffect(() => {
console.log(2);
}, [state]);
Promise.resolve().then(() => console.log(3));
setTimeout(() => console.log(4), 0);
const onClick = () => {
setState((num) => num + 1);
};
return (
<div>
<button onClick={onClick}>click me</button>
</div>
);
};
При первом рендере в консоль выводится 1 3 4 2
При нажатии на кнопку 1 2 3 4
Вопрос: почему в первом случае useEffect сработал после промиса и таймера а во втором случае до?
Есть еще вот такой пример
12345678910111213141516171819202122
import { useState, useEffect, useLayoutEffect } from "react";
export const App = () => {
const [state, setState] = useState(0);
console.log(1);
useEffect(() => {
console.log(2);
}, [state]);
Promise.resolve().then(() => console.log(3));
setTimeout(() => console.log(4), 0);
useLayoutEffect(() => {
console.log(5);
setState((state) => state + 1);
}, []);
return null;
};
В консоль при первом рендере 1 5 2 1 2 3 4
Я не понимаю логику работы реакта в таких ситуациях. Кто шарит в этом помогите пожалуйста
По дате
По рейтингу
1 (synchronous)
3 (microtask)
4 (macrotask)
2 (useEffect runs after rendering)
1 (synchronous)
2 (useEffect runs after re-render)
3 (microtask)
4 (macrotask)
Видео по теме