cf.completefrontend

ConceptMedium

What does this component log on the server with renderToString, and what HTML comes back?

The code
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…