fix: resolve ESLint errors for React compiler rules

- Chat.tsx: replace mutable variable in render IIFE with useMemo+reduce
  to satisfy react-hooks/immutability rule
- ConnectionBanner.tsx: move setState calls into a useCallback to avoid
  synchronous setState in effect body (react-hooks/set-state-in-effect)
- useGateway.ts: suppress set-state-in-effect for legitimate mount init
This commit is contained in:
Nicolas Varrot
2026-02-12 01:42:40 +00:00
parent 375bd102d4
commit 29482e377a
4 changed files with 44 additions and 19 deletions

View File

@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from 'react';
import { useState, useEffect, useRef, useCallback } from 'react';
import { Wifi, Loader2 } from 'lucide-react';
import type { ConnectionStatus } from '../types';
import { useT } from '../hooks/useLocale';
@@ -15,28 +15,31 @@ export function ConnectionBanner({ status }: Props) {
const prevStatus = useRef<ConnectionStatus | null>(null);
const dismissTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
const prev = prevStatus.current;
prevStatus.current = status;
const updateBanner = useCallback((prev: ConnectionStatus | null, current: ConnectionStatus) => {
if (dismissTimer.current) {
clearTimeout(dismissTimer.current);
dismissTimer.current = null;
}
if (status === 'disconnected' || status === 'connecting') {
if (current === 'disconnected' || current === 'connecting') {
if (prev === 'connected') {
setBanner('reconnecting');
}
} else if (status === 'connected' && prev !== null && prev !== 'connected') {
} else if (current === 'connected' && prev !== null && prev !== 'connected') {
setBanner('reconnected');
dismissTimer.current = setTimeout(() => setBanner('hidden'), 3000);
}
}, []);
useEffect(() => {
const prev = prevStatus.current;
prevStatus.current = status;
updateBanner(prev, status);
return () => {
if (dismissTimer.current) clearTimeout(dismissTimer.current);
};
}, [status]);
}, [status, updateBanner]);
if (banner === 'hidden') return null;