Files
pn-new-crm/src/hooks/use-realtime-invalidation.ts

52 lines
1.8 KiB
TypeScript
Raw Normal View History

'use client';
fix(realtime): keep socket through reconnects, stop re-subscribe storm Two correctness bugs in the real-time stack — both silent failures, both session-wide once they trigger. (1) `SocketProvider` was setting the React context to null on every `disconnect` event. socket.io's built-in reconnection re-establishes the underlying transport and replays handlers, but the React tree had already lost its reference to the socket — so every `useSocket()` consumer saw null until a session/port change forced a remount. Effect: after the first transient drop (laptop sleep, wifi blip, server restart), realtime invalidation and toasts went dead session-wide with no user-visible signal. Fix: keep the socket reference stable for the lifetime of the session+port, and surface a separate `isConnected` boolean for any UI that wants to render an offline indicator. Exposed as a new `useIsSocketConnected()` hook; `useSocket()` signature is unchanged. (2) `useRealtimeInvalidation` captured `eventMap` as a useEffect dependency. Every caller passes a fresh `{ ... }` object literal on each render, so the effect re-ran every render → `socket.off`/`socket.on` storm on pages with many subscribed events. Fix: extract the subscription logic into a pure helper (`realtime-invalidation-core.ts`, JSX-free for vitest). The hook now keeps the latest map in a ref and only re-subscribes when the SET of event names changes (joined-keys signature, not object identity). The handler reads `ref.current` at fire time, so callers still see fresh queryKey lists without re-binding. Helper is unit-tested with a stub socket: registration count, fire-time map lookup, cleanup deregistration, missing-event safety. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 23:11:52 +02:00
import { useEffect, useRef } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useSocket } from '@/providers/socket-provider';
fix(realtime): keep socket through reconnects, stop re-subscribe storm Two correctness bugs in the real-time stack — both silent failures, both session-wide once they trigger. (1) `SocketProvider` was setting the React context to null on every `disconnect` event. socket.io's built-in reconnection re-establishes the underlying transport and replays handlers, but the React tree had already lost its reference to the socket — so every `useSocket()` consumer saw null until a session/port change forced a remount. Effect: after the first transient drop (laptop sleep, wifi blip, server restart), realtime invalidation and toasts went dead session-wide with no user-visible signal. Fix: keep the socket reference stable for the lifetime of the session+port, and surface a separate `isConnected` boolean for any UI that wants to render an offline indicator. Exposed as a new `useIsSocketConnected()` hook; `useSocket()` signature is unchanged. (2) `useRealtimeInvalidation` captured `eventMap` as a useEffect dependency. Every caller passes a fresh `{ ... }` object literal on each render, so the effect re-ran every render → `socket.off`/`socket.on` storm on pages with many subscribed events. Fix: extract the subscription logic into a pure helper (`realtime-invalidation-core.ts`, JSX-free for vitest). The hook now keeps the latest map in a ref and only re-subscribes when the SET of event names changes (joined-keys signature, not object identity). The handler reads `ref.current` at fire time, so callers still see fresh queryKey lists without re-binding. Helper is unit-tested with a stub socket: registration count, fire-time map lookup, cleanup deregistration, missing-event safety. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 23:11:52 +02:00
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.
*
fix(realtime): keep socket through reconnects, stop re-subscribe storm Two correctness bugs in the real-time stack — both silent failures, both session-wide once they trigger. (1) `SocketProvider` was setting the React context to null on every `disconnect` event. socket.io's built-in reconnection re-establishes the underlying transport and replays handlers, but the React tree had already lost its reference to the socket — so every `useSocket()` consumer saw null until a session/port change forced a remount. Effect: after the first transient drop (laptop sleep, wifi blip, server restart), realtime invalidation and toasts went dead session-wide with no user-visible signal. Fix: keep the socket reference stable for the lifetime of the session+port, and surface a separate `isConnected` boolean for any UI that wants to render an offline indicator. Exposed as a new `useIsSocketConnected()` hook; `useSocket()` signature is unchanged. (2) `useRealtimeInvalidation` captured `eventMap` as a useEffect dependency. Every caller passes a fresh `{ ... }` object literal on each render, so the effect re-ran every render → `socket.off`/`socket.on` storm on pages with many subscribed events. Fix: extract the subscription logic into a pure helper (`realtime-invalidation-core.ts`, JSX-free for vitest). The hook now keeps the latest map in a ref and only re-subscribes when the SET of event names changes (joined-keys signature, not object identity). The handler reads `ref.current` at fire time, so callers still see fresh queryKey lists without re-binding. Helper is unit-tested with a stub socket: registration count, fire-time map lookup, cleanup deregistration, missing-event safety. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 23:11:52 +02:00
* 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']],
* });
*/
fix(realtime): keep socket through reconnects, stop re-subscribe storm Two correctness bugs in the real-time stack — both silent failures, both session-wide once they trigger. (1) `SocketProvider` was setting the React context to null on every `disconnect` event. socket.io's built-in reconnection re-establishes the underlying transport and replays handlers, but the React tree had already lost its reference to the socket — so every `useSocket()` consumer saw null until a session/port change forced a remount. Effect: after the first transient drop (laptop sleep, wifi blip, server restart), realtime invalidation and toasts went dead session-wide with no user-visible signal. Fix: keep the socket reference stable for the lifetime of the session+port, and surface a separate `isConnected` boolean for any UI that wants to render an offline indicator. Exposed as a new `useIsSocketConnected()` hook; `useSocket()` signature is unchanged. (2) `useRealtimeInvalidation` captured `eventMap` as a useEffect dependency. Every caller passes a fresh `{ ... }` object literal on each render, so the effect re-ran every render → `socket.off`/`socket.on` storm on pages with many subscribed events. Fix: extract the subscription logic into a pure helper (`realtime-invalidation-core.ts`, JSX-free for vitest). The hook now keeps the latest map in a ref and only re-subscribes when the SET of event names changes (joined-keys signature, not object identity). The handler reads `ref.current` at fire time, so callers still see fresh queryKey lists without re-binding. Helper is unit-tested with a stub socket: registration count, fire-time map lookup, cleanup deregistration, missing-event safety. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 23:11:52 +02:00
export function useRealtimeInvalidation(eventMap: EventMap) {
const socket = useSocket();
const queryClient = useQueryClient();
fix(realtime): keep socket through reconnects, stop re-subscribe storm Two correctness bugs in the real-time stack — both silent failures, both session-wide once they trigger. (1) `SocketProvider` was setting the React context to null on every `disconnect` event. socket.io's built-in reconnection re-establishes the underlying transport and replays handlers, but the React tree had already lost its reference to the socket — so every `useSocket()` consumer saw null until a session/port change forced a remount. Effect: after the first transient drop (laptop sleep, wifi blip, server restart), realtime invalidation and toasts went dead session-wide with no user-visible signal. Fix: keep the socket reference stable for the lifetime of the session+port, and surface a separate `isConnected` boolean for any UI that wants to render an offline indicator. Exposed as a new `useIsSocketConnected()` hook; `useSocket()` signature is unchanged. (2) `useRealtimeInvalidation` captured `eventMap` as a useEffect dependency. Every caller passes a fresh `{ ... }` object literal on each render, so the effect re-ran every render → `socket.off`/`socket.on` storm on pages with many subscribed events. Fix: extract the subscription logic into a pure helper (`realtime-invalidation-core.ts`, JSX-free for vitest). The hook now keeps the latest map in a ref and only re-subscribes when the SET of event names changes (joined-keys signature, not object identity). The handler reads `ref.current` at fire time, so callers still see fresh queryKey lists without re-binding. Helper is unit-tested with a stub socket: registration count, fire-time map lookup, cleanup deregistration, missing-event safety. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 23:11:52 +02:00
// Stash the latest map in a ref so handlers always see fresh queryKeys
// without re-subscribing.
const eventMapRef = useRef(eventMap);
eventMapRef.current = eventMap;
fix(realtime): keep socket through reconnects, stop re-subscribe storm Two correctness bugs in the real-time stack — both silent failures, both session-wide once they trigger. (1) `SocketProvider` was setting the React context to null on every `disconnect` event. socket.io's built-in reconnection re-establishes the underlying transport and replays handlers, but the React tree had already lost its reference to the socket — so every `useSocket()` consumer saw null until a session/port change forced a remount. Effect: after the first transient drop (laptop sleep, wifi blip, server restart), realtime invalidation and toasts went dead session-wide with no user-visible signal. Fix: keep the socket reference stable for the lifetime of the session+port, and surface a separate `isConnected` boolean for any UI that wants to render an offline indicator. Exposed as a new `useIsSocketConnected()` hook; `useSocket()` signature is unchanged. (2) `useRealtimeInvalidation` captured `eventMap` as a useEffect dependency. Every caller passes a fresh `{ ... }` object literal on each render, so the effect re-ran every render → `socket.off`/`socket.on` storm on pages with many subscribed events. Fix: extract the subscription logic into a pure helper (`realtime-invalidation-core.ts`, JSX-free for vitest). The hook now keeps the latest map in a ref and only re-subscribes when the SET of event names changes (joined-keys signature, not object identity). The handler reads `ref.current` at fire time, so callers still see fresh queryKey lists without re-binding. Helper is unit-tested with a stub socket: registration count, fire-time map lookup, cleanup deregistration, missing-event safety. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 23:11:52 +02:00
// 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('|');
fix(realtime): keep socket through reconnects, stop re-subscribe storm Two correctness bugs in the real-time stack — both silent failures, both session-wide once they trigger. (1) `SocketProvider` was setting the React context to null on every `disconnect` event. socket.io's built-in reconnection re-establishes the underlying transport and replays handlers, but the React tree had already lost its reference to the socket — so every `useSocket()` consumer saw null until a session/port change forced a remount. Effect: after the first transient drop (laptop sleep, wifi blip, server restart), realtime invalidation and toasts went dead session-wide with no user-visible signal. Fix: keep the socket reference stable for the lifetime of the session+port, and surface a separate `isConnected` boolean for any UI that wants to render an offline indicator. Exposed as a new `useIsSocketConnected()` hook; `useSocket()` signature is unchanged. (2) `useRealtimeInvalidation` captured `eventMap` as a useEffect dependency. Every caller passes a fresh `{ ... }` object literal on each render, so the effect re-ran every render → `socket.off`/`socket.on` storm on pages with many subscribed events. Fix: extract the subscription logic into a pure helper (`realtime-invalidation-core.ts`, JSX-free for vitest). The hook now keeps the latest map in a ref and only re-subscribes when the SET of event names changes (joined-keys signature, not object identity). The handler reads `ref.current` at fire time, so callers still see fresh queryKey lists without re-binding. Helper is unit-tested with a stub socket: registration count, fire-time map lookup, cleanup deregistration, missing-event safety. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-02 23:11:52 +02:00
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]);
}