Stop re-rendering all rows if the children of the table changes

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- **EXPERIMENTAL_TableV2** performance enhancement.
+
 ## [9.138.0] - 2021-04-05
 
 ### Changed

react/components/EXPERIMENTAL_Table/Sections/Tbody.tsx

@@ -71,4 +71,4 @@ const FowardedTbody: ComposableTbody = forwardRef(Tbody)
 
 FowardedTbody.Row = Row
 
-export default FowardedTbody
+export default React.memo(FowardedTbody)

react/components/EXPERIMENTAL_Table/context/body.tsx

@@ -19,7 +19,20 @@ export function useBodyContext() {
 
 export function BodyProvider({
   children,
-  ...value
+  onRowClick,
+  isRowActive,
+  rowKey,
+  highlightOnHover,
 }: PropsWithChildren<BodyProps>) {
+  const value = React.useMemo(
+    () => ({
+      onRowClick,
+      isRowActive,
+      rowKey,
+      highlightOnHover,
+    }),
+    [highlightOnHover, isRowActive, onRowClick, rowKey]
+  )
+
   return <BodyContext.Provider value={value}>{children}</BodyContext.Provider>
 }

react/components/EXPERIMENTAL_Table/context/data.tsx

@@ -17,6 +17,18 @@ export function useDataContext() {
   return context
 }
 
-export function DataProvider({ children, ...value }: PropsWithChildren<Data>) {
+export function DataProvider({
+  children,
+  items,
+  columns,
+}: PropsWithChildren<Data>) {
+  const value = React.useMemo(
+    () => ({
+      columns,
+      items,
+    }),
+    [columns, items]
+  )
+
   return <DataContext.Provider value={value}>{children}</DataContext.Provider>
 }

react/components/EXPERIMENTAL_Table/context/head.tsx

@@ -19,7 +19,16 @@ export function useHeadContext() {
 
 export function HeadProvider({
   children,
-  ...value
+  sticky,
+  sorting,
 }: PropsWithChildren<HeadProps>) {
+  const value = React.useMemo(
+    () => ({
+      sticky,
+      sorting,
+    }),
+    [sorting, sticky]
+  )
+
   return <HeadContext.Provider value={value}>{children}</HeadContext.Provider>
 }

react/components/EXPERIMENTAL_Table/context/loading.tsx

@@ -16,8 +16,19 @@ const LoadingContext = createContext<Loading>(null)
 
 export function LoadingProvider({
   children,
-  ...value
+  empty,
+  loading,
+  emptyState,
 }: PropsWithChildren<Loading>) {
+  const value = React.useMemo(
+    () => ({
+      empty,
+      loading,
+      emptyState,
+    }),
+    [empty, emptyState, loading]
+  )
+
   return (
     <LoadingContext.Provider value={value}>{children}</LoadingContext.Provider>
   )

react/components/EXPERIMENTAL_Table/context/testing.tsx

@@ -22,9 +22,9 @@ export function TestingProvider({
   testId,
   children,
 }: PropsWithChildren<Props>) {
+  const value = React.useMemo(() => ({ testId }), [testId])
+
   return (
-    <TestingContext.Provider value={{ testId }}>
-      {children}
-    </TestingContext.Provider>
+    <TestingContext.Provider value={value}>{children}</TestingContext.Provider>
   )
 }

react/components/EXPERIMENTAL_Table/hooks/useTableMeasures.tsx

@@ -22,13 +22,16 @@ export default function useTableMeasures({
     [rowHeight, size]
   )
 
-  return {
-    density,
-    rowHeight,
-    tableHeight,
-    bodyHeight,
-    setDensity,
-  }
+  return useMemo(
+    () => ({
+      density,
+      rowHeight,
+      tableHeight,
+      bodyHeight,
+      setDensity,
+    }),
+    [bodyHeight, density, rowHeight, tableHeight]
+  )
 }
 
 export type MeasuresInput = {

react/components/EXPERIMENTAL_Table/hooks/useTableProportion.ts

@@ -13,9 +13,12 @@ export default function useTableProportion({ columns, ratio }: ProportionData) {
     [calculatedWidths, columns]
   )
 
-  return {
-    sizedColumns,
-  }
+  return useMemo(
+    () => ({
+      sizedColumns,
+    }),
+    [sizedColumns]
+  )
 }
 
 function calculateWidths(columns: Array<Column>, ratio: Array<number>) {