Skip to content

Make hydrationQueue a derived value #9247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jun 4, 2025
Merged

Make hydrationQueue a derived value #9247

merged 2 commits into from
Jun 4, 2025

Conversation

Ephem
Copy link
Collaborator

@Ephem Ephem commented Jun 4, 2025

After the fixes in:

#9157
#9188

I noticed a version of this bug was still happening: #8677

@TkDodo Pointed out a potential solution, which is to move hydrationQueue from being a state, to being a derived value instead.

I think this makes a lot of sense. It should always be safe to recalculate this and there should be no situation where the component rerenders without the effect running where we want to preserve the values.

Tests are passing without changes.

@Ephem Ephem requested a review from TkDodo June 4, 2025 09:13
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Jun 4, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 893f377.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 2m 38s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 35s View ↗

☁️ Nx Cloud last updated this comment at 2025-06-04 09:31:40 UTC

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Jun 4, 2025 •
edited
Loading

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9247

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9247

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9247

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9247

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9247

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9247

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9247

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9247

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9247

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9247

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9247

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9247

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9247

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9247

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9247

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9247

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9247

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9247

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9247

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9247

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9247

commit: 893f377

TkDodo
TkDodo approved these changes Jun 4, 2025
View reviewed changes
Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

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

awesome, exactly how I imagined it would look ♥️. Gets a lot simpler too 🙌

@TkDodo
Copy link
Collaborator

TkDodo commented Jun 4, 2025

ah, the eslint disable is still needed it seems:

/home/workflows/workspace/packages/react-query/src/HydrationBoundary.tsx
  59:25  error  Unnecessary conditional, value is always truthy  @typescript-eslint/no-unnecessary-condition

@Ephem
Copy link
Collaborator Author

Ephem commented Jun 4, 2025

Yeah, my editor linting was acting up and told me it was safe to remove. 😞

@codecov Codecov
Copy link

codecov bot commented Jun 4, 2025 •
edited
Loading

Codecov Report

Attention: Patch coverage is 96.00000% with 1 line in your changes missing coverage. Please review.

Project coverage is 84.29%. Comparing base (058bfc9) to head (893f377).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #9247       +/-   ##
===========================================
+ Coverage   45.33%   84.29%   +38.95%     
===========================================
  Files         207       25      -182     
  Lines        8271      363     -7908     
  Branches     1860      108     -1752     
===========================================
- Hits         3750      306     -3444     
+ Misses       4080       48     -4032     
+ Partials      441        9      -432
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental ∅ <ø> (∅)
@tanstack/eslint-plugin-query ∅ <ø> (∅)
@tanstack/query-async-storage-persister ∅ <ø> (∅)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core ∅ <ø> (∅)
@tanstack/query-devtools ∅ <ø> (∅)
@tanstack/query-persist-client-core ∅ <ø> (∅)
@tanstack/query-sync-storage-persister ∅ <ø> (∅)
@tanstack/query-test-utils ∅ <ø> (∅)
@tanstack/react-query 95.93% <96.00%> (-0.10%) ⬇️
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@tanstack/solid-query ∅ <ø> (∅)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client ∅ <ø> (∅)
@tanstack/svelte-query ∅ <ø> (∅)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client ∅ <ø> (∅)
@tanstack/vue-query ∅ <ø> (∅)
@tanstack/vue-query-devtools ∅ <ø> (∅)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Ephem Ephem merged commit 0d2c2e0 into TanStack:main Jun 4, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@TkDodo TkDodo TkDodo approved these changes

Assignees
No one assigned
Labels
package: react-query
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Ephem @TkDodo