Zustand Entities

Use Zustand as a simple state store for entity management.

Technique

Store entities in a Zustand store array. Systems read from the store directly (non-reactively) in useFrame, while React components subscribe to the store for re-rendering when entities are added or removed.

Key Concepts

• Not a true ECS, but simple and effective for many cases
• Store entities in an array with create()
• Use getState() in systems for non-reactive access (no re-renders)
• Use useStore(selector) in components for reactive updates
• Memoize entity components to prevent unnecessary re-renders
• Re-renders happen when entities are added/removed from the array

Usage

const useWorldStore = create(() => ({
  characters: [] as CharacterEntity[],
}))

// In systems (non-reactive)
useFrame(() => {
  for (const char of useWorldStore.getState().characters) {
    char.position.x += 0.01
  }
})

// In React (reactive)
const characters = useWorldStore(s => s.characters)
return characters.map(c => <Character key={c.id} entity={c} />)

Trade-offs

• Simple to understand and implement
• No automatic querying - must manually specify which entities to iterate
• Good for smaller games or prototypes

This skill is part of verekia's r3f-gamedev.