[priority: 4] Main game component (page.tsx) has 12+ individual store subscriptions causing excessive re-renders #75

New Issue

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

Anexim commented

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

Severity: 4 — High
File: src/app/page.tsx, lines 107-120

Description:
The main ManaLoopGame component subscribes to 12+ different store slices individually:

const day = useGameStore((s) => s.day);
const hour = useGameStore((s) => s.hour);
const initGame = useGameStore((s) => s.initGame);
const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
// ... 8 more

Every game tick updates day/hour, causing this entire component (and all children) to re-render — even if nothing visible changed.

Fix: Use useShallow from Zustand for multi-field subscriptions, and push subscriptions down into child components that actually need them:

import { useShallow } from 'zustand/react/shallow';
const { day, hour } = useGameStore(useShallow(s => ({ day: s.day, hour: s.hour })));

**Severity:** 4 — High **File:** `src/app/page.tsx`, lines 107-120 **Description:** The main `ManaLoopGame` component subscribes to 12+ different store slices individually: ```ts const day = useGameStore((s) => s.day); const hour = useGameStore((s) => s.hour); const initGame = useGameStore((s) => s.initGame); const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades); // ... 8 more ``` Every game tick updates `day`/`hour`, causing this entire component (and all children) to re-render — even if nothing visible changed. **Fix:** Use `useShallow` from Zustand for multi-field subscriptions, and push subscriptions down into child components that actually need them: ```ts import { useShallow } from 'zustand/react/shallow'; const { day, hour } = useGameStore(useShallow(s => ({ day: s.day, hour: s.hour }))); ```

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

n8n-gitea was assigned by Anexim

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

Anexim commented

2026-05-19 13:48:21 +02:00

Starting work on Issue 75: page.tsx has 12+ individual store subscriptions causing excessive re-renders. Using useShallow from Zustand to combine multi-field subscriptions and reduce re-renders.

Starting work on Issue 75: page.tsx has 12+ individual store subscriptions causing excessive re-renders. Using `useShallow` from Zustand to combine multi-field subscriptions and reduce re-renders.

Anexim closed this issue

2026-05-19 13:50:52 +02:00

Anexim commented

2026-05-19 13:50:52 +02:00

Fixed: Used useShallow from Zustand to combine multi-field store subscriptions in page.tsx. Combined day/hour/initGame from useGameStore, prestigeUpgrades/insight/loopInsight from usePrestigeStore, and rawMana/meditateTicks from useManaStore into single subscriptions each. This reduces re-renders caused by individual field subscriptions.

Fixed: Used `useShallow` from Zustand to combine multi-field store subscriptions in `page.tsx`. Combined `day`/`hour`/`initGame` from `useGameStore`, `prestigeUpgrades`/`insight`/`loopInsight` from `usePrestigeStore`, and `rawMana`/`meditateTicks` from `useManaStore` into single subscriptions each. This reduces re-renders caused by individual field subscriptions.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#75