Fix max update depth crash on Infrastructure page
CI / build-and-push (push) Successful in 34s

ToastContainer's useEffect had `seen` (a Set state) in its dependency
array — each setSeen created a new Set, re-fired the effect, and under
rapid notifications cascaded past React's 50-update limit. Replaced
with a ref since seen doesn't need to trigger re-renders.

Also added useShallow to DataCenterCard's pipeline selector to prevent
.filter() from causing spurious re-renders on unrelated store changes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-24 20:29:54 -04:00
parent 24278297f0
commit a36617f9e3
2 changed files with 8 additions and 11 deletions
+3 -2
View File
@@ -1,6 +1,7 @@
import { useState } from 'react';
import { useState, useMemo } from 'react';
import { Plus, Server, MapPin, Zap, HardDrive, Wrench, ChevronDown, ChevronUp, Thermometer, Shield, X } from 'lucide-react';
import { useGameStore } from '@/store';
import { useShallow } from 'zustand/shallow';
import {
formatMoney, formatNumber, formatPercent,
LOCATION_CONFIGS, DC_TIER_CONFIGS, RACK_SKU_CONFIGS,
@@ -105,7 +106,7 @@ function CapacityBar({ label, used, max, unit, icon: Icon }: {
function DataCenterCard({ dcId }: { dcId: string }) {
const dc = useGameStore((s) => s.infrastructure.dataCenters.find(d => d.id === dcId))!;
const pipelineForDc = useGameStore((s) => s.infrastructure.rackPipeline.filter(o => o.dataCenterId === dcId));
const pipelineForDc = useGameStore(useShallow((s) => s.infrastructure.rackPipeline.filter(o => o.dataCenterId === dcId)));
const money = useGameStore((s) => s.economy.money);
const era = useGameStore((s) => s.meta.currentEra);
const completedResearch = useGameStore((s) => s.research.completedResearch);