@0g/react - npm Package Compare versions

Comparing version 3.0.4 to 4.0.0

dist/hooks/useQuery.d.ts

 import { QueryComponentFilter } from '0g';
-export declare function useQuery(queryDef: QueryComponentFilter): readonly number[];
+export declare function useQuery(queryDef: QueryComponentFilter): import("0g").Query<QueryComponentFilter>;

dist/hooks/useQuery.js

@@ -1,2 +0,2 @@
-import { useLayoutEffect, useState } from 'react';
+import { useState, useSyncExternalStore } from 'react';
 import { useGame } from './useGame.js';
@@ -7,10 +7,6 @@ export function useQuery(queryDef) {
     const [query] = useState(() => game.queryManager.create(queryDef));
-    const [_, setForceUpdate] = useState(Math.random());
-    useLayoutEffect(() => {
-        function onEntitiesChanged() {
-            setForceUpdate(Math.random());
-        }
+    useSyncExternalStore((onChange) => {
         const cleanup = [
-            query.subscribe('entityAdded', onEntitiesChanged),
-            query.subscribe('entityRemoved', onEntitiesChanged),
+            query.subscribe('entityAdded', onChange),
+            query.subscribe('entityRemoved', onChange),
         ];
@@ -22,5 +18,5 @@ return () => {
         };
-    }, [query]);
-    return query.entities;
+    }, () => query.generation);
+    return query;
 }
 //# sourceMappingURL=useQuery.js.map

package.json

 {
   "name": "@0g/react",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "description": "",
@@ -35,3 +35,3 @@ "type": "module",
   "peerDependencies": {
-    "0g": "0.3.4",
+    "0g": "0.4.0",
     "react": "^18.0.0"
@@ -47,3 +47,3 @@ },
     "typescript": "5.4.5",
-    "0g": "0.3.4"
+    "0g": "0.4.0"
   },
@@ -50,0 +50,0 @@ "dependencies": {},

src/hooks/useQuery.ts

@@ -1,2 +0,2 @@
-import { useLayoutEffect, useState } from 'react';
+import { useState, useSyncExternalStore } from 'react';
 import { QueryComponentFilter } from '0g';
@@ -9,22 +9,20 @@ import { useGame } from './useGame.js';
   const [query] = useState(() => game.queryManager.create(queryDef));
-  const [_, setForceUpdate] = useState(Math.random());
 
-  useLayoutEffect(() => {
-    function onEntitiesChanged() {
-      setForceUpdate(Math.random());
-    }
+  useSyncExternalStore(
+    (onChange) => {
+      const cleanup = [
+        query.subscribe('entityAdded', onChange),
+        query.subscribe('entityRemoved', onChange),
+      ];
 
-    const cleanup = [
-      query.subscribe('entityAdded', onEntitiesChanged),
-      query.subscribe('entityRemoved', onEntitiesChanged),
-    ];
+      return () => {
+        for (const unsub of cleanup) {
+          unsub();
+        }
+      };
+    },
+    () => query.generation,
+  );
 
-    return () => {
-      for (const unsub of cleanup) {
-        unsub();
-      }
-    };
-  }, [query]);
-
-  return query.entities;
+  return query;
 }

No alert changes

Improved metrics

Total package byte prevSize

15942

increased by36.84%

Number of package files

39

increased by25.81%

Lines of code

267

increased by39.06%

No dependency changes