TanStackT
TanStack5mo ago
22 replies
dangerous-fuchsia

Quick noob performance question

I LOVE the idea behind tanstack-db and really want to switch to it. Our app has to be extremely fast and shows hundreds and hundreds of cells in grids on the screen at a time (with tabs that we tab back and forth to see diff grids). It uses redux currently and is optimized to death to make sure it stays fast but comes at a cost of a LOT of code to get it to stay fast. Switching the code in the cell component, from our current pre-keyed redux and rereselects to a useLiveQuery, removes a ton of code and simplifies everything BUT I'm seeing it rendering much more slowly. It becomes more noticeable the more grids and cells that are showing. It's not doing any updates to the store , I'm just tabbing back and forth and the component is rendering the data. The orderCollection is just js objects keyed by an id string. The useLiveQuery I'm using is basically as simple as this:

export const useOrderQuery = <T>(a: string, b: string, c: string): T[] => {
return useLiveQuery(q =>
q
.from({ item: orderCollection })
.where(({ item }) => eq(item.a, a))
.where(({ item }) => eq(item.b, b))
.where(({ item }) => eq(item.c, c))
.orderBy(({ item }) => item.e, 'desc')
.limit(1)
);
};

Am I doing something wrong? Is there a way to make this perform faster? I tried splitting up the collection into diff collections as well to break up the data and shrink the query but that didn't seem to make much difference either.

Apologies ahead of time if I'm doing something stupid. Again, I'd really love for this to be as fast because it would make an absolutely massive difference to our code base.

Thanks...
Was this page helpful?