Reactively rendering component values

[sigvik]

Hi!

I've managed to display entities reactively with miniplex-react, but what's the recommended way to reactively display a value stored in a component?

For instance if i have an entity with a component called "money" containing an integer, which I wanted to display in the UI and update whenever it changes.

The closest thing I've thought of thus far is to both save a html ref in one component using <ESC.Component>, and the actual integer value in another component, and then running a function to update the contents of the html whenever I also update the integer - or something of the like. But that doesn't sound very elegant compared to the reactivity of <ESC.Entities>, so I'm not sure its intended.

I have a feeling the answer might be obvious, so any pointers in the right direction would be really appreciated. Really enjoying miniplex otherwise and hoping I can get it to work. Thanks!

[sigvik]

Is it possible miniplex and other ECS libraries are intended to work with Three.js or similar rendering libraries, and that for regular react purposes I'm better off sticking to useState and for-loops imitating ECS patterns?

[sigvik]

Found a tentative subpar workaround by using useEntities to trigger rerenders whenever I add an entity to the world, and then making a function that adds and then removes an entity.

function updateUI() {
    const entity = ECS.world.add({
      uiUpdater: true,
    })
    ECS.world.remove(entity)
  }

[linonetwo]

Hi, I find miniplex is very similar to Redux, where it is compared by object reference. So you have to refresh the object reference:

    for (const entity of gameContextQuery) {
      ECS.world.remove(entity);
      ECS.world.add({ ...entity, selectedSkillId: skillId, currentState: 'skillTargeting' });
    }

this works, while the following code is wrong:

// this is wrong
    for (const entity of gameContextQuery) {
      ECS.world.removeComponent(entity, 'selectedSkillId');
      ECS.world.removeComponent(entity, 'currentState');
      ECS.world.removeComponent(entity, 'context');
      ECS.world.addComponent(entity, 'context', true);
      ECS.world.addComponent(entity, 'selectedSkillId', skillId);
      ECS.world.addComponent(entity, 'currentState', 'skillTargeting');
    }

the wrong code will not trigger useEntities and <ECS.Entities in={someQuery}> to react to the change. Because miniplex-react is compare entities by their object reference. If you simply modify its component, then the object reference will not change, so it won't trigger a React rerender.

I spend hours to understand this! And this makes me remember how redux works in 2016, while we soon adapt things like immutablejs or immer to fix this developer experience problem. So I'm not very sure if this is intended @hmans .

[sigvik]

That's a great potential solution too, thanks a lot.