fix(compiler): React Compiler safety triage — 5 categories cleared
Cleared 4 rule buckets (37 violations, including 5 real bugs) and
silenced 1 informational bucket from the Next 16 / react-hooks v7
upgrade. Cleared rules promoted from `warn` back to `error` so new
regressions block CI.
Real bug fixes:
- `interest-contact-log-tab.tsx`: `useMemo` used for side effects
(5 setState calls inside a memo body); converted to `useEffect`.
- `PieChart.tsx`: cumulative `let angle` mutation in a render-phase
`map`; converted to `reduce` so the slice array is built without
re-assignment.
- `documents-hub.tsx`: `useMemo(() => ({ count: 0 }))` used as a
mutable drag counter; converted to `useRef`.
- `notes-list.tsx`: `Date.now()` read during render for note-edit
countdown (impure) → pinned to a `now` state ticked every 30s.
- `onboarding-checklist.tsx` / `user-profile.tsx` /
`user-settings.tsx`: `useEffect(() => void load(), [])` with the
`load` function declared AFTER the effect — relied on hoisting,
trips Compiler's "access before declared" rule. Declared inside
the effect.
Pattern fixes (intentional cache-via-ref → state or layout-effect):
- 6 `ref.current = x` writes during render moved into layout
effects (`use-realtime-invalidation`, `settings-form-card`,
`inbox`).
- 3 `ref.current` reads during render (search totals cache,
scanner file ref) rewritten to backed-by-state.
- `use-is-mobile.ts` rewritten on `useSyncExternalStore` to avoid
the SSR-then-rehydrate setState dance.
- `use-notifications.ts` rewritten to write socket pushes directly
into the React Query cache via `setQueryData`, removing a local
state mirror.
Rule config (`eslint.config.mjs`):
- `react-hooks/purity` → error (was warn, cleared)
- `react-hooks/set-state-in-render` → error (was warn, cleared)
- `react-hooks/immutability` → error (was warn, cleared)
- `react-hooks/refs` → error (was warn, cleared)
- `react-hooks/incompatible-library` → off (informational only)
- `react-hooks/set-state-in-effect` → warn (51 remaining, all the
useEffect→fetch→setState data-fetch pattern; migration to
useQuery tracked in BACKLOG)
Verified: tsc clean, eslint 0 errors / 69 warnings (down from 105),
vitest 1315/1315, next build green.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -148,19 +148,18 @@ What's done (2026-05-12 session — all phases shipped):
|
||||
- ✅ **Tier 2 polish** — surveyed each candidate. `fast-deep-equal` not needed (existing memo comparators work). `use-debounce` package adds no value over the in-tree 13-LOC hook. `@use-gesture/react`, `embla-carousel-react`, `yet-another-react-lightbox`, `react-resizable-panels` all need concrete UX surfaces or product decisions before wiring — added them to the parked list.
|
||||
- ✅ **Pre-commit staged type-check** — `scripts/tsc-staged.mjs` (30-LOC shim) replaces the broken `tsc-files` package (which silently no-ops under pnpm). Pre-commit now runs `tsc -p <temp-config>` against staged ts/tsx in ~3s vs ~22s full-project; type errors caught before they hit CI.
|
||||
|
||||
**React Compiler safety triage (post-Next-16 bump, ~89 new warnings):**
|
||||
**React Compiler safety triage (post-Next-16 bump):**
|
||||
|
||||
The Next 15 → 16 upgrade brought `react-hooks` v7 with React Compiler safety rules. They surfaced ~89 legitimate findings in the existing
|
||||
codebase — categorised:
|
||||
The Next 15 → 16 upgrade brought `react-hooks` v7 with React Compiler safety rules. Initial sweep surfaced ~89 findings; categorical triage status as of 2026-05-12:
|
||||
|
||||
- `react-hooks/set-state-in-effect` (~49) — `setState` directly inside `useEffect`. Sometimes intentional (post-fetch hydration), sometimes a missed `useState` initialiser or derived-state opportunity.
|
||||
- `react-hooks/incompatible-library` (~13) — React Compiler skipped a file because it imports a not-yet-Compiler-safe lib (commonly Zustand, dnd-kit, certain TanStack hooks). No action needed unless we want Compiler to run on that file.
|
||||
- `react-hooks/refs` (~10) — `ref.current` read during render. Always a real bug if it influences the render output; fine if it's just for next-effect's stash.
|
||||
- `react-hooks/immutability` (~7) — mutation of supposedly-immutable values (props, state).
|
||||
- `react-hooks/set-state-in-render` (~5) — `setState` called during the render body, not from a handler/effect.
|
||||
- `react-hooks/purity` (~2) — non-pure call during render.
|
||||
- ✅ `react-hooks/purity` (2 → 0) — promoted to `error`. Cleared by pinning `Date.now()` reads to a `useState`-backed `now` ticker in `notes-list.tsx`.
|
||||
- ✅ `react-hooks/set-state-in-render` (5 → 0) — promoted to `error`. `useMemo` mis-used for side effects in `interest-contact-log-tab.tsx`; converted to `useEffect`.
|
||||
- ✅ `react-hooks/immutability` (7 → 0) — promoted to `error`. Mutable `useMemo` value in `documents-hub.tsx` drag counter → `useRef`. `let angle` mutation in `PieChart.tsx` slice loop → `reduce`. Three "function used before declared" hits (load/loadProfile in admin/onboarding-checklist + settings/user-profile + settings/user-settings) → declared inside the calling `useEffect`.
|
||||
- ✅ `react-hooks/refs` (10 → 0) — promoted to `error`. Three `ref.current = x` writes during render moved into a layout-effect (`use-realtime-invalidation.ts`, `settings-form-card.tsx`, `inbox.tsx`). Three search-related `ref.current` reads during render rewritten to backed-by-state (`command-search.tsx`, `mobile-search-overlay.tsx`). Scan shell's `fileRef.current.files[0]` read replaced with a tracked `currentFile` state.
|
||||
- ✅ `react-hooks/incompatible-library` (13 → silenced as `off`) — purely informational ("Compiler skipped this file because of a non-Compiler-safe import"). No action needed.
|
||||
- ⚠️ `react-hooks/set-state-in-effect` (51 → still warn) — almost entirely the `useEffect → fetch → setState` data-loading pattern in admin-form components. Each call site refactors cleanly to TanStack Query (`useQuery`), but it's per-file mechanical work × ~45 files = focused half-day pass. Two hooks already migrated as templates: `use-is-mobile.ts` (→ `useSyncExternalStore`), `use-notifications.ts` (socket pushes via `queryClient.setQueryData` instead of local state).
|
||||
|
||||
All demoted to `warn` in `eslint.config.mjs` so the dep upgrade isn't gated on cleanup. **Triage as its own pass — ~30–60 min per category. Promote back to `error` once the bucket reaches zero.** Don't blanket-ignore: each warning either points at a real Compiler-incompatibility or a latent re-render bug.
|
||||
**Next pass: data-fetching pattern migration.** Find admin components with `const [data, setData] = useState(null); useEffect(() => { fetch(...).then(setData) }, []);` and replace with `useQuery({ queryKey, queryFn })`. Land sites: every file in `src/components/admin/*` and a handful of dialog flows (smart-archive-dialog, send-document-dialog, etc.) listed in `eslint.config.mjs`. Each is ~10 min of contained refactor; doing 5 a day for a week clears the suite. Promote `set-state-in-effect` to `error` once cleared.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user