fix: put columns and data in useStore selector in useTable

Author: KevinVandy

packages/preact-table/src/useTable.ts

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo, useState } from 'preact/hooks'
+import { useMemo, useState } from 'preact/hooks'
 import { constructTable } from '@tanstack/table-core'
 import { shallow, useStore } from '@tanstack/preact-store'
 import { FlexRender } from './FlexRender'
@@ -16,9 +16,6 @@ import type { ComponentChildren } from 'preact'
 import type { FlexRenderProps } from './FlexRender'
 import type { SubscribeProps } from './Subscribe'
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
 export type PreactTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -71,7 +68,10 @@ export type PreactTable<
    *
    * console.log(table.state.globalFilter)
    */
-  readonly state: Readonly<TSelected>
+  readonly state: Readonly<TSelected> & {
+    columns: TableOptions<TFeatures, TData>['columns']
+    data: TableOptions<TFeatures, TData>['data']
+  }
 }
 
 export function useTable<
@@ -107,26 +107,21 @@ export function useTable<
     ...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 preact state to the table store
-  ])
+  const selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({
+    columns: tableOptions.columns,
+    data: tableOptions.data,
+    ...selector(state),
+  })
 
-  const state = useStore(table.store, selector, { equal: shallow })
+  const state = useStore(table.store, selectorWithDataAndColumns, {
+    equal: shallow,
+  })
 
   return useMemo(
     () => ({
       ...table,
       state,
     }),
     [state, table],
-  )
+  ) as PreactTable<TFeatures, TData, TSelected>
 }

packages/react-table/src/useTable.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { constructTable } from '@tanstack/table-core'
 import { shallow, useStore } from '@tanstack/react-store'
 import { FlexRender } from './FlexRender'
@@ -18,9 +18,6 @@ import type { FunctionComponent, ReactNode } from 'react'
 import type { FlexRenderProps } from './FlexRender'
 import type { SubscribeProps } from './Subscribe'
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
-
 export type ReactTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
@@ -73,7 +70,10 @@ export type ReactTable<
    *
    * console.log(table.state.globalFilter)
    */
-  readonly state: Readonly<TSelected>
+  readonly state: Readonly<TSelected> & {
+    columns: TableOptions<TFeatures, TData>['columns']
+    data: TableOptions<TFeatures, TData>['data']
+  }
 }
 
 export function useTable<
@@ -109,26 +109,19 @@ export function useTable<
     ...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 selectorWithDataAndColumns = (state: TableState<TFeatures>) => ({
+    columns: tableOptions.columns,
+    data: tableOptions.data,
+    ...selector(state),
+  })
 
-  const state = useStore(table.store, selector, shallow)
+  const state = useStore(table.store, selectorWithDataAndColumns, shallow)
 
   return useMemo(
     () => ({
       ...table,
       state,
     }),
     [state, table],
-  )
+  ) as ReactTable<TFeatures, TData, TSelected>
 }