Matt
4329db7fc3
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>
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
|
|
import { useSocket } from '@/providers/socket-provider';
|
|
import { subscribeRealtimeInvalidations, type EventMap } from '@/hooks/realtime-invalidation-core';
|
|
|
|
// Re-export for convenience so callers don't need to know about the split.
|
|
export type { EventMap, SocketLike } from '@/hooks/realtime-invalidation-core';
|
|
|
|
/**
|
|
* Subscribes to socket events and invalidates React Query caches.
|
|
*
|
|
* Safe to call with an inline-literal `eventMap` - the hook only re-subscribes
|
|
* when the SET of event keys actually changes (not when the object identity
|
|
* changes). The latest query-key list is read at event fire-time via a ref.
|
|
*
|
|
* @example
|
|
* useRealtimeInvalidation({
|
|
* 'client:created': [['clients']],
|
|
* 'client:updated': [['clients'], ['clients', clientId]],
|
|
* 'client:archived': [['clients']],
|
|
* });
|
|
*/
|
|
export function useRealtimeInvalidation(eventMap: EventMap) {
|
|
const socket = useSocket();
|
|
const queryClient = useQueryClient();
|
|
|
|
// Stash the latest map in a ref so handlers always see fresh queryKeys
|
|
// without re-subscribing. Writing to ref.current during render trips
|
|
// the React Compiler purity rules; the equivalent layout-effect
|
|
// wiring runs synchronously after commit and is Compiler-safe.
|
|
const eventMapRef = useRef(eventMap);
|
|
useEffect(() => {
|
|
eventMapRef.current = eventMap;
|
|
});
|
|
|
|
// Re-subscribe ONLY when the set of event names changes. Object identity
|
|
// of `eventMap` flips on every caller render; the joined key signature
|
|
// doesn't.
|
|
const eventKeysSig = Object.keys(eventMap).sort().join('|');
|
|
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
// eventMapRef is intentionally not in deps - it's a ref; we only want to
|
|
// re-run when the socket, queryClient, or the event-key SET changes.
|
|
return subscribeRealtimeInvalidations(
|
|
socket,
|
|
eventKeysSig.length > 0 ? eventKeysSig.split('|') : [],
|
|
queryClient,
|
|
() => eventMapRef.current,
|
|
);
|
|
}, [socket, queryClient, eventKeysSig]);
|
|
}
|