Best method for not using NUQS here?

[Anjunadata]

Hey there, I absolutely love this component and I've been integrating it into my codebase but have run into the issue that these components/hooks are heavily reliant on NUQS. While I love this system it just doesn't quite work for how my app functions as we don't make use of the URL in that way. This isn't my use-base but imagine let's say you wanted multiple tables per URL route. This data table system just wouldn't work like that even though it's so good!

I've been trying to use Zustand as a way of replacement for NUQS but have really been struggling. I don't suppose anyone has made a de-NUQS-ified version of this repo? The main issue I'm really running into is the data table causing major re-renders wherever I use it whenever I interact with it (I use tRPC and Tanstack Query). I know most of the work is on my side in code that I can't really share but just wondered if anyone had come across the same scenario and found an easy solution?

[fatihydev]

Hi! I came across your post about struggling with replacing NUQS (using Zustand, tRPC, TanStack Query, etc.). I’m facing a very similar issue right now. I just wanted to ask — did you ever manage to find a good solution or workaround for this? @Anjunadata

[Anjunadata]

Hey @fatihydev - yeah so I am looking to find the time soon to submit a PR for this but basically I went through all the places in the code where it used NUQS' state hooks (useState) and replaced them with a useStore hook from Zustand. This allowed me to define any store from outside the 'system' in my own way. Very close to a Bring Your Own Store system. However, this whole conversation is actually going on here in this GitHub issue. It's a repo by OpenStatus for their data table that uses this repo for their base.

TL;DR I basically went through and swapped out each use of state with my own state management choice (Zustand)

[fatihydev]

Hey @fatihydev - yeah so I am looking to find the time soon to submit a PR for this but basically I went through all the places in the code where it used NUQS' state hooks (useState) and replaced them with a useStore hook from Zustand. This allowed me to define any store from outside the 'system' in my own way. Very close to a Bring Your Own Store system. However, this whole conversation is actually going on here in this GitHub issue. It's a repo by OpenStatus for their data table that uses this repo for their base.

TL;DR I basically went through and swapped out each use of state with my own state management choice (Zustand)

Hi, thanks a lot for your reply. I ended up solving the issue in a similar way by modifying the use-data-table hook and using it together with Zustand.

[Anjunadata]

Oh nice one! Did you do that in a public repo or is that a private solution? I'm hoping to work on something public but right now my code is all private

[Icestonks]

@sadmann7 Is there any possibility you could take a look at this?

[kho-ja]

found an easy solution?

I think the best way is to create another copy of use-data-table.tsx but inside you just do not use nuqs's useQueryState. Instead you can swap with useState or any other state solution you want. And you can name the file like use-data-state-table.tsx or anything in this case. That way you would have 2 ways to tackle this with url or with local state.

[Icestonks]

Interesting idea - but how would you get the state before initializing useDataTable. There would have to be some kind of way of retrieving the state, so it could be used in a fetch, and be passed down as the initial data.

Also if I'm remembering correctly, useDataTable only handles the 'normal' filtering, whereas advanced filters is handled inside of the filter list/menu components.

[kho-ja]

https://github.com/jdu211171/schedule-website/blame/main/src/hooks/use-state-data-table.ts

here is my solution hope it helps!