TanStack / TanStack/db

Seeing 40%+ slowness in simple useLiveQuery vs redux selectors when rendering many items

Open
#445 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.9k
Forks
266
Avg merge
1d 4h
Merged PRs (30d)
55

Description

We have a React app that uses redux/re-reselect to render many items on the screen at a time. Switching the code to use tanstack db/useLiveQuery causes 40% or more speed reduction. A simple runnable example is attached...

return useLiveQuery(q =>
    q
      .from({ item: orderCollection })
      .where(({ item }) => eq(item.gridId, gridId))
      .where(({ item }) => eq(item.rowId, rowId))
      .where(({ item }) => eq(item.side, side))
  );

vs

useSelector((state:IStore) => getOrderBySideAndRowId(state, props));

test.zip

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the attached test.zip example and profiling the useLiveQuery query against the Redux selector while rendering many items. Compare the two snippets under the same data and rendering conditions, then identify and document the cause of the reported slowdown or provide a measured improvement.】【。}ભળ рай综合色啪 แจกเครดิตฟรี? Wait invalid extra? Need no. Ensure JSON no weird. I accidentally text? Need final clean. schema exact. Let's output. naar.json string unicode okay.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, redux, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.