react-virtual-checkbox-tree vs react-arborist

// react-arborist: the checkbox is yours to build, and so is the cascade.
import { useCallback, useState } from "react";
import { Tree, type NodeApi } from "react-arborist";

type Item = { children?: Item[]; id: string; name: string };

const data: Item[] = [
  { id: "docs", name: "docs", children: [{ id: "readme", name: "README.md" }, { id: "guide", name: "guide.md" }] },
  {
    id: "src",
    name: "src",
    children: [
      { id: "engine", name: "engine.ts" },
      { id: "ui", name: "ui", children: [{ id: "tree", name: "tree.tsx" }, { id: "row", name: "row.tsx" }] },
    ],
  },
];

/** You write this. It is the part that goes wrong at depth 3. */
function leavesUnder(node: NodeApi<Item>): string[] {
  if (node.isLeaf) return [node.id];
  return (node.children ?? []).flatMap(leavesUnder);
}

function stateOf(node: NodeApi<Item>, checked: Set<string>) {
  const leaves = leavesUnder(node); // walks the whole subtree, on every render
  const n = leaves.filter((id) => checked.has(id)).length;
  if (n === 0) return "unchecked";
  return n === leaves.length ? "checked" : "indeterminate";
}

export default function App() {
  const [checked, setChecked] = useState<Set<string>>(new Set());

  const toggle = useCallback((node: NodeApi<Item>, next: boolean) => {
    setChecked((prev) => {
      const out = new Set(prev);
      for (const id of leavesUnder(node)) {
        if (next) out.add(id);
        else out.delete(id);
      }
      return out;
    });
  }, []);

  return (
    <Tree data={data} height={320} rowHeight={32} width={320}>
      {({ node, style }) => {
        const state = stateOf(node, checked);
        return (
          <div style={style}>
            <input
              aria-label={node.data.name}
              checked={state === "checked"}
              onChange={(event) => toggle(node, event.target.checked)}
              ref={(el) => {
                if (el) el.indeterminate = state === "indeterminate";
              }}
              type="checkbox"
            />
            <span onClick={() => node.toggle()}>{node.data.name}</span>
          </div>
        );
      }}
    </Tree>
  );
}

// react-virtual-checkbox-tree: the cascade is the library.
import { useState } from "react";
import { Tree, type TreeDefinition } from "react-virtual-checkbox-tree";

const data: TreeDefinition = {
  __root__: { id: "__root__", label: "root", children: ["docs", "src"] },
  docs:     { id: "docs", label: "docs", children: ["readme", "guide"] },
  readme:   { id: "readme", label: "README.md" },
  guide:    { id: "guide", label: "guide.md" },
  src:      { id: "src", label: "src", children: ["engine", "ui"] },
  engine:   { id: "engine", label: "engine.ts" },
  ui:       { id: "ui", label: "ui", children: ["tree", "row"] },
  tree:     { id: "tree", label: "tree.tsx" },
  row:      { id: "row", label: "row.tsx" },
};

export default function App() {
  const [checked, setChecked] = useState<string[]>([]);

  return (
    <Tree
      aria-label="Project files"
      checkedItems={checked}
      data={data}
      estimateSize={32}
      height={320}
      onCheck={setChecked}
    />
  );
}