Skip to content

fix repeated renders when markReady called when collection already ready#604

Merged
samwillis merged 5 commits intomainfrom
samwillis/uselivequery-no-render-when-changes-length-zero
Sep 29, 2025
Merged

fix repeated renders when markReady called when collection already ready#604
samwillis merged 5 commits intomainfrom
samwillis/uselivequery-no-render-when-changes-length-zero

Conversation

@samwillis
Copy link
Collaborator

This fixes #597

We were emitting an empty change event whenever markReady was called, which would happed after each Electric long polling request returned.

The code that triggers these additional empty events was added in #532 to fix a suck loading state. That PR introduced a test case that failed without this previous change. My change here initially caused a regression, but I went digging and found the real case of the stuck loading state and have fixed that 🥳

@changeset-bot
Copy link

changeset-bot bot commented Sep 29, 2025

🦋 Changeset detected

Latest commit: 581ada6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
@tanstack/electric-db-collection Patch
@tanstack/db Patch
@tanstack/db-example-react-todo Patch
@tanstack/angular-db Patch
@tanstack/query-db-collection Patch
@tanstack/react-db Patch
@tanstack/rxdb-db-collection Patch
@tanstack/solid-db Patch
@tanstack/svelte-db Patch
@tanstack/trailbase-db-collection Patch
@tanstack/vue-db Patch
todos Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new
Copy link

pkg-pr-new bot commented Sep 29, 2025

More templates

@tanstack/angular-db

npm i https://pkg.pr.new/@tanstack/angular-db@604

@tanstack/db

npm i https://pkg.pr.new/@tanstack/db@604

@tanstack/db-ivm

npm i https://pkg.pr.new/@tanstack/db-ivm@604

@tanstack/electric-db-collection

npm i https://pkg.pr.new/@tanstack/electric-db-collection@604

@tanstack/query-db-collection

npm i https://pkg.pr.new/@tanstack/query-db-collection@604

@tanstack/react-db

npm i https://pkg.pr.new/@tanstack/react-db@604

@tanstack/rxdb-db-collection

npm i https://pkg.pr.new/@tanstack/rxdb-db-collection@604

@tanstack/solid-db

npm i https://pkg.pr.new/@tanstack/solid-db@604

@tanstack/svelte-db

npm i https://pkg.pr.new/@tanstack/svelte-db@604

@tanstack/trailbase-db-collection

npm i https://pkg.pr.new/@tanstack/trailbase-db-collection@604

@tanstack/vue-db

npm i https://pkg.pr.new/@tanstack/vue-db@604

commit: 581ada6

@github-actions
Copy link
Contributor

github-actions bot commented Sep 29, 2025

Size Change: +79 B (+0.11%)

Total Size: 74.1 kB

Filename Size Change
./packages/db/dist/esm/collection/lifecycle.js 1.8 kB +79 B (+4.6%) 🔍
ℹ️ View Unchanged
Filename Size
./packages/db/dist/esm/collection/change-events.js 958 B
./packages/db/dist/esm/collection/changes.js 1.01 kB
./packages/db/dist/esm/collection/events.js 684 B
./packages/db/dist/esm/collection/index.js 3.14 kB
./packages/db/dist/esm/collection/indexes.js 1.16 kB
./packages/db/dist/esm/collection/mutations.js 2.59 kB
./packages/db/dist/esm/collection/state.js 3.78 kB
./packages/db/dist/esm/collection/subscription.js 1.69 kB
./packages/db/dist/esm/collection/sync.js 1.32 kB
./packages/db/dist/esm/deferred.js 230 B
./packages/db/dist/esm/errors.js 3.1 kB
./packages/db/dist/esm/index.js 1.56 kB
./packages/db/dist/esm/indexes/auto-index.js 745 B
./packages/db/dist/esm/indexes/base-index.js 605 B
./packages/db/dist/esm/indexes/btree-index.js 1.82 kB
./packages/db/dist/esm/indexes/lazy-index.js 1.25 kB
./packages/db/dist/esm/local-only.js 827 B
./packages/db/dist/esm/local-storage.js 2.02 kB
./packages/db/dist/esm/optimistic-action.js 294 B
./packages/db/dist/esm/proxy.js 3.87 kB
./packages/db/dist/esm/query/builder/functions.js 615 B
./packages/db/dist/esm/query/builder/index.js 3.93 kB
./packages/db/dist/esm/query/builder/ref-proxy.js 938 B
./packages/db/dist/esm/query/compiler/evaluators.js 1.56 kB
./packages/db/dist/esm/query/compiler/expressions.js 631 B
./packages/db/dist/esm/query/compiler/group-by.js 2.11 kB
./packages/db/dist/esm/query/compiler/index.js 2.29 kB
./packages/db/dist/esm/query/compiler/joins.js 2.53 kB
./packages/db/dist/esm/query/compiler/order-by.js 1.23 kB
./packages/db/dist/esm/query/compiler/select.js 1.28 kB
./packages/db/dist/esm/query/ir.js 508 B
./packages/db/dist/esm/query/live-query-collection.js 340 B
./packages/db/dist/esm/query/live/collection-config-builder.js 2.68 kB
./packages/db/dist/esm/query/live/collection-subscriber.js 1.91 kB
./packages/db/dist/esm/query/optimizer.js 3.1 kB
./packages/db/dist/esm/SortedMap.js 1.24 kB
./packages/db/dist/esm/transactions.js 3.03 kB
./packages/db/dist/esm/utils.js 943 B
./packages/db/dist/esm/utils/browser-polyfills.js 365 B
./packages/db/dist/esm/utils/btree.js 6.02 kB
./packages/db/dist/esm/utils/comparison.js 754 B
./packages/db/dist/esm/utils/index-optimization.js 1.62 kB

compressed-size-action::db-package-size

// Ensure listeners are active before emitting this critical batch
if (this.lifecycle.status !== `ready`) {
this.lifecycle.setStatus(`ready`)
this.lifecycle.markReady()
Copy link
Collaborator Author

@samwillis samwillis Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change fixed what the real cause of the stuck loading status bug from #532. We should always use markReady when transitioning to ready.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we just remove setStatus? It's nice to have proper functions where we can put in more logic when needed.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not needed for this PR of course but a thought

Comment on lines +98 to +102
if (newStatus === `ready` && !allowReady) {
throw new CollectionStateError(
`Cannot set status to anything other than ready, must use markReady instead`
)
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this check to ensure we don't make the same mistake again when transitioning to ready - see other comment below.

@github-actions
Copy link
Contributor

github-actions bot commented Sep 29, 2025

Size Change: 0 B

Total Size: 1.44 kB

ℹ️ View Unchanged
Filename Size
./packages/react-db/dist/esm/index.js 152 B
./packages/react-db/dist/esm/useLiveQuery.js 1.29 kB

compressed-size-action::react-db-package-size

Comment on lines +159 to +163
// Notify dependents when markReady is called, after status is set
// This ensures live queries get notified when their dependencies become ready
if (this.changes.changeSubscriptions.size > 0) {
this.changes.emitEmptyReadyEvent()
}
Copy link
Collaborator Author

@samwillis samwillis Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving this inside the if above ensures we only send this empty change event when we first transition to ready. This is the fix to prevent additional renders.

@KyleAMathews KyleAMathews changed the title fix repeated renders when markReady called when colleciton already ready fix repeated renders when markReady called when collection already ready Sep 29, 2025
public setStatus(
newStatus: CollectionStatus,
allowReady: boolean = false
): void {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should prevent same status calls: if (newStatus === this.status) return

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to address this in a follow-up pr, when this is done it triggers at least one test failure.

"@tanstack/db": patch
---

Fix repeated renders when markReady called when the collection was already ready. This would occur after each long poll on a Electric collection.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Fix repeated renders when markReady called when the collection was already ready. This would occur after each long poll on a Electric collection.
Fix repeated renders when markReady called when the collection was already ready. This would occur after each long poll on an Electric collection.

Copy link
Collaborator

@KyleAMathews KyleAMathews left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@samwillis samwillis merged commit 1b832ff into main Sep 29, 2025
6 checks passed
@samwillis samwillis deleted the samwillis/uselivequery-no-render-when-changes-length-zero branch September 29, 2025 21:52
@github-actions github-actions bot mentioned this pull request Sep 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Prevent triggering subscribeChanges when long-polling request finishes with up-to-date

2 participants