bug fix: infinite rendering

src/components/Table/Table.tsx

@@ -31,6 +31,8 @@ import {
   tablePageAtom,
   updateColumnAtom,
   selectedCellAtom,
+  tableSortsAtom,
+  tableIdAtom,
 } from "@src/atoms/tableScope";
 import { getFieldType, getFieldProp } from "@src/components/fields";
 import { useKeyboardNavigation } from "./useKeyboardNavigation";
@@ -38,6 +40,7 @@ import { useMenuAction } from "./useMenuAction";
 import { useSaveColumnSizing } from "./useSaveColumnSizing";
 import useHotKeys from "./useHotKey";
 import type { TableRow, ColumnConfig } from "@src/types/table";
+import { projectScope, userSettingsAtom } from "@src/atoms/projectScope";
 
 export const DEFAULT_ROW_HEIGHT = 41;
 export const DEFAULT_COL_WIDTH = 150;
@@ -98,6 +101,10 @@ export default function Table({
 
   const updateColumn = useSetAtom(updateColumnAtom, tableScope);
 
+  const [userSettings] = useAtom(userSettingsAtom, projectScope);
+  const [tableId] = useAtom(tableIdAtom, tableScope);
+  const setTableSorts = useSetAtom(tableSortsAtom, tableScope);
+
   // Store a **state** and reference to the container element
   // so the state can re-render `TableBody`, preventing virtualization
   // not detecting scroll if the container element was initially `null`
@@ -233,6 +240,18 @@ export default function Table({
     containerRef,
   ]);
 
+  // apply user default sort on first render
+  const [applySort, setApplySort] = useState(true);
+  useEffect(() => {
+    if (applySort && Object.keys(tableSchema).length) {
+      const userDefaultSort = userSettings.tables?.[tableId]?.sorts || [];
+      setTableSorts(
+        userDefaultSort.length ? userDefaultSort : tableSchema.sorts || []
+      );
+      setApplySort(false);
+    }
+  }, [tableSchema, userSettings, tableId, setTableSorts, applySort]);
+
   return (
     <div
       ref={(el) => setContainerEl(el)}

src/sources/TableSourceFirestore/TableSourceFirestore.tsx

@@ -39,7 +39,6 @@ import { getTableSchemaPath } from "@src/utils/table";
 import { TableSchema } from "@src/types/table";
 import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
 import { projectScope } from "@src/atoms/projectScope";
-import useApplySorts from "./useApplySorts";
 
 /**
  * When rendered, provides atom values for top-level tables and sub-tables
@@ -142,7 +141,6 @@ export const TableSourceFirestore = memo(function TableSourceFirestore() {
     }
   );
 
-  useApplySorts();
   useAuditChange();
   useBulkWriteDb();
 

src/sources/TableSourceFirestore/useApplySorts.ts

@@ -1,35 +0,0 @@
-import { useEffect, useState } from "react";
-import { useAtom, useSetAtom } from "jotai";
-
-import { projectScope, userSettingsAtom } from "@src/atoms/projectScope";
-import {
-  tableIdAtom,
-  tableSchemaAtom,
-  tableScope,
-  tableSortsAtom,
-} from "@src/atoms/tableScope";
-
-/**
- * Sets the value of tableSortsAtom
- */
-export default function useApplySorts() {
-  // Apply the sorts
-
-  const setTableSorts = useSetAtom(tableSortsAtom, tableScope);
-  const [userSettings] = useAtom(userSettingsAtom, projectScope);
-  const [tableId] = useAtom(tableIdAtom, tableScope);
-  const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
-
-  // Apply only once
-  const [applySort, setApplySort] = useState(true);
-
-  useEffect(() => {
-    if (applySort && Object.keys(tableSchema).length) {
-      const userDefaultSort = userSettings.tables?.[tableId]?.sorts || [];
-      setTableSorts(
-        userDefaultSort.length ? userDefaultSort : tableSchema.sorts || []
-      );
-      setApplySort(false);
-    }
-  }, [setTableSorts, userSettings, tableId, applySort, tableSchema]);
-}