@tanstack/react-table 8.0.0-alpha.7 → 8.0.0-alpha.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-table",
   "author": "Tanner Linsley",
-  "version": "8.0.0-alpha.7",
+  "version": "8.0.0-alpha.8",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/react-table#readme",
@@ -36,5 +36,11 @@
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@types/use-sync-external-store": "^0.0.3"
   }
 }

package/src/core.tsx

@@ -84,7 +84,8 @@ export type CoreOptions<
 
 export type TableCore<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> =
   {
-    rerender: () => void
+    subscribe: (cb: () => void) => () => void
+    notify: () => void
     initialState: TableState
     internalState: TableState
     reset: () => void
@@ -360,8 +361,7 @@ export function createTableInstance<
   TSortingFns,
   TAggregationFns
 >(
-  options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>,
-  rerender: () => void
+  options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
 ): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> {
   if (process.env.NODE_ENV !== 'production' && options.debug) {
     console.info('Creating React Table Instance...')
@@ -375,6 +375,8 @@ export function createTableInstance<
     TAggregationFns
   >
 
+  let listeners: (() => void)[] = []
+
   const defaultOptions = features.reduce((obj, feature) => {
     return Object.assign(obj, (feature as any).getDefaultOptions?.(instance))
   }, {})
@@ -406,10 +408,18 @@ export function createTableInstance<
     TAggregationFns
   > = {
     ...instance,
+    subscribe: cb => {
+      listeners.push(cb)
+      return () => {
+        listeners = listeners.filter(l => l !== cb)
+      }
+    },
+    notify: () => {
+      listeners.forEach(l => l())
+    },
     ...features.reduce((obj, feature) => {
       return Object.assign(obj, (feature as any).getInstance?.(instance))
     }, {}),
-    rerender,
     initialState,
     internalState: initialState,
     reset: () => {
@@ -434,10 +444,7 @@ export function createTableInstance<
       return state
     },
 
-    setState: (
-      updater: Updater<TableState>,
-      shouldRerender: boolean = true
-    ) => {
+    setState: (updater: Updater<TableState>) => {
       const onStateChange = instance.options.onStateChange
 
       let internalState = instance.internalState
@@ -450,9 +457,7 @@ export function createTableInstance<
         return
       }
 
-      if (shouldRerender) {
-        instance.rerender()
-      }
+      instance.notify()
     },
 
     getDefaultColumn: memo(

package/src/createTable.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
 import { Cell, Column, Row } from '.'
 import { createTableInstance } from './core'
 import {
@@ -222,42 +223,21 @@ export function createTable<
     useTable: <TData, TValue, TFilterFns, TSortingFns, TAggregationFns>(
       options: Options<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
     ): ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns> => {
-      const instanceRef = React.useRef<
-        ReactTable<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>
-      >(undefined!)
-
-      const unsafeRerender = React.useReducer(() => ({}), {})[1]
-
-      const isMountedRef = React.useRef(false)
-
-      const rerender = React.useCallback(() => {
-        if (!isMountedRef.current) {
-          return
-        }
-
-        unsafeRerender()
-      }, [])
-
-      React.useLayoutEffect(() => {
-        isMountedRef.current = true
-        return () => {
-          isMountedRef.current = false
-        }
-      })
-
-      if (!instanceRef.current) {
-        instanceRef.current = createTableInstance<
+      const [instance] = React.useState(() =>
+        createTableInstance<
           TData,
           TValue,
           TFilterFns,
           TSortingFns,
           TAggregationFns
-        >(options, rerender)
-      }
+        >(options)
+      )
+
+      useSyncExternalStore(instance.subscribe, () => instance.internalState)
 
-      instanceRef.current.updateOptions(options)
+      instance.updateOptions(options)
 
-      return instanceRef.current
+      return instance
     },
     types: undefined as any,
   } as TableHelper<TData, TValue, TFilterFns, TSortingFns, TAggregationFns>