Skip to content

Perf-3: Add React.memo to game entity components#9

Draft
snackman wants to merge 2 commits intomainfrom
perf-3-react-memo
Draft

Perf-3: Add React.memo to game entity components#9
snackman wants to merge 2 commits intomainfrom
perf-3-react-memo

Conversation

@snackman
Copy link
Owner

@snackman snackman commented Mar 3, 2026

Summary

  • Wrap all 10 game entity components with React.memo
  • Custom comparators for moving entities (Customer checks 19 fields)
  • Memoize filtered arrays in GameBoard.tsx
  • Target: reduce re-renders from ~150+/tick to only changed entities

Test plan

  • All customer visual states render correctly
  • All power-up types display correctly
  • Boss battles function correctly
  • Floating scores/stars animate properly
  • Window resize triggers proper re-renders

🤖 Generated with Claude Code

snackman and others added 2 commits March 2, 2026 16:45
Wrap all 10 game entity components with React.memo to prevent
unnecessary re-renders during the 50ms game loop tick:

Tier 1 (default memo - primitive props):
- FloatingScore, FloatingStar, PizzaSliceStack

Tier 2 (custom comparators - object props with new refs every tick):
- Customer (19 visual state fields), PowerUp, DroppedPlate

Tier 3 (custom comparators - complex state):
- PizzaSlice, EmptyPlate, Boss (with minion array), PepeHelpers

Also memoize filtered floating scores/stars arrays in GameBoard.tsx
with useMemo to avoid creating new arrays on every render.

Target: reduce re-renders per tick from ~150+ to only changed entities.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant