useEffect() timing [email protected], [email protected]- powered by jser.pro
{...}
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { screen, fireEvent } from "@testing-library/dom";
function 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 = () => {
console.log(5);
setState((num) => num + 1);
console.log(6);
};
return (
<div>
<button onClick={onClick} data-testid="action">
click me
</button>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
setTimeout(() => {
const action = document.querySelector('[data-testid="action"]');
fireEvent.click(action);
Click the button after 100ms
}, 100);
{...}
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { screen, fireEvent } from "@testing-library/dom";
function 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 = () => {
console.log(5);
setState((num) => num + 1);
console.log(6);
};
return (
<div>
<button onClick={onClick} data-testid="action">
click me
</button>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
setTimeout(() => {
const action = document.querySelector('[data-testid="action"]');
fireEvent.click(action);
Click the button after 100ms
}, 100);
What gets logged in order?

click on the console.log lines to input your answer.