Classic React coding question — tests state, ordering, and timing.

Spec recap

• 3x3 grid (or NxN).
• Click an unlit cell → it lights up.
• Track activation order.
• Once all N cells are lit, deactivate them one-by-one (e.g. every 300ms) in reverse activation order.
• Clicking a lit cell during activation phase: typically ignored.

Implementation

import { useState, useEffect } from 'react';

const N = 9;

export function LightGrid() {
  const [active, setActive] = useState<number[]>([]);
  const [deactivating, setDeactivating] = useState(false);

  function onClick(i: number) {
    if (deactivating) return;
    if (active.includes(i)) return;
    setActive((prev) => [...prev, i]);
  }

  useEffect(() => {
    if (active.length !== N) return;
    setDeactivating(true);
    const id = setInterval(() => {
      setActive((prev) => {
        const next = prev.slice(0, -1);          // pop last
        if (next.length === 0) {
          clearInterval(id);
          setDeactivating(false);
        }
        return next;
      });
    }, 300);
    return () => clearInterval(id);
  }, [active.length]);

  return (
    <div className="grid grid-cols-3 gap-2">
      {Array.from({ length: N }, (_, i) => (
        <button
          key={i}
          onClick={() => onClick(i)}
          disabled={deactivating}
          className={
            'h-16 w-16 rounded border ' +
            (active.includes(i) ? 'bg-green-500' : 'bg-gray-200')
          }
        />
      ))}
    </div>
  );
}

Walk-through

• active is the ordered list of activated cell indices.
• onClick: add if not present and not deactivating.
• When active.length === N, kick off deactivation interval.
• Each tick pops from the end (reverse activation order).
• Clean up interval on unmount and when the array empties.

Edge cases / interview probes

• Double-click: ignored (includes guard).
• Unmount mid-deactivation: cleanup clears interval.
• Variable grid size: parametrize N.
• Animate the light fade: add CSS transition on the bg color; transition-colors duration-200.
• Pause on hover: clear interval on onMouseEnter, restart on leave (extra credit).
• What if user clicks before all 9 fill? Just adds to active.

Variations interviewers ask

• Reverse with delay reuse (use the time intervals between activations).
• Re-activatable after full cycle.
• N×M grid with different N.
• Animation per cell with transition end events.

Anti-patterns

• Tracking active as a Set — loses order.
• Setting state inside the effect's cleanup function.
• Using a single useState for both array and flag (couples them).

Interview framing

"Array of activated cell ids in state — keeps order. onClick guards against double-add and against clicking during deactivation. Effect watches active.length; when it reaches N, kick off a setInterval that pops the last element each tick (reverse order). Cleanup clears the interval on unmount and when the array empties. Add a deactivating flag to disable clicks during the deactivation phase. The key is using an array (preserves order) not a Set, and putting deactivation in an effect so cleanup is automatic."