fix: react and preact useTable to re-render when data and columns change

Author: KevinVandy

packages/preact-table/src/useTable.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useMemo, useState } from 'preact/hooks'
 import { constructTable } from '@tanstack/table-core'
-import { useStore } from '@tanstack/preact-store'
+import { shallow, useStore } from '@tanstack/preact-store'
 import { FlexRender } from './FlexRender'
 import { Subscribe } from './Subscribe'
 import type {
@@ -120,7 +120,7 @@ export function useTable<
     table.options.state, // sync preact state to the table store
   ])
 
-  const state = useStore(table.store, selector)
+  const state = useStore(table.store, selector, { equal: shallow })
 
   return useMemo(
     () => ({

packages/react-table/src/useTable.ts

@@ -103,13 +103,24 @@ export function useTable<
     return tableInstance
   })
 
-  useEffect(() => {
-    // sync table options on every render
-    table.setOptions((prev) => ({
-      ...prev,
-      ...tableOptions,
-    }))
-  }, [table, tableOptions])
+  // sync table options on every render
+  table.setOptions((prev) => ({
+    ...prev,
+    ...tableOptions,
+  }))
+
+  useIsomorphicLayoutEffect(() => {
+    // prevent race condition between table.setOptions and table.baseStore.setState
+    queueMicrotask(() => {
+      table.baseStore.setState((prev) => ({
+        ...prev,
+      }))
+    })
+  }, [
+    table.options.columns, // re-render when columns change
+    table.options.data, // re-render when data changes
+    table.options.state, // sync react state to the table store
+  ])
 
   const state = useStore(table.store, selector, shallow)