Pagination state in endless loop

[manni497]

TanStack Table version

8.10.7

Framework/Library version

React 18, Next.js 14.0.4

Describe the bug and the steps to reproduce it

I was trying to use your library wrapped in a mine own hook in order to be able to use it in a strongly typed version.

My hook works perfectly when using manualPagination, but goes in an infinite loop if it's set to false. Based on your source code, the issue seems related to "autoResetPageIndex" which seems to set the pagination state in loop.

Checking my codesandbox, you can easily reproduce it by switching "resetPageIndex" to true in the App.tsx. Then inspecting the console, you can see how many time the value tracked by the useEffect in useReactDataTable is redrawn.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/devbox/zen-frost-mx528q?file=%2Fsrc%2FApp.tsx%3A60%2C27&workspaceId=6df518c2-3359-42f8-b2e6-2e9b1ec6b975

Screenshots or Videos (Optional)

No response

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

None

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

Give data and columns a stable reference https://tanstack.com/table/latest/docs/faq#how-do-i-stop-infinite-rendering-loops

In your case, the columnHelper is re-created on every render, causing the infinite render to trigger it seems. Remove it from the dependency array of columns, or define it outside of/above the component.

[manni497]

@KevinVandy I updated my codeSanbox as you suggested, but this doesn't seem to fix the issue.