diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md index ef2de0da789..4aefab34e26 100644 --- a/packages/terra-data-grid/CHANGELOG.md +++ b/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) diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx index 6952cd4c3b0..394856c5408 100644 --- a/packages/terra-data-grid/src/DataGrid.jsx +++ b/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(); diff --git a/packages/terra-data-grid/src/WorklistDataGrid.jsx b/packages/terra-data-grid/src/WorklistDataGrid.jsx index 530e5662f85..5601b720217 100644 --- a/packages/terra-data-grid/src/WorklistDataGrid.jsx +++ b/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 diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md index d87062d2b56..c5e8de7e413 100644 --- a/packages/terra-framework-docs/CHANGELOG.md +++ b/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) diff --git a/packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableColumnStates.jsx b/packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableColumnStates.jsx index cff8a2b57e1..1ece532d7b9 100644 --- a/packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableColumnStates.jsx +++ b/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 ( { { + // 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 diff --git a/packages/terra-table/src/subcomponents/Section.jsx b/packages/terra-table/src/subcomponents/Section.jsx index b1b423f0279..fdfde215b20 100644 --- a/packages/terra-table/src/subcomponents/Section.jsx +++ b/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 ( <>