TanStack / TanStack/db

Implement Throttled Update Notifications for Query Reactivity

Open
#24 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

Problem

Currently, every mutation or sync triggers immediate reactivity and query invalidation.
In high-update scenarios (e.g., rapid optimistic updates, bulk sync events), this causes excessive re-rendering, layout thrashing, degraded scroll performance, and input lag.

Debouncing is not suitable because it would delay the first user-driven update, breaking perceived responsiveness.

Optimistic updates must render immediately. Only subsequent updates need rate limiting.

Proposed Solution

Introduce throttling of query invalidation and reactivity notifications.

Behavior
  • First mutation immediately triggers query reactivity.
  • Subsequent mutations within the throttle window are grouped.
  • Only one re-render is allowed per throttle window.
  • After the throttle window expires, if additional mutations occurred, flush once and reopen the window.
Default Settings
  • Target: 120fps smoothness.
  • Frame budget: 8.3333ms per frame.
  • Default throttle interval: 8.3333ms.
API Design

Global configuration:

configureDb({
  updateThrottling: {
    intervalMs: 8.3333
  }
});

Optional per-query override:

const { results } = useDb()
  .from('posts')
  .withUpdateThrottling({ intervalMs: 16 }) // e.g., throttle to 60fps if desired
  .get();
Design Principles
  • Store mutations always apply immediately.
  • Only reactivity and re-rendering are throttled.
  • Optimistic updates behave identically to server sync updates with respect to throttling.
  • No observable data inconsistency.
Constraints
  • No batching or throttling in strict testing mode to preserve determinism.
  • Throttle window must be precisely timed.
  • Throttling must be fully internal; developers should not manage timers manually.

Future Work

  • Adaptive throttling based on device performance or application state.
  • Metrics collection for mutation vs render rates to optimize default settings.

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

No files, tests, or entry points are named. First locate the query invalidation and reactivity notification paths, then inspect how strict testing mode is detected. Done means immediate first updates, throttled subsequent notifications, configurable global and per-query intervals, and deterministic strict-mode behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.