Preventing pagination calculation on first render

I am storing pagination state for the table in query params and there is a problem with first render of the table where I render skeletons placeholders when data is first loading and this causes the pagination state to reset and it probably doing the recalucation of pagination for first render and then for new data. When i use this approach from the github discussion

const tableData = useMemo(
    () =>
      isInitialLoading
        ? (Array(state?.pagination?.pageSize || PAGE_SIZES[0]).fill({}) as T[])
        : data,
    [isInitialLoading, data, state?.pagination?.pageSize],
  );

const table = useReactTable({
    data: tableData,
...
})

const tableData = useMemo(
    () =>
      isInitialLoading
        ? (Array(state?.pagination?.pageSize || PAGE_SIZES[0]).fill({}) as T[])
        : data,
    [isInitialLoading, data, state?.pagination?.pageSize],
  );

const table = useReactTable({
    data: tableData,
...
})

If I instead just do data directly the pagination state does not restart

const table = useReactTable({
    data,
...
})

const table = useReactTable({
    data,
...
})

Is there any way to prevent onPaginationChange or any other calculation on the first render with skeletons approach ??

TanStack•14mo ago•

3 replies

dead-brown

Preventing pagination calculation on first render

const tableData = useMemo(
    () =>
      isInitialLoading
        ? (Array(state?.pagination?.pageSize || PAGE_SIZES[0]).fill({}) as T[])
        : data,
    [isInitialLoading, data, state?.pagination?.pageSize],
  );

const table = useReactTable({
    data: tableData,
...
})

const tableData = useMemo(
    () =>
      isInitialLoading
        ? (Array(state?.pagination?.pageSize || PAGE_SIZES[0]).fill({}) as T[])
        : data,
    [isInitialLoading, data, state?.pagination?.pageSize],
  );

const table = useReactTable({
    data: tableData,
...
})

If I instead just do data directly the pagination state does not restart

const table = useReactTable({
    data,
...
})

const table = useReactTable({
    data,
...
})

Is there any way to prevent onPaginationChange or any other calculation on the first render with skeletons approach ??

Preventing pagination calculation on first render

Similar Threads

Preventing pagination calculation on first render

Similar Threads

Similar Threads

Similar Threads