diff --git a/src/hooks/useWebSocket.ts b/src/hooks/useWebSocket.ts index ef8a010f..d8efe0c5 100644 --- a/src/hooks/useWebSocket.ts +++ b/src/hooks/useWebSocket.ts @@ -50,26 +50,38 @@ export const useWebSocket = ({ const transportRef = useRef(null); const channelRef = useRef(null); + // Stabilize parse/serialize callbacks to prevent reconnect thrashing + const parseRef = useRef(parse); + const serializeRef = useRef(serialize); + + useEffect(() => { + parseRef.current = parse; + }, [parse]); + + useEffect(() => { + serializeRef.current = serialize; + }, [serialize]); + const canUseWindow = typeof window !== 'undefined'; const safeParse = useCallback( (raw: string): TMessage => { - if (parse) { - return parse(raw); + if (parseRef.current) { + return parseRef.current(raw); } return JSON.parse(raw) as TMessage; }, - [parse], + [], ); const safeSerialize = useCallback( (message: TMessage): string => { - if (serialize) { - return serialize(message); + if (serializeRef.current) { + return serializeRef.current(message); } return JSON.stringify(message); }, - [serialize], + [], ); const cleanup = useCallback(() => { @@ -132,7 +144,7 @@ export const useWebSocket = ({ return () => { cleanup(); }; - }, [canUseWindow, cleanup, connectionName, enabled, localChannelKey, reconnectDelayMs, roomId, safeParse, url]); + }, [canUseWindow, cleanup, connectionName, enabled, localChannelKey, reconnectDelayMs, roomId, url]); const status: ConnectionStatus = parseFailed ? 'error'