Build Grid Lights | Interview Question

Q: Build Grid Lights

**Target Audience:** Frontend candidates preparing for a machine coding round. Comfortable with React state and props; this question is mostly about timers and effects, explained from zero. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Excerpts come from the runnable solution on this page, and the Verified section quotes timings measured with real timers on React 19.3.1. ## 1. Why This Even Matters — A Story First Think of a stack of plates. You put plates on one at a time; when you clear the stack, you take the *last* one you put down first. Grid Lights is that stack wearing a disguise. Each click puts a light on the stack. When the stack is full, the lights come off top-first, one every 300 milliseconds, like someone lifting a plate on every beat of a metronome. The question looks easy because the rendering is trivial. What

The problem

Question presented to candidate: "Build a small grid of lights, 3 by 3 with the middle cell empty. Clicking a cell turns it on. When every light is on, they should turn off one by one in the reverse of the order they were clicked, one every 300 milliseconds. While they are turning off, clicks should be ignored."

Requirements:

Render the grid from a config array (1 = light, 0 = empty slot); the default is a 3 x 3 ring with a hole in the centre.
Clicking an off light turns it on; clicking a light that is already on does nothing.
When all lights are on, deactivate them in reverse activation order at a fixed 300 ms interval.
Ignore clicks during deactivation; after the last light turns off, the grid accepts clicks again.
Clean up timers if the component unmounts.

What a strong answer should cover:

Storing the activation ORDER as the state (an array of indices) so "is it on" and "which goes off next" are both derived from it.
The deactivation as a stack: last in, first out, one pop per tick.
Timer choice and cleanup: a chained setTimeout per step or one setInterval, cleared on completion and on unmount.
A deactivating flag (or derived phase) that locks input, and why it is needed.
Accessibility: buttons with aria-pressed for on/off, a label per cell, and aria-disabled while locked.

Clarifying questions expected:

"Is the interval fixed at 300 ms, and should the first light go off immediately or after one interval?"
"Can the grid shape change, for example a 4 x 4 config?"
"Should a click during deactivation be ignored, or should it cancel the sequence?"

Code / implementation expected: Yes. A working grid with the timed reverse deactivation; expect questions about timer cleanup.

Grid
Timers
State

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. Comfortable with React state and props; this question is mostly about timers and effects, explained from zero. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Excerpts come from the runnable solution on this page, and the Verified section quotes timings measured with real timers on React 19.3.1.

1. Why This Even Matters — A Story First

Think of a stack of plates. You put plates on one at a time; when you clear the stack, you take the last one you put down first. Grid Lights is that stack wearing a disguise. Each click puts a light on the stack. When the stack is full, the lights come off top-first, one every 300 milliseconds, like someone lifting a plate on eve

The solution is hidden so you can try first

11 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useEffect, useState } from "react";
import Light from "./src/components/Light";
import {
  CONFIG,
  OFF_DELAY_MS,
  activate,
  countLights,
  deactivateLast,
  slotsFrom,
} from "./src/data/lights";

const SLOTS = slotsFrom(CONFIG);
const TOTAL = countLights(CONFIG);

export default function App() {
  // indices, in the order they were turned on
  const [order, setOrder] = useState([]);
  const [deactivating, setDeactivating] = useState(false);

  // One timeout per step: each run turns off ONE
  // light, then the new `order` schedules the next.
  // The cleanup clears a pending timeout, so
  // StrictMode and unmounts cannot leave one behind.
  useEffect(() => {
    if (!deactivating) return;
    if (order.length === 0) {
      setDeactivating(false);
      return;
    }
    const id = setTimeout(() => setOrder(deactivateLast), OFF_DELAY_MS);
    return () => clearTimeout(id);
  }, [deactivating, order]);

  function handleActivate(index) {
    if (deactivating || order.includes(index)) return;
    const next = activate(order, index);
    setOrder(next);
    if (next.length === TOTAL) setDeactivating(true);
  }

  return (
    <main className="lights-app">
      <h1>Grid Lights</h1>
      <p className="hint" data-testid="status" aria-live="polite">
        {deactivating
          ? "Turning off in reverse order..."
          : order.length + " of " + TOTAL + " on"}
      </p>
      <div
        className="grid"
        style={{ gridTemplateColumns: "repeat(" + CONFIG[0].length + ", 1fr)" }}
      >
        {SLOTS.map((slot) => (
          <Light
            key={slot.index}
            slot={slot}
            on={order.includes(slot.index)}
            locked={deactivating}
            onActivate={handleActivate}
          />
        ))}
      </div>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.