[DataGrid] Remove apiRef.current.forceUpdate() method (#16560)

docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md

@@ -51,6 +51,7 @@ Below are described the steps you need to make to migrate from v7 to v8.
 
 - The `rowPositionsDebounceMs` prop was removed.
 - The `apiRef.current.resize()` method was removed.
+- The `apiRef.current.forceUpdate()` method was removed. Use selectors combined with `useGridSelector()` hook to react to changes in the state.
 - The `<GridOverlays />` component is not exported anymore.
 - The `sanitizeFilterItemValue()` utility is not exported anymore.
 - `gridRowsDataRowIdToIdLookupSelector` was removed. Use `gridRowsLookupSelector` in combination with `getRowId()` API method instead.

docs/pages/x/api/data-grid/grid-api.json

@@ -40,7 +40,6 @@
       "type": { "description": "(params?: GridExportStateParams) => InitialState" },
       "required": true
     },
-    "forceUpdate": { "type": { "description": "() => void" }, "required": true },
     "getAllColumns": { "type": { "description": "() => GridStateColDef[]" }, "required": true },
     "getAllGroupDetails": {
       "type": { "description": "() => GridColumnGroupLookup" },

docs/translations/api-docs/data-grid/grid-api.json

@@ -17,9 +17,6 @@
     "exportState": {
       "description": "Generates a serializable object containing the exportable parts of the DataGrid state.<br />These values can then be passed to the <code>initialState</code> prop or injected using the <code>restoreState</code> method."
     },
-    "forceUpdate": {
-      "description": "Forces the grid to rerender. It&#39;s often used after a state update."
-    },
     "getAllColumns": {
       "description": "Returns an array of <a href=\"/x/api/data-grid/grid-col-def/\">GridColDef</a> containing all the column definitions."
     },

packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts

@@ -112,7 +112,6 @@ export const useGridCellSelection = (
         return;
       }
       apiRef.current.setState((prevState) => ({ ...prevState, cellSelection: newModel }));
-      apiRef.current.forceUpdate();
     },
     [apiRef, props.cellSelection],
   );

packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx

@@ -85,7 +85,6 @@ export const useGridRowGrouping = (
       if (currentModel !== model) {
         apiRef.current.setState(mergeStateWithRowGroupingModel(model));
         setStrategyAvailability(apiRef, props.disableRowGrouping);
-        apiRef.current.forceUpdate();
       }
     },
     [apiRef, props.disableRowGrouping],

packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx

@@ -104,7 +104,6 @@ export const useGridColumnReorder = (
         ...state,
         columnReorder: { ...state.columnReorder, dragCol: params.field },
       }));
-      apiRef.current.forceUpdate();
 
       removeDnDStylesTimeout.current = setTimeout(() => {
         dragColNode.current!.classList.remove(classes.columnHeaderDragging);
@@ -340,7 +339,6 @@ export const useGridColumnReorder = (
         ...state,
         columnReorder: { ...state.columnReorder, dragCol: '' },
       }));
-      apiRef.current.forceUpdate();
     },
     [
       apiRef,

packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts

@@ -227,7 +227,7 @@ export const useGridDetailPanel = (
     }
   }, [apiRef, props.detailPanelExpandedRowIds]);
 
-  const updateCachesAndForceUpdate = React.useCallback(() => {
+  const updateCaches = React.useCallback(() => {
     if (!props.getDetailPanelContent) {
       return;
     }
@@ -245,10 +245,9 @@ export const useGridDetailPanel = (
         },
       };
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
 
-  useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCachesAndForceUpdate);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCaches);
 
   const previousGetDetailPanelContentProp =
     React.useRef<DataGridProProcessedProps['getDetailPanelContent']>(undefined);

packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts

@@ -114,13 +114,8 @@ export const useGridStateInitialization = <PrivateApi extends GridPrivateApiComm
     [apiRef],
   );
 
-  const forceUpdate = React.useCallback(() => {
-    // @deprecated - do nothing
-  }, []);
-
   const publicStateApi: Omit<GridStateApi<PrivateApi['state']>, 'state'> = {
     setState,
-    forceUpdate,
   };
 
   const privateStateApi: GridStatePrivateApi<PrivateApi['state']> = {

packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx

@@ -625,7 +625,6 @@ export const useGridColumnResize = (
         ...state,
         columnResize: { ...state.columnResize, resizingColumnField: field },
       }));
-      apiRef.current.forceUpdate();
     },
     [apiRef],
   );
@@ -635,7 +634,6 @@ export const useGridColumnResize = (
       ...state,
       columnResize: { ...state.columnResize, resizingColumnField: '' },
     }));
-    apiRef.current.forceUpdate();
   }, [apiRef]);
 
   const handleColumnResizeMouseDown: GridEventListener<'columnSeparatorMouseDown'> =

packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx

@@ -99,7 +99,6 @@ export function useGridColumns(
       apiRef.current.setState(mergeColumnsState(columnsState));
       apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
       apiRef.current.updateRenderContext?.();
-      apiRef.current.forceUpdate();
     },
     [logger, apiRef],
   );
@@ -156,7 +155,6 @@ export function useGridColumns(
           }),
         }));
         apiRef.current.updateRenderContext?.();
-        apiRef.current.forceUpdate();
       }
     },
     [apiRef],

packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts

@@ -316,7 +316,6 @@ export const useGridCellEditing = (
 
         return { ...state, editRows: newEditingState };
       });
-      apiRef.current.forceUpdate();
     },
     [apiRef],
   );

packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts

@@ -383,7 +383,6 @@ export const useGridRowEditing = (
 
         return { ...state, editRows: newEditingState };
       });
-      apiRef.current.forceUpdate();
     },
     [apiRef],
   );
@@ -404,7 +403,6 @@ export const useGridRowEditing = (
 
         return { ...state, editRows: newEditingState };
       });
-      apiRef.current.forceUpdate();
     },
     [apiRef],
   );

packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx

@@ -141,11 +141,6 @@ export const useGridFilter = (
   /**
    * API METHODS
    */
-  const applyFilters = React.useCallback<GridFilterApi['unstable_applyFilters']>(() => {
-    updateFilteredRows();
-    apiRef.current.forceUpdate();
-  }, [apiRef, updateFilteredRows]);
-
   const upsertFilterItem = React.useCallback<GridFilterApi['upsertFilterItem']>(
     (item) => {
       const filterModel = gridFilterModelSelector(apiRef);
@@ -339,7 +334,7 @@ export const useGridFilter = (
 
   const filterApi: GridFilterApi = {
     setFilterLogicOperator,
-    unstable_applyFilters: applyFilters,
+    unstable_applyFilters: updateFilteredRows,
     deleteFilterItem,
     upsertFilterItem,
     upsertFilterItems,
@@ -519,11 +514,8 @@ export const useGridFilter = (
         visibleRowsLookup: getVisibleRowsLookupState(apiRef, state),
       };
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
 
-  // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
-  // Otherwise, the state is not consistent during the render
   useGridApiEventHandler(apiRef, 'rowsSet', updateFilteredRows);
   useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
   useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);

packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts

@@ -87,7 +87,6 @@ export const useGridFocus = (
           },
         };
       });
-      apiRef.current.forceUpdate();
 
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
@@ -129,8 +128,6 @@ export const useGridFocus = (
           },
         };
       });
-
-      apiRef.current.forceUpdate();
     },
     [apiRef, logger, publishCellFocusOut],
   );
@@ -159,8 +156,6 @@ export const useGridFocus = (
           },
         };
       });
-
-      apiRef.current.forceUpdate();
     },
     [apiRef, logger, publishCellFocusOut],
   );
@@ -195,8 +190,6 @@ export const useGridFocus = (
           },
         };
       });
-
-      apiRef.current.forceUpdate();
     },
     [apiRef],
   );
@@ -398,7 +391,6 @@ export const useGridFocus = (
             columnGroupHeader: null,
           },
         }));
-        apiRef.current.forceUpdate();
 
         // There's a focused cell but another element (not a cell) was clicked
         // Publishes an event to notify that the focus was lost

packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts

@@ -46,7 +46,6 @@ export const useGridHeaderFiltering = (
           },
         };
       });
-      apiRef.current.forceUpdate();
     },
     [apiRef, props.signature, props.headerFilters],
   );

packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts

@@ -189,7 +189,6 @@ export const useGridRowSelection = (
           ...state,
           rowSelection: props.rowSelection ? model : [],
         }));
-        apiRef.current.forceUpdate();
       }
     },
     [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection],

packages/x-data-grid/src/hooks/features/rows/useGridRows.ts

@@ -143,7 +143,6 @@ export const useGridRows = (
           }),
         }));
         apiRef.current.publishEvent('rowsSet');
-        apiRef.current.forceUpdate();
       };
 
       timeout.clear();
@@ -289,7 +288,6 @@ export const useGridRows = (
           },
         };
       });
-      apiRef.current.forceUpdate();
       apiRef.current.publishEvent('rowExpansionChange', newNode);
     },
     [apiRef],
@@ -591,7 +589,6 @@ export const useGridRows = (
       };
     });
     apiRef.current.publishEvent('rowsSet');
-    apiRef.current.forceUpdate();
   }, [apiRef, props.rowCount]);
 
   useGridRegisterPipeApplier(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
@@ -638,7 +635,6 @@ export const useGridRows = (
           rows: { ...state.rows, loading: props.loading },
         }));
         apiRef.current.caches.rows!.loadingPropBeforePartialUpdates = props.loading;
-        apiRef.current.forceUpdate();
       }
 
       if (!isNewRowCountAlreadyInState) {
@@ -651,7 +647,6 @@ export const useGridRows = (
           },
         }));
         apiRef.current.caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
-        apiRef.current.forceUpdate();
       }
       if (!isRowCountPropUpdated) {
         return;

packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts

@@ -168,7 +168,6 @@ export const useGridSorting = (
     });
 
     apiRef.current.publishEvent('sortedRowsSet');
-    apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
 
   const setSortModel = React.useCallback<GridSortApi['setSortModel']>(
@@ -179,7 +178,6 @@ export const useGridSorting = (
         apiRef.current.setState(
           mergeStateWithSortModel(model, props.disableMultipleColumnsSorting),
         );
-        apiRef.current.forceUpdate();
         apiRef.current.applySorting();
       }
     },

packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts

@@ -34,8 +34,6 @@ export const useGridStatePersistence = (apiRef: RefObject<GridPrivateApiCommunit
       response.callbacks.forEach((callback) => {
         callback();
       });
-
-      apiRef.current.forceUpdate();
     },
     [apiRef],
   );

packages/x-data-grid/src/models/api/gridStateApi.ts

@@ -7,11 +7,6 @@ export interface GridStateApi<State extends GridStateCommunity> {
    * Property that contains the whole state of the grid.
    */
   state: State;
-  /**
-   * Forces the grid to rerender. It's often used after a state update.
-   * @deprecated no longer needed.
-   */
-  forceUpdate: () => void;
   /**
    * Sets the whole state of the grid.
    * @param {GridState | (oldState: GridState) => GridState} state The new state or the callback creating the new state.