Multiple request to server

[nikilshetty6795]

Issue Check list

• [x] Agree to the Code of Conduct
• [x] Read the README
• [x] You are using React 16.8.0+
• [x] You installed styled-components
• [ ] Include relevant code or preferably a code sandbox

Describe the bug

On remote pagination when onChangeRowsPerPage={handlePerRowsChange} onChangePage={handlePageChange} is added with useEffect its sending multiple request to server i.e when ever a page loads handlePerRowsChange and handlePageChange runs without any interactions on pageload.

To Reproduce

Steps to reproduce the behavior:

create a page add useEffect

useEffect(() => { if (effectRan.current === true) { getUsers(1); }

//cleanup function which helps to get the data on the second time of the call
return () => {
  effectRan.current = true;
};

}, []);

//get users to fetch the data const getUsers = async (page) => { setLoading(true); const response = await customFetch.get( /api_endpont?page=${page}&per_page=${perPage} ); console.log("respone", response.data.result.userList); if (response.data.result.userList !== undefined) { setUsers(response.data.result.userList); } setTotalRows(response.data.result.totalCount.count); setLoading(false); };

const handlePageChange = (page) => { console.log("handle page cjhange"); getUsers(page); };

// on change in page size change the data as per the request const handlePerRowsChange = async (newPerPage, page) => { console.log("handlePerRowChange"); setLoading(true);

const response = await customFetch.get(
  `/api_endpoint?page=${page}&per_page=${newPerPage}`
);
if (response.data.result.userList !== undefined) {
  setUsers(response.data.result.userList);
}
setPerPage(newPerPage);
setLoading(false);

};

<DataTable fixedHeader fixedHeaderScrollHeight="80vh" progressPending={loading} columns={columns} data={users} pagination paginationServer paginationTotalRows={totalRows} onChangeRowsPerPage={handlePerRowsChange} onChangePage={handlePageChange} />

Expected behavior

on page load handlePerRowsChange and handlePageChange runs and prints "handle page cjhange" and "handlePerRowChange" by default this is making the multiple request to server

Versions (please complete the following information)

• React version 18.2.0
• OS: ubuntu 20.04
• Browser chrome

[scdigitalmedia]

I'm running into the same issue. I wonder if there's a way to attach those events after the data has loaded.

edit:

Using paginationComponent does not seem to trigger anything inside it on first load, so just a bit of extra work to create your own buttons and logic

[DarrylWalkerJacobs]

Also getting this on the latest version of NextJs. Is there a workaround for this that doesn't involve reinventing the wheel by creating our own pagination component?