Listen for value changes of an Entity

[eriksachse]

In the docs it says ...will re-render when the query results change.
https://github.com/isaac-mason/arancini/tree/main/packages/arancini-react#usequery

But when querying e.g. health props of an entity, it doesn't show until you rerender a component.
CBS

[isaac-mason]

This is the expected behaviour, but I will update the docs to make that clearer! The useQuery hook will re-render only when entities are added to or removed from a query. If a component value is changed/mutated, useQuery won't rerender.

You'd need to do change detection for component values in user-land. There are many ways you could do this. Just some examples:

• If you only need to do this for a small number of components, you could break some conventional entity component system rules around components being purely data. You could, for example, have a component that is a mini reactive store, or have a component that has an "onChange" event emitter.
• You could have a "dirty" component, add that component when the component value changes, and have a query like (e) => e.all('myComponent', 'dirty')
• If you're rendering something like a healthbar, you could just check the health value every frame

I've been apprehensive about doing this in the library itself, I haven't settled on a good approach yet. This may change in future 🙂

[eriksachse]

… You could, for example, have a component that is a mini reactive store, or have a component that has an "onChange" event emitter.

Still stuck with this one 😩
I have this system:

export class ResourcesSystem extends System {
  health = this.singleton("health", { required: true });
  onUpdate(delta) {
    this.health += delta;
  }
}

… adding the Entity:

      <Entity>
        <Component name="health" value={100} />
      </Entity>

And I have a component that queries it and updates a state like this:

…
  const { entities } = useQuery(healthQuery);
  const [health, setHealth] = useState(100);
  useEffect(() => {
    const int = setInterval(() => {
      setHealth(entities[0].health);
    }, 300);
    return () => clearInterval(int);
  }, [entities]);
…

Still, entities[0].health renders 100. Although system updates the health value. But it should query the new value and it's stuck at 100.

[eriksachse]

Seems that the system had a problem 🤖 Singleton is if the Entity just has one Component, right?

If I use…

export class ResourcesSystem extends System {
  health = this.query((e) => e.has("health"));
  onUpdate(delta) {
    for (const health of this.health) {
      health.health += delta;
    }
  }
}

… it seems to update the value, and I can query the correct value.

[isaac-mason]

Sorry for the late response.

Singleton is if the Entity just has one Component, right?

The this.singleton utility queries all entities that have that component, and takes the first.

[isaac-mason]

I think the issue here is that this.singleton doesn't currently work with primitive value components.

On the query changing (an entity matching or unmatching the query), the singleton system field is set to the component value.

Here's a simplified breakdown of what's happening internally:

const entity = {
  health: 100
}

const system = {}

system.health = entity.health

entity.health = 90

console.log(entity.health) // 90
console.log(system.health) // 100