cf.completefrontend

Predict the outputHard

What does this component log when its layout effect sets state?

The useEffect is written above the useLayoutEffect. Neither has a dependency array, and the layout effect sets width once, the way a measurement would. The app isn't in Strict Mode.

What does it log, and what does the page show?
import { useEffect, useLayoutEffect, useState } from "react";
 
export default function App() {
  const [width, setWidth] = useState(0);
  console.log("render", width);
 
  useEffect(() => {
    console.log("effect", width);
  });
 
  useLayoutEffect(() => {
    console.log("layout effect", width);
    if (width === 0) setWidth(120);
  });
 
  return <p>Width: {width}</p>;
}

It runs in development, rendered as <App />.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…