[DataGrid] Fix onPageChange and onPageSizeChange event trigger

packages/grid/_modules_/grid/hooks/features/pagination/usePagination.ts

@@ -83,20 +83,21 @@ export const usePagination = (apiRef: ApiRef): void => {
   }, [apiRef, dispatch, options.paginationMode]);
 
   React.useEffect(() => {
-    setPage(options.page != null ? options.page : 0);
-  }, [apiRef, options.page, setPage]);
+    const newPage = options.page != null ? options.page : 0;
+    dispatch(setPageActionCreator(newPage));
+  }, [dispatch, options.page]);
 
   React.useEffect(() => {
     if (!options.autoPageSize && options.pageSize) {
-      setPageSize(options.pageSize);
+      dispatch(setPageSizeActionCreator(options.pageSize));
     }
-  }, [options.autoPageSize, options.pageSize, logger, setPageSize]);
+  }, [options.autoPageSize, options.pageSize, logger, dispatch]);
 
   React.useEffect(() => {
     if (options.autoPageSize && containerSizes && containerSizes?.viewportPageSize > 0) {
-      setPageSize(containerSizes?.viewportPageSize);
+      dispatch(setPageSizeActionCreator(containerSizes?.viewportPageSize));
     }
-  }, [containerSizes, options.autoPageSize, setPageSize]);
+  }, [containerSizes, dispatch, options.autoPageSize]);
 
   React.useEffect(() => {
     dispatch(setRowCountActionCreator({ totalRowCount: visibleRowCount }));

packages/grid/data-grid/src/tests/pagination.DataGrid.test.tsx

@@ -7,7 +7,7 @@ import {
   screen,
 } from 'test/utils';
 import { expect } from 'chai';
-import { DataGrid, RowsProp } from '@material-ui/data-grid';
+import { DataGrid, DataGridProps, RowsProp } from '@material-ui/data-grid';
 import { getColumnValues } from 'test/utils/helperFn';
 import { spy } from 'sinon';
 
@@ -65,17 +65,6 @@ describe('<DataGrid /> - Pagination', () => {
       expect(cell).to.have.text('Addidas');
     });
 
-    it('should trigger onPageChange once if page prop is set', () => {
-      const onPageChange = spy();
-
-      render(
-        <div style={{ width: 300, height: 300 }}>
-          <DataGrid {...baselineProps} page={1} onPageChange={onPageChange} pageSize={1} />
-        </div>,
-      );
-      expect(onPageChange.callCount).to.equal(1);
-    });
-
     it('should trigger onPageChange when clicking on next page', () => {
       const onPageChange = spy();
 
@@ -110,15 +99,40 @@ describe('<DataGrid /> - Pagination', () => {
       expect(onPageChange.callCount).to.equal(2);
     });
 
-    it('should not trigger onPageChange on initialisation and rendering of the first and default page', () => {
+    it('should not trigger onPageChange on initialisation or on page prop change', () => {
       const onPageChange = spy();
 
-      render(
-        <div style={{ width: 300, height: 300 }}>
-          <DataGrid {...baselineProps} onPageChange={onPageChange} pageSize={1} />
-        </div>,
-      );
+      function Test(props: Partial<DataGridProps>) {
+        return (
+          <div style={{ width: 300, height: 300 }}>
+            <DataGrid {...baselineProps} {...props} />
+          </div>
+        );
+      }
+
+      const { setProps } = render(<Test page={1} pageSize={1} onPageChange={onPageChange} />);
       expect(onPageChange.callCount).to.equal(0);
+      setProps({ page: 2 });
+      expect(onPageChange.callCount).to.equal(0);
+    });
+
+    it('should not trigger onPageSizeChange on initialisation or on pageSize prop change', () => {
+      const onPageSizeChange = spy();
+
+      function Test(props: Partial<DataGridProps>) {
+        return (
+          <div style={{ width: 300, height: 300 }}>
+            <DataGrid {...baselineProps} {...props} />
+          </div>
+        );
+      }
+
+      const { setProps } = render(
+        <Test onPageSizeChange={onPageSizeChange} pageSize={1} page={1} />,
+      );
+      expect(onPageSizeChange.callCount).to.equal(0);
+      setProps({ pageSize: 2 });
+      expect(onPageSizeChange.callCount).to.equal(0);
     });
 
     it('should support server side pagination', () => {

packages/storybook/src/stories/grid-pagination.stories.tsx

@@ -76,7 +76,7 @@ export function PaginationApiTests() {
   const [autosize, setAutoSize] = React.useState(false);
 
   React.useEffect(() => {
-    return apiRef.current.onPageChange(action('pageChange'));
+    return apiRef.current.onPageChange(action('apiRef: onPageChange'));
   }, [apiRef, data]);
 
   const backToFirstPage = () => {
@@ -126,6 +126,8 @@ export function PaginationApiTests() {
           pagination
           pageSize={myPageSize}
           autoPageSize={autosize}
+          onPageChange={action('prop: onPageChange')}
+          onPageSizeChange={action('prop: onPageSizeChange')}
           components={{
             Pagination: ({ state }) => (
               <Pagination