| name | koota |
| description | Use Koota for data-oriented Entity Component System architecture with React bindings. |
Koota ECS
Use Koota for data-oriented Entity Component System architecture with React bindings.
When setting up or undertaking important changes with Koota, fetch the documentations:
https://raw.githubusercontent.com/pmndrs/koota/refs/heads/main/README.md
Technique
Define traits (components) with trait(), create a world, spawn entities with traits, and query entities in systems. Use useQuery to reactively render entities and useTraitEffect to respond to trait changes.
Key Concepts
trait() defines component schemas with default values
world.spawn() creates entities with traits
world.query() finds entities matching traits
useQuery() hook for reactive entity lists in React
useTraitEffect() for responding to trait changes without re-rendering
- Systems are React components that use
useFrame to update entities (they return null, not views)
Usage
const Position = trait({ x: 0, y: 0 })
const IsCharacter = trait()
const world = createWorld()
world.spawn(Position({ x: 1, y: 2 }), IsCharacter)
world.query(Position).updateEach(([position]) => {
position.x += 0.01
})
const characters = useQuery(Position, IsCharacter)
This skill is part of verekia's r3f-gamedev.