A file browser ships on Friday. On Monday a PM files a ticket: “users can't select an entire folder — they have to tick every file one by one, which defeats the widget.” The engineer opens the component expecting a bug. There isn't one. The state is just a Set<string> that flips whichever id you toggle. It works for flat options (“favorite fruits?”), but stuffed into a tree, it's inert.

Below is the widget. Click the “Documents” folder and see what happens to the files inside. Then tick every file by hand and see what happens to “Documents”. Both probes reveal the same silent truth: the flat Set has no concept of a family.

Live tree · flat Set<string>all empty
The flat version · shipped as-is
1
// The flat version every first-pass ships.
2
// No parent-child relationship. Every checkbox independent.
3
function BrokenTreeSelect({ items }) {
4
  const [checked, setChecked] = useState(new Set());
5
  const toggle = (id) => {
6
    const next = new Set(checked);
7
    next.has(id) ? next.delete(id) : next.add(id);
8
    setChecked(next);
9
  };
10
  return (
11
    <ul>
12
      {items.map((item) => (
13
        <li key={item.id}>
14
          <input
15
            type="checkbox"
16
            checked={checked.has(item.id)}
17
            onChange={() => toggle(item.id)}
18
          />
19
          {item.label}
20
        </li>
21
      ))}
22
    </ul>
23
  );
24
}
25
26
// What breaks:
27
//   1. Clicking "Documents" checks only the "Documents" row.
28
//      No cascade to its files.
29
//   2. Checking every file doesn't nudge "Documents" toward ticked.
30
//   3. No concept of "some selected" — the parent either ticks (false)
31
//      or doesn't. The middle state is invisible.
32
//   4. "Select all" needs a loop over every leaf. "Clear" needs
33
//      another. The parent checkbox is dead weight.
Step 1 / 3 · Probe: tick the folder

Tick the “Documents” folder in the tree above. Watch the three files sitting below it. Before you peek — what do you expect?

probe
down
up
residue