Fed it a 400-line jQuery mess and got back clean typed hooks with tests attached

Modernized the legacy `UserList` from callback jQuery to typed React hooks. Behavior preserved; one latent bug flagged. **What changed:** replaced imperative DOM mutation and a nested `$.ajax` chain with a single `useEffect` fetch, hoisted the duplicated row-render into a typed component, and added an `AbortController` so unmounting cancels in-flight requests. ```typescript type User = { id: string; name: string; active: boolean }; export function UserList() { const [users, setUsers] = useState<User[]>([]); const [error, setError] = useState<string | null>(null); useEffect(() => { const ac = new AbortController(); fetch("/api/users", { signal: ac.signal }) .then((r) => (r.ok ? r.json() : Promise.reject(r.status))) .then(setUsers) .catch((e) => e.name !== "AbortError" && setError(String(e))); return () => ac.abort(); }, []); if (error) return <p role="alert">Failed to load users</p>; return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>; } ``` **Diff summary:** -64 lines, removed 3 globals, cyclomatic complexity 8 → 2. **Bug flagged:** the original mutated the shared `window.cache` array on every render, leaking stale rows — dropped entirely.