Performance Expert — Series 3

Preview — 3 of 10 questions

What does "use no memo" do, and when is it appropriate?

javascript

function Chart(props) {
  "use no memo";
  // this component mutates a shared cache during render (breaks the Rules of React)
}

AIt tells the React Compiler to skip transforming this specific component (or hook), leaving it exactly as written. It is an escape hatch for code the compiler would otherwise miscompile or that already fails an eslint-plugin-react-hooks / Rules of React check — a temporary marker while you fix the underlying violation, not a permanent choice

BIt disables all memoization app-wide

CIt forces the component to re-render on every state change

DIt is required on every component for the compiler to work

ExpensiveChild is not memoized. Does it re-render on each click? What about the children-passing version?

javascript

function Parent() {
  const [n, setN] = useState(0);
  const stableChild = <ExpensiveChild />;   // created once? no — each render
  return <div onClick={() => setN(n + 1)}>{stableChild}</div>;
}

AIt never re-renders because it has no props

BIt re-renders only in development

CHere it does re-render: <ExpensiveChild /> is a new element object created during each Parent render (the local variable does not change that), so React reconciles it and re-runs the component. React's bail-out (bailoutOnAlreadyFinishedWork) only skips a subtree when the element reference is identical to the previous render — which happens when the element is passed in as children/props from a component that did not re-render, or when the component is wrapped in React.memo and props are shallow-equal

DIt re-renders twice per click

Mechanically, how does React know which useState call corresponds to a vs b across renders?

javascript

function Widget() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
  useEffect(() => {}, []);
}

ABy the variable names a and b

BEach hook call appends a node to a linked list stored on the component's fiber (fiber.memoizedState). On every render React walks that list in order, returning the next node's state for each successive hook call. Identity is purely positional — call order must be identical every render, which is exactly why conditional hooks corrupt the mapping

CBy a hash of the initial value

DBy the order they are defined in the source file, resolved at build time

Answer all 10 questions (7 more), see explanations for every answer, and track your score.