"Build a dynamic grid" is an open machine-coding prompt — the interviewer watches your component structure, state modeling, and React fundamentals. Common variants: a grid whose size is configurable, cells that toggle on click, a "light box" puzzle, Conway's Game of Life.

Model the state first

Decide your data shape before writing JSX:

// Option A: 1D array, index = row * cols + col  (simple, fast)
const [cells, setCells] = useState<boolean[]>(() => Array(rows * cols).fill(false));

// Option B: 2D array  (intuitive, but harder to update immutably)
const [grid, setGrid] = useState<boolean[][]>(...);

1D is usually cleaner for updates. Keep rows/cols as their own state, driven by inputs.

Drive the layout from the variable

<div
  className="grid"
  style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}
>
  {cells.map((on, i) => (
    <button
      key={i}
      className={on ? "cell cell--on" : "cell"}
      onClick={() => toggle(i)}
      aria-pressed={on}
    />
  ))}
</div>

.grid { display: grid; gap: 2px; }
.cell { aspect-ratio: 1; border: 1px solid #ccc; }

CSS Grid + grid-template-columns: repeat(N, 1fr) from state is the cleanest dynamic-grid mechanism.

Update immutably

function toggle(i: number) {
  setCells((prev) => {
    const next = [...prev];      // copy — never mutate prev
    next[i] = !next[i];
    return next;
  });
}

Use the functional updater so it's correct under batching, and copy before writing.

Controlled configuration

<input type="number" value={rows} onChange={(e) => setRows(+e.target.value)} />

Resizing should re-initialize the cells array (a useEffect on [rows, cols], or derive size into a key).

Things the interviewer is checking

• State shape — did you pick something easy to update immutably?
• Immutability — copy, don't mutate; functional updater.
• Keys — stable (i is acceptable here since cells aren't reordered).
• Layout — Grid driven by a variable, not hardcoded.
• Accessibility — cells are <button>s, aria-pressed, keyboard-operable.
• Performance — for large grids, each toggle re-renders the whole grid. Mention React.memo on the cell, or useReducer, and that for very large grids you'd virtualize or move to canvas.

Common follow-ups

• "Now make cells toggle their neighbors" (lights-out puzzle).
• "Add Game of Life rules" — a tick function over the array.
• "10,000 cells — it's slow" — memoize cells, or canvas, or virtualize.

Senior framing

The senior approach is state-shape-first: choose a representation that makes the required updates trivial and immutable, derive the layout and rendering from it, and proactively name the re-render cost on large grids with concrete mitigations (memo, reducer, virtualization, canvas). Jumping straight to JSX without modeling state is the junior tell.