Use new array methods (#3770)

* Use new array methods

* revert this

Author: nstepien

src/DataGrid.tsx

@@ -672,8 +672,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
   function updateRow(column: CalculatedColumn<R, SR>, rowIdx: number, row: R) {
     if (typeof onRowsChange !== 'function') return;
     if (row === rows[rowIdx]) return;
-    const updatedRows = [...rows];
-    updatedRows[rowIdx] = row;
+    const updatedRows = rows.with(rowIdx, row);
     onRowsChange(updatedRows, {
       indexes: [rowIdx],
       column

src/TreeDataGrid.tsx

@@ -78,7 +78,7 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
   const groupIdGetter = rawGroupIdGetter ?? defaultGroupIdGetter;
 
   const { columns, groupBy } = useMemo(() => {
-    const columns = [...rawColumns].sort(({ key: aKey }, { key: bKey }) => {
+    const columns = rawColumns.toSorted(({ key: aKey }, { key: bKey }) => {
       // Sort select column first:
       if (aKey === SELECT_COLUMN_KEY) return -1;
       if (bKey === SELECT_COLUMN_KEY) return 1;

website/routes/CommonFeatures.tsx

@@ -337,7 +337,7 @@ function CommonFeatures() {
   const sortedRows = useMemo((): readonly Row[] => {
     if (sortColumns.length === 0) return rows;
 
-    return [...rows].sort((a, b) => {
+    return rows.toSorted((a, b) => {
       for (const sort of sortColumns) {
         const comparator = getComparator(sort.columnKey);
         const compResult = comparator(a, b);

website/routes/ContextMenu.tsx

@@ -30,7 +30,7 @@ interface Row {
   price: string;
 }
 
-function createRows(): Row[] {
+function createRows(): readonly Row[] {
   const rows: Row[] = [];
 
   for (let i = 1; i < 1000; i++) {
@@ -90,7 +90,7 @@ function ContextMenuDemo() {
       price: faker.commerce.price()
     };
 
-    setRows([...rows.slice(0, insertRowIdx), newRow, ...rows.slice(insertRowIdx)]);
+    setRows(rows.toSpliced(insertRowIdx, 0, newRow));
     setNextId();
   }
 
@@ -127,8 +127,7 @@ function ContextMenuDemo() {
               <button
                 type="button"
                 onClick={() => {
-                  const { rowIdx } = contextMenuProps;
-                  setRows([...rows.slice(0, rowIdx), ...rows.slice(rowIdx + 1)]);
+                  setRows(rows.toSpliced(contextMenuProps.rowIdx, 1));
                   setContextMenuProps(null);
                 }}
               >

website/routes/CustomizableRenderers.tsx

@@ -92,7 +92,7 @@ function CustomizableRenderers() {
   const sortedRows = useMemo((): readonly Row[] => {
     if (sortColumns.length === 0) return rows;
 
-    return [...rows].sort((a, b) => {
+    return rows.toSorted((a, b) => {
       for (const sort of sortColumns) {
         const comparator = getComparator(sort.columnKey);
         const compResult = comparator(a, b);

website/routes/RowGrouping.tsx

@@ -166,9 +166,7 @@ function RowGrouping() {
       }
     } else if (index !== -1) {
       setSelectedOptions((options) => {
-        const newOptions = [...options];
-        newOptions.splice(index, 1);
-        return newOptions;
+        return options.toSpliced(index, 1);
       });
     }
     setExpandedGroupIds(new Set());

website/routes/RowsReordering.tsx

@@ -68,8 +68,9 @@ function RowsReordering() {
   const renderRow = useCallback((key: React.Key, props: RenderRowProps<Row>) => {
     function onRowReorder(fromIndex: number, toIndex: number) {
       setRows((rows) => {
-        const newRows = [...rows];
-        newRows.splice(toIndex, 0, newRows.splice(fromIndex, 1)[0]);
+        const row = rows[fromIndex];
+        const newRows = rows.toSpliced(fromIndex, 1);
+        newRows.splice(toIndex, 0, row);
         return newRows;
       });
     }

website/routes/TreeView.tsx

@@ -81,8 +81,7 @@ function toggleSubRow(rows: Row[], id: string): Row[] {
   const { children } = row;
   if (!children) return rows;
 
-  const newRows = [...rows];
-  newRows[rowIndex] = { ...row, isExpanded: !row.isExpanded };
+  const newRows = rows.with(rowIndex, { ...row, isExpanded: !row.isExpanded });
   if (row.isExpanded) {
     newRows.splice(rowIndex + 1, children.length);
   } else {