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:
2026-05-12 23:14:16 +02:00
parent ba1db2afea
commit 4329db7fc3
17 changed files with 208 additions and 166 deletions

View File

@@ -1,6 +1,6 @@
'use client';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { formatDistanceToNow } from 'date-fns';
import { Lock, Pencil, Trash2, Send, Loader2 } from 'lucide-react';
@@ -128,6 +128,15 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
const [editingId, setEditingId] = useState<string | null>(null);
const [editContent, setEditContent] = useState('');
const [groupBySource, setGroupBySource] = useState(false);
// Wall-clock 'now' ticked every 30s so the per-note "Xm left to edit"
// countdown decrements on screen. Reading `Date.now()` directly inside
// render is impure (different value every call); pinning to a state
// value means React Compiler can memoize cleanly.
const [now, setNow] = useState(() => Date.now());
useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 30_000);
return () => clearInterval(id);
}, []);
const aggregateOn = !!aggregate && AGGREGATABLE.has(entityType);
const baseEndpoint = `/api/v1/${entityType}/${entityId}/notes`;
@@ -179,12 +188,12 @@ export function NotesList({ entityType, entityId, currentUserId, aggregate }: No
// owning entity's timeline records the change.
const selfSource = SELF_SOURCE[entityType];
if (aggregateOn && note.source && note.source !== selfSource) return false;
const elapsed = Date.now() - new Date(note.createdAt).getTime();
const elapsed = now - new Date(note.createdAt).getTime();
return elapsed < NOTE_EDIT_WINDOW_MS;
}
function getTimeRemaining(note: Note): string | null {
const elapsed = Date.now() - new Date(note.createdAt).getTime();
const elapsed = now - new Date(note.createdAt).getTime();
const remaining = NOTE_EDIT_WINDOW_MS - elapsed;
if (remaining <= 0) return null;
const mins = Math.ceil(remaining / 60000);