[terra-table] Prevent unnecessary rerenders (#1939)

packages/terra-data-grid/CHANGELOG.md

@@ -4,6 +4,9 @@
 
 * Added
   * Added keyboard navigation support for sections.
+
+* Fixed
+  * Removed unnecessary rerenders
 
 ## 1.6.0 - (December 5, 2023)
 

packages/terra-data-grid/src/DataGrid.jsx

@@ -181,13 +181,13 @@ const DataGrid = forwardRef((props, ref) => {
   const displayedColumns = (hasSelectableRows ? [WorklistDataGridUtils.ROW_SELECTION_COLUMN] : []).concat(pinnedColumns).concat(overflowColumns);
 
   // By default, all grid-based components have selectable cells.
-  const dataGridRows = rows.map((row) => ({
+  const dataGridRows = useMemo(() => (rows.map((row) => ({
     ...row,
     cells: row.cells.map((cell) => ({
       ...cell,
       isSelectable: cell.isSelectable !== false,
     })),
-  }));
+  }))), [rows]);
 
   // Reference variable for WorklistDataGrid table element
   const grid = useRef();

packages/terra-data-grid/src/WorklistDataGrid.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 import React, {
-  useRef, useCallback, useEffect,
+  useRef, useCallback, useEffect, useMemo,
 } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
@@ -171,8 +171,8 @@ function WorklistDataGrid(props) {
     isSelectable: column.isSelectable !== false,
   }));
 
-  const worklistDataGridPinnedColumns = makeWorklistDataGridColumns(pinnedColumns);
-  const worklistDataGridOverflowColumns = makeWorklistDataGridColumns(overflowColumns);
+  const worklistDataGridPinnedColumns = useMemo(() => (makeWorklistDataGridColumns(pinnedColumns)), [pinnedColumns]);
+  const worklistDataGridOverflowColumns = useMemo(() => (makeWorklistDataGridColumns(overflowColumns)), [overflowColumns]);
 
   // -------------------------------------
   // useEffect Hooks

packages/terra-framework-docs/CHANGELOG.md

@@ -7,6 +7,7 @@
 * Changed
   * Changed terra-pills example to announce removed state of pills.
   * Updated examples and tests for `terra-folder-tree`.
+  * Updated `terra-data-grid` exmaples and tests to pass properties properly.
 
 ## 1.50.0 - (December 5, 2023)
 

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableColumnStates.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import Table from 'terra-table';
 
 const tableDataJSON = {
@@ -46,7 +46,7 @@ const TableWithColumnStates = () => {
   const [tableRows, setTableRows] = useState(rows);
 
   // The onColumnSelect will sort the rows and toggle the current sort indicator.
-  const onColumnSelect = (columnId) => {
+  const onColumnSelect = useCallback((columnId) => {
     const newColumnArray = tableColumns.map((column, columnIndex) => {
       const newColumn = { ...column };
 
@@ -73,7 +73,7 @@ const TableWithColumnStates = () => {
     });
 
     setTableColumns(newColumnArray);
-  };
+  }, [tableColumns, tableRows]);
 
   return (
     <Table

packages/terra-framework-docs/src/terra-dev-site/test/data-grid/worklist-data-grid/DefaultWorklistDataGrid.test.jsx

@@ -47,7 +47,7 @@ const DefaultWorklistDataGrid = () => {
       <WorklistDataGrid
         id="default-terra-worklist-data-grid"
         overflowColumns={cols}
-        rows={rows}
+        rows={rowData}
         rowHeaderIndex={rowHeaderIndex}
         onCellSelect={onCellSelect}
         onClearSelectedCells={onClearSelectedCells}

packages/terra-table/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
 ## Unreleased
+
+* Fixed
+  * Removed unnecessary rerenders
+
 ## 5.3.0 - (December 6, 2023)
 
 * Breaking Changes (Note: this breaking change is needed at this time but does not have major impact)

packages/terra-table/src/Table.jsx

@@ -32,6 +32,8 @@ const TableConstants = {
   ROW_SELECTION_COLUMN_WIDTH: 40,
 };
 
+const ROW_SELECTION_COLUMN_ID = 'table-rowSelectionColumn';
+
 const propTypes = {
   /**
    * Unique id used to identify the table.
@@ -247,18 +249,21 @@ function Table(props) {
     maximumWidth: column.maximumWidth || defaultColumnMaximumWidth,
   });
 
-  // Create row selection column object
-  const tableRowSelectionColumn = {
-    id: 'table-rowSelectionColumn',
-    width: TableConstants.ROW_SELECTION_COLUMN_WIDTH,
-    displayName: intl.formatMessage({ id: 'Terra.table.row-selection-header-display' }),
-    isDisplayVisible: false,
-    isSelectable: !!onRowSelectionHeaderSelect,
-    isResizable: false,
-  };
-
   const hasSelectableRows = rowSelectionMode === RowSelectionModes.MULTIPLE;
-  const displayedColumns = (hasSelectableRows ? [tableRowSelectionColumn] : []).concat(pinnedColumns).concat(overflowColumns);
+  const displayedColumns = useMemo(() => {
+    // Create row selection column object
+    const tableRowSelectionColumn = {
+      id: ROW_SELECTION_COLUMN_ID,
+      width: TableConstants.ROW_SELECTION_COLUMN_WIDTH,
+      displayName: intl.formatMessage({ id: 'Terra.table.row-selection-header-display' }),
+      isDisplayVisible: false,
+      isSelectable: !!onRowSelectionHeaderSelect,
+      isResizable: false,
+    };
+
+    return (hasSelectableRows ? [tableRowSelectionColumn] : []).concat(pinnedColumns).concat(overflowColumns);
+  }, [hasSelectableRows, intl, onRowSelectionHeaderSelect, overflowColumns, pinnedColumns]);
+
   const [tableColumns, setTableColumns] = useState(displayedColumns.map((column) => initializeColumn(column)));
 
   const defaultSectionRef = useRef(uuidv4());
@@ -422,14 +427,14 @@ function Table(props) {
   // event handlers
 
   const handleColumnSelect = useCallback((columnId) => {
-    if (columnId === tableRowSelectionColumn.id) {
+    if (columnId === ROW_SELECTION_COLUMN_ID) {
       if (onRowSelectionHeaderSelect) {
         onRowSelectionHeaderSelect();
       }
     } else if (onColumnSelect) {
       onColumnSelect(columnId);
     }
-  }, [onColumnSelect, onRowSelectionHeaderSelect, tableRowSelectionColumn.id]);
+  }, [onColumnSelect, onRowSelectionHeaderSelect]);
 
   const onResizeMouseDown = useCallback((event, index, resizeColumnWidth) => {
     // Store current table and column values for resize calculations

packages/terra-table/src/subcomponents/Section.jsx

@@ -1,7 +1,7 @@
 // TODO: fix linter error
 /* eslint-disable jsx-a11y/control-has-associated-label */
 
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
 
@@ -130,9 +130,9 @@ function Section(props) {
 
   const hasSectionButton = isCollapsible && onSectionSelect;
 
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     onSectionSelect(id);
-  };
+  }, [id, onSectionSelect]);
 
   return (
     <>