[bug]: Table Filters and Sorting Not Syncing with URL or UI State On the Tanstack Router

[thedhruvish]

Describe the bug

I'm using React, TanStack Router, and TanStack Query to manage table state and URL synchronization.
The table is built using the Shadcn Table (based on DiceUI Data Table).

I'm facing issues where the filters and sorting states are not correctly synchronized between the UI, table data, and the URL parameters.

How to reproduce

1. Open the live demo or local project.

2. Apply a filter.

   • The URL updates correctly, but the filter chip does not appear on the first attempt.
   • Apply the same filter again — now the chip appears.

3. Apply a sorting option.

   • The sorting label does not appear immediately.
   • After a few seconds, the sorting resets automatically.

4. Refresh the page.

   • The URL still shows the filter/sort parameters, but the data and UI are not in sync.

---

Link to Reproduction

• Live Demo: https://shadcn-table-demo.pages.dev/
• GitHub Repository: https://github.com/thedhruvish/shadcn-table-demo

---

Expected Behavior

Filters and sorting should remain fully synchronized between:

• The UI (filter chips, dropdowns, etc.)
• The URL parameters
• The table data, even after page refresh.

---

Actual Behavior

• First-time filters do not display chips.
• Sorting briefly appears then resets.
• Refreshing the page keeps query params but loses the applied filter/sort state.

---

Visual Reference

🎥 Video Demo

isuucs.video.mp4

🖼️ Screenshots

Problem Screenshot

Expected

Above: The URL shows active filters, but the UI filter chips are not highlighted.

Additional information

• React
• TanStack Router
• TanStack Query
• DiceUI Data Table

[NimaJ788]

The problem is for React Compiler problem with tanstack table. you can add "use no memo"; to fix it temporary.