fix(react): trigger useComponentValue on deleted records (#1959)

Co-authored-by: Kevin Ingersoll <[email protected]>

.changeset/tasty-balloons-collect.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/react": patch
+---
+
+Fixed an issue where `useComponentValue` would not detect a change and re-render if the component value was immediately removed.

packages/react/package.json

@@ -19,8 +19,8 @@
     "clean": "pnpm run clean:js",
     "clean:js": "rimraf dist",
     "dev": "tsup --watch",
-    "test": "tsc --noEmit && vitest --run",
-    "test:ci": "pnpm run test"
+    "test": "tsc --noEmit && vitest",
+    "test:ci": "tsc --noEmit && vitest --run"
   },
   "dependencies": {
     "@latticexyz/recs": "workspace:*",

packages/react/src/useComponentValue.test.ts

@@ -40,6 +40,11 @@ describe("useComponentValue", () => {
       removeComponent(Position, entity);
     });
     expect(result.current).toBe(undefined);
+
+    act(() => {
+      setComponent(Position, entity, { x: 0, y: 0 });
+    });
+    expect(result.current).toEqual({ x: 0, y: 0 });
   });
 
   it("should re-render only when Position changes for entity", () => {
@@ -70,6 +75,23 @@ describe("useComponentValue", () => {
     expect(result.current).toBe(undefined);
   });
 
+  it("should re-render when Position is removed", () => {
+    const entity = createEntity(world, [withValue(Position, { x: 1, y: 1 })]);
+
+    const { result } = renderHook(() => useComponentValue(Position, entity));
+    expect(result.current).toEqual({ x: 1, y: 1 });
+
+    act(() => {
+      removeComponent(Position, entity);
+    });
+    expect(result.current).toBe(undefined);
+
+    act(() => {
+      setComponent(Position, entity, { x: 0, y: 0 });
+    });
+    expect(result.current).toEqual({ x: 0, y: 0 });
+  });
+
   it("should return default value when Position is not set", () => {
     const entity = createEntity(world);
 

packages/react/src/useComponentValue.ts

@@ -33,7 +33,7 @@ export function useComponentValue<S extends Schema>(
     setValue(entity != null ? getComponentValue(component, entity) : undefined);
     if (entity == null) return;
 
-    const queryResult = defineQuery([Has(component)], { runOnInit: false });
+    const queryResult = defineQuery([Has(component)], { runOnInit: true });
     const subscription = queryResult.update$.subscribe((update) => {
       if (isComponentUpdate(update, component) && update.entity === entity) {
         const [nextValue] = update.value;