useEffect() timing (pass rate: 9%)react@18.3.1- powered by jser.pro
{...}
import * as React from "react";
import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { 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 = 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 * as React from "react";
import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { 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 = 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.