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:
@@ -123,15 +123,16 @@ export function CommandSearch() {
|
||||
// populated when the user narrows to a single bucket. Without this, the
|
||||
// narrowed query only returns counts for the active bucket and every
|
||||
// other chip would vanish — making it impossible to swap between
|
||||
// filters without clearing back to "All" first.
|
||||
const lastAllTotalsRef = useRef<SearchResults['totals'] | null>(null);
|
||||
// filters without clearing back to "All" first. Backed by state (not
|
||||
// a ref) so render reads are pure — React Compiler-safe.
|
||||
const [lastAllTotals, setLastAllTotals] = useState<SearchResults['totals'] | null>(null);
|
||||
useEffect(() => {
|
||||
if (activeBucket === 'all' && results?.totals) {
|
||||
lastAllTotalsRef.current = results.totals;
|
||||
setLastAllTotals(results.totals);
|
||||
}
|
||||
}, [activeBucket, results]);
|
||||
const chipTotals: SearchResults['totals'] | undefined =
|
||||
activeBucket === 'all' ? results?.totals : (lastAllTotalsRef.current ?? results?.totals);
|
||||
activeBucket === 'all' ? results?.totals : (lastAllTotals ?? results?.totals);
|
||||
|
||||
const showDropdown = focused;
|
||||
|
||||
|
||||
@@ -93,15 +93,16 @@ export function MobileSearchOverlay({ open, onOpenChange }: MobileSearchOverlayP
|
||||
// Persist counts from the last "all" query so chip counts stay visible
|
||||
// when the user narrows to a single bucket. Narrowed queries only
|
||||
// return counts for the active bucket, which would otherwise wipe the
|
||||
// counts off every other chip the moment the user taps one.
|
||||
const lastAllTotalsRef = useRef<SearchResults['totals'] | null>(null);
|
||||
// counts off every other chip the moment the user taps one. Backed
|
||||
// by state, not a ref, so render reads are pure (Compiler-safe).
|
||||
const [lastAllTotals, setLastAllTotals] = useState<SearchResults['totals'] | null>(null);
|
||||
useEffect(() => {
|
||||
if (activeBucket === 'all' && results?.totals) {
|
||||
lastAllTotalsRef.current = results.totals;
|
||||
setLastAllTotals(results.totals);
|
||||
}
|
||||
}, [activeBucket, results]);
|
||||
const chipTotals: SearchResults['totals'] | undefined =
|
||||
activeBucket === 'all' ? results?.totals : (lastAllTotalsRef.current ?? results?.totals);
|
||||
activeBucket === 'all' ? results?.totals : (lastAllTotals ?? results?.totals);
|
||||
|
||||
// Auto-focus is delegated to Vaul's `autoFocus` + the input's
|
||||
// `autoFocus` attribute (synchronous in-gesture, which iOS Safari
|
||||
|
||||
Reference in New Issue
Block a user