[priority: 4] useGameLoop recreates interval every tick due to unstable tick reference #73

New Issue

2026-05-19T09:09:48+02:00

Anexim commented

2026-05-19 09:09:48 +02:00

Severity: 4 — High
File: src/lib/game/stores/gameHooks.ts, lines 17-22

Description:

export function useGameLoop() {
  const tick = useGameStore((s) => s.tick);
  useEffect(() => {
    const interval = setInterval(tick, TICK_MS);
    return () => clearInterval(interval);
  }, [tick]);
}

The tick function is recreated on every state change, causing the useEffect to cleanup and re-run every 200ms. This is wasteful and can cause timing jitter.

Fix: Use getState() inside the interval callback:

useEffect(() => {
  const interval = setInterval(() => useGameStore.getState().tick(), TICK_MS);
  return () => clearInterval(interval);
}, []);

**Severity:** 4 — High **File:** `src/lib/game/stores/gameHooks.ts`, lines 17-22 **Description:** ```ts export function useGameLoop() { const tick = useGameStore((s) => s.tick); useEffect(() => { const interval = setInterval(tick, TICK_MS); return () => clearInterval(interval); }, [tick]); } ``` The `tick` function is recreated on every state change, causing the `useEffect` to cleanup and re-run every 200ms. This is wasteful and can cause timing jitter. **Fix:** Use `getState()` inside the interval callback: ```ts useEffect(() => { const interval = setInterval(() => useGameStore.getState().tick(), TICK_MS); return () => clearInterval(interval); }, []); ```

Anexim added the ai:todo label 2026-05-19 09:09:48 +02:00

n8n-gitea was assigned by Anexim

2026-05-19 09:09:48 +02:00

Anexim commented

2026-05-19 12:53:01 +02:00

Starting work on Issue 73: useGameLoop recreates interval every tick due to unstable tick reference. Fixing to use getState() inside interval callback with empty dependency array.

Anexim closed this issue

2026-05-19 12:56:56 +02:00

Anexim commented

2026-05-19 12:56:56 +02:00

Fixed: Changed useGameLoop to use useEffect with empty dependency array [] and useGameStore.getState().tick() inside the interval callback. This prevents interval recreation on every tick.

Fixed: Changed `useGameLoop` to use `useEffect` with empty dependency array `[]` and `useGameStore.getState().tick()` inside the interval callback. This prevents interval recreation on every tick.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#73