Expert Mastery — Series 3

Preview — 3 of 10 questions

Why does this hook exist instead of useState + useEffect?

javascript

function useWindowWidth() {
  return useSyncExternalStore(
    (cb) => { window.addEventListener('resize', cb); return () => window.removeEventListener('resize', cb); },
    () => window.innerWidth,
    () => 1024, // server snapshot
  );
}

AIt lets a component subscribe to an external (non-React) store in a way that is safe under concurrent rendering: React reads getSnapshot at consistent points and forces a synchronous re-render if the store changed mid-render, preventing tearing (different parts of the UI showing different values of the same store). The third argument supplies a value for SSR/hydration

BIt is a faster version of useEffect

CIt replaces Redux entirely

DIt only works for localStorage

Why does a React element carry a Symbol $$typeof field?

javascript

const element = <div />;
console.log(element.$$typeof); // Symbol(react.element)

AFor DevTools labeling only

BAs an XSS mitigation: a Symbol cannot survive JSON.parse/JSON.stringify or come from a network payload, so if user-provided data is ever passed where React expects an element, it will lack the real Symbol(react.element) and React refuses to render it as an element — blocking an attacker from injecting a fake element object (e.g. one with a dangerous dangerouslySetInnerHTML prop) through JSON

CTo make elements comparable with ===

DIt stores the component's display name

Why is this genuinely dangerous in concurrent React, beyond being bad style?

javascript

let renderCount = 0;
function Widget() {
  renderCount++;                       // side effect in render body
  window.__lastRender = Date.now();    // another one
  return <span>{renderCount}</span>;
}

AIt is fine — render runs exactly once per update

BIt only breaks in StrictMode

CConcurrent React may start rendering a component, pause, and either resume or throw the work away (e.g. a higher-priority update arrives). A render can also be run speculatively for useDeferredValue/transitions. So renderCount can be incremented for renders that never commit, and window.__lastRender reflects abandoned work — the observable state diverges from what the user sees

DIt causes a memory leak specifically

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