[HIGH] React Hooks Dependency Violations Causing Stale State #143
Description
Summary
ESLint exhaustive-deps rule is disabled, hiding critical dependency bugs that cause stale closures and unnecessary RPC calls.
Affected Files
src/hooks/useBoard.ts:274-275, 324-325src/hooks/useCraps.ts:133-134
Problem Code
// useBoard.ts line 274 const fetchBoard = useCallback(async (force = false) => { // Uses round, board, MIN_POLL_INTERVAL from outer scope // But dependencies are empty! }, []); // eslint-disable-next-line react-hooks/exhaustive-deps // useBoard.ts line 324 useEffect(() => { // Uses fetchBoard, getTimeRemaining which depend on state // But only network is in dependencies! }, [network]); // eslint-disable-next-line react-hooks/exhaustive-depsImpact
- Severity: High
fetchBoardalways sees INITIAL value ofround(null)- Causes unnecessary RPC calls (always thinks round needs fetching)
- Adaptive polling doesn't work (sees stale
getTimeRemaining) - Rate limiting defeated by stale
backoffRefin recursive setTimeout
Proposed Fix
Option 1: Use refs for polling state
const roundRef = useRef<RoundState | null>(null); useEffect(() => { roundRef.current = round; }, [round]); const fetchBoard = useCallback(async (force = false) => { const needsRoundFetch = lastRoundIdRef.current !== roundId || roundRef.current === null; // ... }, []); // Now safe - only depends on refsOption 2: Proper dependency arrays
const fetchBoard = useCallback(async (force = false) => { // implementation }, [round, MIN_POLL_INTERVAL]); useEffect(() => { // polling logic }, [network, fetchBoard, getTimeRemaining]);Labels
bug, react, high-priority, p1