multiple fetching after page size

[asadkhalili]

material-react-table version

v0.28

Describe the bug and the steps to reproduce it

Hi,
After change of rows per page, The request is send twice.

const ReactMaterialTable = ({columns, url, params = {}, ...other}) => {
    const tableRef = useRef()
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isRefetching, setIsRefetching] = useState(false);
    const [columnFilters, setColumnFilters] = useState([]);
    const [globalFilter, setGlobalFilter] = useState('');
    const [sorting, setSorting] = useState([]);
    const [pagination, setPagination] = useState({
        pageIndex: 0,
        pageSize: 10,
    });
    const [rowCount, setRowCount] = useState(0);
    const {get} = useApi();


    useEffect(() => {
        const fetchData = async () => {
            if (!data.length) {
                setIsLoading(true);
            } else {
                setIsRefetching(true);
            }

            const params = {
                ...params,
                'page': `${pagination.pageIndex + 1}`,
                'per-page': `${pagination.pageSize}`,
                'filters': JSON.stringify(columnFilters ?? []),
                'globalFilter': globalFilter ?? '',
                'sorting': JSON.stringify(sorting ?? [])
            };

            const response = await get(url, params);
            if (response.status === 200) {
                if (response.data.data) {
                    setData(response.data.data);
                    setRowCount(response.headers['x-pagination-total-count']);
                    setPagination({...pagination, pageSize: response.headers['x-pagination-per-page']});
                    //pageIndex: response.headers['x-pagination-current-page']
                }
            }
            setIsLoading(false);
            setIsRefetching(false);
        };
        fetchData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [
        columnFilters,
        globalFilter,
        pagination.pageIndex,
        pagination.pageSize,
        sorting,
    ]);

    return (
        <MaterialReactTable
            {...other}
            columns={columns}
            data={data}
            rowCount={rowCount}
            manualFiltering
            manualPagination
            manualSorting
            onColumnFiltersChange={setColumnFilters}
            onGlobalFilterChange={setGlobalFilter}
            onPaginationChange={setPagination}
            onSortingChange={setSorting}
            state={{
                columnFilters,
                globalFilter,
                isLoading,
                pagination,
                showProgressBars: isRefetching,
                sorting,
            }}
            muiTablePaginationProps={{
                labelRowsPerPage: "تعداد در صفحه",
                labelDisplayedRows: function defaultLabelDisplayedRows({from, to, count}) {
                    return `${from}–${to} از ${count !== -1 ? count : `بیشتر از ${to}`}`;
                }
            }}
            localization={tableLocalization}
        />
    )
}

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I don't know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

I have not been able to reproduce this in my own remote data codesandbox example. This could be a React 18 dev mode thing where useEffects can run twice in strict mode.

[Yov00]

Hi in dev mode useEffect() is executing twice.
Maybe try removing the strict mode and try again.
ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> X <App /> </React.StrictMode> X, )