Fixed

__tests__/pre.build.test.js

@@ -3,7 +3,8 @@ import {
   render,
   screen,
   fireEvent,
-  waitForElementToBeRemoved
+  waitForElementToBeRemoved,
+  within
 } from '@testing-library/react';
 
 import MaterialTable from '../src';
@@ -239,3 +240,61 @@ describe('Render Table : Pre Build', () => {
     screen.getByText(/1-5 of 99/i);
   });
 });
+
+describe('Test event loop and flows', () => {
+  it('calls onRowChange and onPageSizeChange during the same event loop', async () => {
+    const apiCall = jest.fn(() => null);
+    const data = makeData();
+    const Component = () => {
+      const [{ page, pageSize }, setPage] = React.useState({
+        page: 0,
+        pageSize: 5
+      });
+
+      React.useEffect(() => {
+        apiCall(page, pageSize);
+      }, [page, pageSize]);
+
+      return (
+        <MaterialTable
+          data={data}
+          columns={columns}
+          onRowsPerPageChange={(size) => {
+            setPage((prev) => ({ ...prev, pageSize: size }));
+          }}
+          onPageChange={(page) => {
+            setPage((prev) => ({ ...prev, page }));
+          }}
+        />
+      );
+    };
+    render(<Component />);
+    expect(apiCall.mock.calls).toHaveLength(1);
+    expect(apiCall.mock.calls[0]).toEqual([0, 5]);
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /next page/i
+      })
+    );
+
+    expect(apiCall.mock.calls).toHaveLength(2);
+    expect(apiCall.mock.calls[1]).toEqual([1, 5]);
+    fireEvent.mouseDown(
+      screen.getByRole('button', {
+        name: 'Rows per page: 5 rows'
+      })
+    );
+    const listbox = within(screen.getByRole('presentation')).getByRole(
+      'listbox'
+    );
+    const options = within(listbox).getAllByRole('option');
+    const optionValues = options.map((li) => li.getAttribute('data-value'));
+
+    expect(optionValues).toEqual(['5', '10', '20']);
+
+    fireEvent.click(options[1]);
+
+    expect(apiCall.mock.calls).toHaveLength(3);
+    expect(apiCall.mock.calls[2]).toEqual([0, 10]);
+  });
+});

src/material-table.js

@@ -538,23 +538,20 @@ export default class MaterialTable extends React.Component {
     const pageSize = event.target.value;
 
     this.dataManager.changePageSize(pageSize);
-
-    this.props.onPageChange && this.props.onPageChange(0, pageSize);
+    const callback = () => {
+      this.props.onPageChange && this.props.onPageChange(0, pageSize);
+      this.props.onRowsPerPageChange &&
+        this.props.onRowsPerPageChange(pageSize);
+    };
 
     if (this.isRemoteData()) {
       const query = { ...this.state.query };
       query.pageSize = event.target.value;
       query.page = 0;
-      this.onQueryChange(query, () => {
-        this.props.onRowsPerPageChange &&
-          this.props.onRowsPerPageChange(pageSize);
-      });
+      this.onQueryChange(query, callback);
     } else {
       this.dataManager.changeCurrentPage(0);
-      this.setState(this.dataManager.getRenderState(), () => {
-        this.props.onRowsPerPageChange &&
-          this.props.onRowsPerPageChange(pageSize);
-      });
+      this.setState(this.dataManager.getRenderState(), callback);
     }
   };
 
@@ -1184,7 +1181,6 @@ export default class MaterialTable extends React.Component {
             <Droppable droppableId="headers" direction="horizontal">
               {(provided, snapshot) => {
                 const table = this.renderTable(props);
-                console.log('state', this.state);
                 return (
                   <div ref={provided.innerRef}>
                     <div