perf upgrade

src/hooks/use-now.ts

@@ -4,15 +4,34 @@ const useNow = () => {
   const [now, setNow] = useState(new Date());
 
   useEffect(() => {
+    const tick = () => {
+      setNow((prev) => {
+        const next = new Date();
+        return Math.floor(prev.getTime() / 1000) === Math.floor(next.getTime() / 1000)
+          ? prev
+          : next;
+      });
+    };
+
     const intervalId = setInterval(() => {
-      setNow(new Date());
+      if (document.hidden) return;
+      tick();
     }, 1000);
 
-    return () => clearInterval(intervalId);
+    const handleVisibilityChange = () => {
+      if (!document.hidden) tick();
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      clearInterval(intervalId);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
   }, []);
 
   return now;
 }
 
 
-export default useNow;
+export default useNow;

src/hooks/use-server-events.ts

@@ -14,6 +14,30 @@ type SSEEvent = {
 
 type EventHandler = (event: SSEEvent, queryClient: ReturnType<typeof useQueryClient>, currentSessionId?: string) => void;
 
+const INVALIDATE_DEBOUNCE_MS = 1500;
+const invalidateTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+function debouncedInvalidate(
+  queryClient: ReturnType<typeof useQueryClient>,
+  filters: { queryKey: readonly unknown[] }
+) {
+  const key = JSON.stringify(filters.queryKey);
+  const existing = invalidateTimers.get(key);
+  if (existing) clearTimeout(existing);
+
+  invalidateTimers.set(key, setTimeout(() => {
+    invalidateTimers.delete(key);
+    queryClient.invalidateQueries(filters);
+  }, INVALIDATE_DEBOUNCE_MS));
+}
+
+function clearPendingInvalidations() {
+  for (const timer of invalidateTimers.values()) {
+    clearTimeout(timer);
+  }
+  invalidateTimers.clear();
+}
+
 const eventHandlers: Record<string, EventHandler> = {
   "connected": () => {
     logger.info("New Connection");
@@ -21,8 +45,8 @@ const eventHandlers: Record<string, EventHandler> = {
   "ping": () => {},
   "heartbeat": () => {},
   "match": (event, queryClient) => {
-    queryClient.invalidateQueries(tournamentQueries.details(event.tournamentId))
-    queryClient.invalidateQueries(tournamentQueries.current())
+    debouncedInvalidate(queryClient, tournamentQueries.details(event.tournamentId))
+    debouncedInvalidate(queryClient, tournamentQueries.current())
   },
   "reaction": (event, queryClient) => {
     queryClient.invalidateQueries(reactionQueries.match(event.matchId));
@@ -104,6 +128,8 @@ export function useServerEvents() {
       logger.info("Closing SSE connection");
       shouldConnectRef.current = false;
 
+      clearPendingInvalidations();
+
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
         timeoutRef.current = null;