diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md index b33720c66ac9a..c7c6aff26ca14 100644 --- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md +++ b/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 `` component is not exported anymore. - The `sanitizeFilterItemValue()` utility is not exported anymore. - `gridRowsDataRowIdToIdLookupSelector` was removed. Use `gridRowsLookupSelector` in combination with `getRowId()` API method instead. diff --git a/docs/pages/x/api/data-grid/grid-api.json b/docs/pages/x/api/data-grid/grid-api.json index 97a19592ea2e6..53384beb0cb6b 100644 --- a/docs/pages/x/api/data-grid/grid-api.json +++ b/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" }, diff --git a/docs/translations/api-docs/data-grid/grid-api.json b/docs/translations/api-docs/data-grid/grid-api.json index 1bc85f2528eb8..fd40d36376d9c 100644 --- a/docs/translations/api-docs/data-grid/grid-api.json +++ b/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.
These values can then be passed to the initialState prop or injected using the restoreState method." }, - "forceUpdate": { - "description": "Forces the grid to rerender. It's often used after a state update." - }, "getAllColumns": { "description": "Returns an array of GridColDef containing all the column definitions." }, diff --git a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts b/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts index 4e0e0f119df05..17c1687ca3df0 100644 --- a/packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts +++ b/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], ); diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx index 12601e30eb880..8910e1cddab60 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx +++ b/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], diff --git a/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx b/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx index cc02558c1b956..a086b25a47f76 100644 --- a/packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx +++ b/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, diff --git a/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts b/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts index 2c1d9f9076025..6bfa18ca04ffb 100644 --- a/packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts +++ b/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(undefined); diff --git a/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts index 31cd9236e7c4b..45b4ae3d6455b 100644 --- a/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts +++ b/packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts @@ -114,13 +114,8 @@ export const useGridStateInitialization = { - // @deprecated - do nothing - }, []); - const publicStateApi: Omit, 'state'> = { setState, - forceUpdate, }; const privateStateApi: GridStatePrivateApi = { diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx index 6d320c0f53ba8..2687ce05c63e2 100644 --- a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx +++ b/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'> = diff --git a/packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx b/packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx index 6e300bca53e1f..dc81430f747c8 100644 --- a/packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx +++ b/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], diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts index b0362703b024f..1372d3e6a17e6 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts +++ b/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], ); diff --git a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts b/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts index a3f372dd430ac..5c6dec3ca1c6a 100644 --- a/packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts +++ b/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], ); diff --git a/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx index 84f2787130c3d..bbe7ab5bf8974 100644 --- a/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx +++ b/packages/x-data-grid/src/hooks/features/filter/useGridFilter.tsx @@ -141,11 +141,6 @@ export const useGridFilter = ( /** * API METHODS */ - const applyFilters = React.useCallback(() => { - updateFilteredRows(); - apiRef.current.forceUpdate(); - }, [apiRef, updateFilteredRows]); - const upsertFilterItem = React.useCallback( (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); diff --git a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts b/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts index a4866af957642..0889327843198 100644 --- a/packages/x-data-grid/src/hooks/features/focus/useGridFocus.ts +++ b/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 diff --git a/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts b/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts index 2138bfd3f9760..e52820eaba58a 100644 --- a/packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts +++ b/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], ); diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts index 99519f91ea566..c6801014897c3 100644 --- a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts +++ b/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], diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts index 0f7d8351bc222..2a3805bce33ce 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts +++ b/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; diff --git a/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts b/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts index cfb944d008dad..55d3612efe53e 100644 --- a/packages/x-data-grid/src/hooks/features/sorting/useGridSorting.ts +++ b/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( @@ -179,7 +178,6 @@ export const useGridSorting = ( apiRef.current.setState( mergeStateWithSortModel(model, props.disableMultipleColumnsSorting), ); - apiRef.current.forceUpdate(); apiRef.current.applySorting(); } }, diff --git a/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts b/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts index 60fb156fff182..3815832997cfb 100644 --- a/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts +++ b/packages/x-data-grid/src/hooks/features/statePersistence/useGridStatePersistence.ts @@ -34,8 +34,6 @@ export const useGridStatePersistence = (apiRef: RefObject { callback(); }); - - apiRef.current.forceUpdate(); }, [apiRef], ); diff --git a/packages/x-data-grid/src/models/api/gridStateApi.ts b/packages/x-data-grid/src/models/api/gridStateApi.ts index 40a0cc98e7659..68013ee46c524 100644 --- a/packages/x-data-grid/src/models/api/gridStateApi.ts +++ b/packages/x-data-grid/src/models/api/gridStateApi.ts @@ -7,11 +7,6 @@ export interface GridStateApi { * 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.