Rendering Basics — Series 3

Preview — 3 of 10 questions

The parent re-renders 20 times but title never changes. "Header rendered" logs 20 times. Is the browser repainting the <h1> 20 times?

javascript

function Header({ title }) {
  console.log('Header rendered');
  return <h1>{title}</h1>;
}

ANo. "Re-render" means React re-runs the component function and produces a new element tree, then diffs it against the previous one. Since the resulting <h1>{title}</h1> is identical, React finds no changes and makes zero DOM mutations — the browser does not repaint. Wasted JS work, but no layout/paint cost

BYes — every re-render forces a full repaint of the subtree

CYes, but only in development

DNo — React skips the function call entirely when props are unchanged

Dashboard re-renders on each tick, and Chart re-renders every time despite React.memo. Why?

javascript

const Chart = React.memo(function Chart({ config }) { /* expensive */ });

function Dashboard() {
  const [tick, setTick] = useState(0);
  return <Chart config={{ color: 'blue' }} />;
}

AReact.memo only works on class components

Bconfig={{ color: 'blue' }} is a new object literal on every Dashboard render. React.memo does a shallow prop comparison, and Object.is(prevConfig, nextConfig) is false for two different object references — so memo always sees "props changed" and re-renders. Hoist the object out, or wrap it in useMemo

CReact.memo needs a second argument to work

DYou must also wrap Chart in useCallback

What does using a random key do to performance and behavior?

javascript

{rows.map((row) => (
  <Row key={Math.random()} row={row} />
))}

AIt improves performance by spreading work across renders

BNothing — random keys are just unusual

CEvery render generates brand-new keys, so React cannot match any row to its previous element. It unmounts every Row and mounts fresh ones on every render — destroying and recreating DOM, losing focus/scroll/local state, and re-running all effects. Use a stable key={row.id}

DIt only affects the first render

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