useQuery is not stable

[DanAmador]

Good day.

I recently found out that a useQuery used in a hook I was trying to debug kept being triggered even though the objects weren't changing which caused an infinite loop used in a useEffect

export const Object3DTrait = trait({ ref: new Object3D() });
export const SelectableTrait = trait();
export const SelectedTrait = trait();

  const selectedEntities = useQuery(Object3DTrait, SelectableTrait, SelectedTrait);
  const selectedEntityModels = useMemo((): Object3D[] => {
    const selection = selectedEntities
      .map((entity: Entity) => entity.get(Object3DTrait)?.ref)
      .filter(Boolean) as Object3D[];
    return selection;
  }, [selectedEntities]);

I currently found a work around by creating a stable immutable query hook

export function useStableQuery<T extends QueryParameter[]>(...parameters: T): Entity[] {
  const world = useWorld();
  const [entities, setEntities] = useState<Entity[]>(() => [...world.query(...parameters)]);

  useEffect(() => {

    const update = () => {
      const newResults = [...world.query(...parameters)];
      setEntities(newResults);
    };


    update();


    const unsubAdd = world.onAdd(parameters, () => {
      update();
    });

    const unsubRemove = world.onRemove(parameters, () => {
      update();
    });

    return () => {
      unsubAdd();
      unsubRemove();
    };

  }, [world, ...parameters]);

  return entities;
}

[krispya]

Thanks for reporting! I am going to try to reproduce but if you are able to help by creating a sandbox it would speed things up.

[krispya]

To be honest, I can't recall why I wrote useQuery to guard against generating new arrays so much when that is likely not what is causing GC issues. Could you PR this and I'll review from there?

[DanAmador]

Hello there again.

By PR this do you mean replace the useQuery with my current implementation or should I add the useStableQuery ?

I'll probably get some time tomorrow to try and replicate a minimum sandbox and send it to you.

[krispya]

Replace useQuery with your version. And then I can try to get a test working once you can show me how to replicate.

[DanAmador]

Weird.

I managed to get a minimum example of my setup

But it seems to be stable here.

The biggest major difference is that I'm merging two sources together in my code

const selectedPartModels = useMemo((): Array<Object3D> => {
    const selectedPartModels = Array.from(selectedParts)
      .map((gltfIndex) => ModelController.getModelByGltfIndex(gltfIndex))
      .filter(Boolean) as Object3D[];

    return selectedPartModels;
  }, [selectedParts]);

  const selectedEntities = useQuery(Object3DTrait, SelectableTrait, SelectedTrait);
  const selectedEntityModels = useMemo((): Object3D[] => {
    const selection = selectedEntities
      .map((entity: Entity) => entity.get(Object3DTrait)?.ref)
      .filter(Boolean) as Object3D[];
    return selection;
  }, [selectedEntities]);

  const selectedObjects = useMemo(() => {
    return [...selectedPartModels, ...selectedEntityModels];
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedParts, selectedEntityModels]);

I'll have to investigate further, because the selected entities in my implementation kept updating all the time and required the the stable query, but this example works without it.