Fix useCollection hook not working as expected

Author: Polleps

browser/data-browser/src/views/TablePage/useTableData.ts

@@ -6,7 +6,7 @@ import {
   useResource,
   useSubject,
 } from '@tomic/react';
-import { useMemo, useReducer } from 'react';
+import { useReducer } from 'react';
 import { TableSorting, DEFAULT_SORT_PROP } from './tableSorting';
 
 const PAGE_SIZE = 30;
@@ -46,23 +46,27 @@ export function useTableData(resource: Resource): UseTableDataResult {
   const [classSubject] = useSubject(resource, core.properties.classtype);
   const tableClass = useResource(classSubject);
 
-  const queryFilter = useMemo(
-    () => ({
-      property: core.properties.parent,
-      value: resource.subject,
-      sort_by: sorting.prop,
-      sort_desc: sorting.sortDesc,
-    }),
-    [resource.subject, sorting.prop, sorting.sortDesc],
+  const queryFilter = {
+    property: core.properties.parent,
+    value: resource.subject,
+    sort_by: sorting.prop,
+    sort_desc: sorting.sortDesc,
+  };
+
+  const { collection, invalidateCollection, mapAll } = useCollection(
+    queryFilter,
+    {
+      pageSize: PAGE_SIZE,
+      server: new URL(resource.subject).origin,
+    },
   );
 
   return {
     tableClass,
     sorting,
     setSortBy,
-    ...useCollection(queryFilter, {
-      pageSize: PAGE_SIZE,
-      server: new URL(resource.subject).origin,
-    }),
+    collection,
+    invalidateCollection,
+    mapAll,
   };
 }

browser/react/src/useCollection.ts

@@ -5,7 +5,7 @@ import {
   QueryFilter,
   Store,
 } from '@tomic/lib';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useStore } from './hooks.js';
 
 export type CollectionItemProps = { collection: Collection; index: number };
@@ -76,7 +76,7 @@ export function useCollection(
     server: undefined,
   },
 ): UseCollectionResult {
-  const [firstRun, setFirstRun] = useState(true);
+  const firstRunRef = useRef(true);
 
   const store = useStore();
   const queryFilterMemo = useQueryFilterMemo(queryFilter);
@@ -106,7 +106,9 @@ export function useCollection(
   }, []);
 
   useEffect(() => {
-    if (firstRun) {
+    if (firstRunRef.current) {
+      firstRunRef.current = false;
+
       return;
     }
 
@@ -119,9 +121,9 @@ export function useCollection(
 
     newCollection.waitForReady().then(() => {
       setCollection(proxyCollection(newCollection.__internalObject));
-      setFirstRun(false);
+      firstRunRef.current = false;
     });
-  }, [queryFilterMemo, pageSize, store, server, firstRun]);
+  }, [queryFilterMemo, pageSize, store, server]);
 
   const invalidateCollection = useCallback(async () => {
     await collection.__internalObject.refresh();