Rendering Basics — Series 2

Preview — 3 of 10 questions

Every click causes StaticFooter to re-render too (it's unmemoized). Is this necessarily a performance problem worth fixing?

javascript

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <StaticFooter />
    </>
  );
}

function StaticFooter() {
  return <footer>© 2026 Codejump</footer>;
}

AYes, always — any component re-rendering unnecessarily should be treated as a bug and wrapped in React.memo

BNot necessarily — "re-rendering" means React calls the component function again and compares the resulting output (via the Virtual DOM) to what's already on screen; this comparison itself is comparatively cheap, and since StaticFooter's output never actually changes, React makes zero real DOM writes for it — the only genuinely expensive part of rendering is DOM mutation, which doesn't happen here at all

CYes — every re-render always writes to the real DOM, regardless of whether the output changed, making this a guaranteed performance cost

DNo, because StaticFooter has no props — components without props are automatically skipped by React

Clicking the button re-renders App repeatedly. Does "UserBadge rendered" log again on each click?

javascript

const UserBadge = React.memo(function UserBadge({ name }) {
  console.log('UserBadge rendered');
  return <span>{name}</span>;
});

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <UserBadge name="Alex" />
    </>
  );
}

AYes — React.memo only prevents re-renders triggered by state changes, not by parent re-renders

BNo, but only for the very first click — every subsequent click does cause a re-render

CYes — React.memo has no actual effect unless combined with useMemo inside the child component itself

DNo — React.memo compares the new props against the previous props (here, name="Alex" every time — the exact same string value); since nothing actually changed, React.memo skips calling UserBadge again entirely, even though its parent App re-renders on every click

What kind of performance problem does React.lazy + dynamic import() actually address here?

javascript

const SettingsPage = React.lazy(() => import('./SettingsPage'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <SettingsPage />
    </Suspense>
  );
}

AIt reduces the initial JavaScript bundle size/download — SettingsPage's code is split into a separate chunk that's only fetched when SettingsPage actually needs to render, rather than being bundled into (and downloaded as part of) the app's main initial bundle, even for users who never visit the settings page

BIt makes SettingsPage itself render faster once its code has already been downloaded and executed

CIt reduces the number of re-renders SettingsPage triggers once mounted

DIt automatically compresses SettingsPage's images and CSS for faster loading

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