Memoization

Preview — 3 of 10 questions

What is the correct use case for each hook?

javascript

function DataTable({ rows, onRowClick }) {
  // Which is correct?
  const sortedRows = useMemo(
    () => [...rows].sort((a, b) => a.value - b.value),
    [rows]
  );

  const handleRowClick = useCallback(
    (id) => { onRowClick(id); },
    [onRowClick]
  );

  return <Table rows={sortedRows} onRowClick={handleRowClick} />;
}

AuseMemo memoizes a computed VALUE (sortedRows); useCallback memoizes a FUNCTION reference (handleRowClick) — both are correct here

BUse useCallback for sorted rows and useMemo for the click handler

CBoth should use useMemo

DNeither is needed — React handles memoization automatically

How do you identify wasted renders with the Profiler?

javascript

Profiler flame graph:
  ProductList [gray]          ← no re-render (memoized)
    ProductCard × 20 [yellow] ← some rendered
      ProductCard #3 [orange] ← render took 12ms (highlighted)
      ProductCard #5 [orange]

AGray components wasted renders; colored components were efficient

BAll colored components need immediate optimization

CGray = component did NOT re-render (React.memo worked); colored = component DID re-render; deeper orange = more time spent; "wasted" renders are colored components that produced identical output

DThe Profiler cannot distinguish between necessary and wasted renders

What is the key principle behind virtualization?

javascript

import { FixedSizeList } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";

function VirtualList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>  {/* style is REQUIRED for positioning */}
      <ItemRow item={items[index]} />
    </div>
  );

  return (
    <AutoSizer>
      {({ height, width }) => (
        <FixedSizeList
          height={height}
          width={width}
          itemCount={items.length}
          itemSize={60}
        >
          {Row}
        </FixedSizeList>
      )}
    </AutoSizer>
  );
}

AVirtualization renders all items but uses CSS display:none for hidden ones

BitemSize must match the actual rendered height — any mismatch breaks virtualization

CVirtualization only renders items visible in the viewport (+ a small overscan buffer) — as the user scrolls, items leaving the viewport are removed from DOM and new ones are mounted; constant DOM size regardless of list length

DVirtualization is only needed for lists with more than 10,000 items

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