What does this component log on the server with renderToString, and what HTML comes back?
import { useEffect, useLayoutEffect, useState } from "react";
import { renderToString } from "react-dom/server";
function Counter() {
const [count, setCount] = useState(() => {
console.log("initial state");
return 0;
});
console.log("render", count);
useEffect(() => {
console.log("effect");
setCount(1);
}, []);
useLayoutEffect(() => {
console.log("layout effect");
}, []);
return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}
console.log(renderToString(<Counter />));
The answer
Answer it out loud first, the way you would in the interview. Then compare.
Checking your sign-in…