chore: spike - improve performance with early return

packages/react/src/DataTable/DataTable.tsx

@@ -61,13 +61,17 @@ function DataTable<Data extends UniqueRow>({
   initialSortColumn,
   initialSortDirection,
 }: DataTableProps<Data>) {
-  const {headers, rows, actions, gridTemplateColumns} = useTable({
+  const {headers, rows, actions, gridTemplateColumns, willReactThrowOutRenderResult} = useTable({
     data,
     columns,
     initialSortColumn,
     initialSortDirection,
   })
 
+  if (willReactThrowOutRenderResult) {
+    return null
+  }
+
   return (
     <Table
       aria-labelledby={labelledby}

packages/react/src/DataTable/__tests__/DataTable.test.tsx

@@ -1,6 +1,6 @@
 import userEvent from '@testing-library/user-event'
 import {render, screen, queryAllByRole} from '@testing-library/react'
-import React from 'react'
+import React, {Profiler, type ComponentProps} from 'react'
 import {DataTable, Table} from '../../DataTable'
 import type {Column} from '../column'
 import {createColumnHelper} from '../column'
@@ -1036,4 +1036,30 @@ describe('DataTable', () => {
       })
     })
   })
+
+  describe('performance tests', () => {
+    it('should not render twice on initial render', () => {
+      type Data = {id: string; value: string}
+      const columns: ComponentProps<typeof DataTable<Data>>['columns'] = [
+        {
+          header: 'Value',
+          field: 'value',
+        },
+      ]
+      const data: ComponentProps<typeof DataTable<Data>>['data'] = [
+        {
+          id: '1',
+          value: 'one',
+        },
+      ]
+      let renderCount = 0
+      render(
+        <Profiler id="DataTable" onRender={() => renderCount++}>
+          <DataTable data={data} columns={columns} />
+        </Profiler>,
+      )
+
+      expect(renderCount).toBe(1)
+    })
+  })
 })

packages/react/src/DataTable/useTable.ts

@@ -47,7 +47,7 @@ export function useTable<Data extends UniqueRow>({
   data,
   initialSortColumn,
   initialSortDirection,
-}: TableConfig<Data>): Table<Data> {
+}: TableConfig<Data>): Table<Data> & {willReactThrowOutRenderResult: boolean} {
   const [rowOrder, setRowOrder] = useState(data)
   const [prevData, setPrevData] = useState<typeof data | null>(null)
   const [prevColumns, setPrevColumns] = useState(columns)
@@ -58,7 +58,8 @@ export function useTable<Data extends UniqueRow>({
 
   // Reset the `sortByColumn` state if the columns change and that column is no
   // longer provided
-  if (columns !== prevColumns) {
+  const haveColumnsChanged = columns !== prevColumns
+  if (haveColumnsChanged) {
     setPrevColumns(columns)
     if (sortByColumn) {
       const column = columns.find(column => {
@@ -94,7 +95,8 @@ export function useTable<Data extends UniqueRow>({
   })
 
   // Update the row order and apply the current sort column to the incoming data
-  if (data !== prevData) {
+  const hasDataChanged = data !== prevData
+  if (hasDataChanged) {
     setPrevData(data)
     setRowOrder(data)
     if (sortByColumn) {
@@ -207,6 +209,7 @@ export function useTable<Data extends UniqueRow>({
       sortBy,
     },
     gridTemplateColumns,
+    willReactThrowOutRenderResult: hasDataChanged || haveColumnsChanged,
   }
 }