Deeper Dive Into ReactDDIR

React quiz - time slicing

React internally has timeout for the rendering of each unit of work.

time slicing (pass rate: 42%)react@18.3.1
{...}
import * as React from "react";
import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
function App() {
const [state] = useState(0);
console.log(1);
const start = Date.now();
while (Date.now() - start < 50) {
window.timestamp = Date.now();
}
useEffect(() => {
console.log(2);
}, [state]);
Promise.resolve().then(() => {
console.log(3);
});
setTimeout(() => {
console.log(4);
}, 0);
return null;
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
{...}
import * as React from "react";
import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
function App() {
const [state] = useState(0);
console.log(1);
const start = Date.now();
while (Date.now() - start < 50) {
window.timestamp = Date.now();
}
useEffect(() => {
console.log(2);
}, [state]);
Promise.resolve().then(() => {
console.log(3);
});
setTimeout(() => {
console.log(4);
}, 0);
return null;
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
What gets logged in order?

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