fix(react-query-devtools): create the devtools instance lazily with 'useState' initializer instead of on every render by sukvvon · Pull Request #11722 · TanStack/query

sukvvon · 2026-09-29T01:46:07Z

🎯 Changes

In ReactQueryDevtools and ReactQueryDevtoolsPanel, pass an initializer function to React.useState instead of constructing TanstackQueryDevtools / TanstackQueryDevtoolsPanel directly. Previously a new instance was created on every render and discarded, since only the first one was kept as state. This matches preact-query-devtools, which already uses the initializer form.
Add a test to each component that re-renders it and asserts the devtools constructor is called only once.
Add a patch changeset for @tanstack/react-query-devtools.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested code changes locally with pnpm run test:pr, or these tests do not apply to this pull request.
I have followed the AI contribution policy and fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Bug Fixes
- React Query Devtools now initializes its devtools instance once and reuses it across rerenders, including when the display position changes. This avoids unnecessary instance recreation and keeps the existing instance in use. The panel’s initialization behavior remains unchanged.

…useState' initializer instead of on every render

nx-cloud · 2026-09-29T01:46:30Z

View your CI Pipeline Execution ↗ for commit 47ff0b6

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

☁️ Nx Cloud last updated this comment at 2026-09-29 01:51:46 UTC

github-actions · 2026-09-29T01:47:02Z

🚀 Changeset Version Preview

1 package(s) bumped directly, 24 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
`@tanstack/react-query-devtools`	5.104.0 → 5.104.1	Changeset
`@tanstack/angular-query-experimental`	5.104.0 → 5.104.1	Dependent
`@tanstack/angular-query-persist-client`	5.104.0 → 5.104.1	Dependent
`@tanstack/eslint-plugin-query`	5.104.0 → 5.104.1	Dependent
`@tanstack/lit-query`	0.2.25 → 0.2.26	Dependent
`@tanstack/preact-query`	5.104.0 → 5.104.1	Dependent
`@tanstack/preact-query-devtools`	5.104.0 → 5.104.1	Dependent
`@tanstack/preact-query-persist-client`	5.104.0 → 5.104.1	Dependent
`@tanstack/query-async-storage-persister`	5.104.0 → 5.104.1	Dependent
`@tanstack/query-broadcast-client-experimental`	5.104.0 → 5.104.1	Dependent
`@tanstack/query-core`	5.104.0 → 5.104.1	Dependent
`@tanstack/query-devtools`	5.104.0 → 5.104.1	Dependent
`@tanstack/query-persist-client-core`	5.104.0 → 5.104.1	Dependent
`@tanstack/query-sync-storage-persister`	5.104.0 → 5.104.1	Dependent
`@tanstack/react-query`	5.104.0 → 5.104.1	Dependent
`@tanstack/react-query-next-experimental`	5.104.0 → 5.104.1	Dependent
`@tanstack/react-query-persist-client`	5.104.0 → 5.104.1	Dependent
`@tanstack/solid-query`	5.104.0 → 5.104.1	Dependent
`@tanstack/solid-query-devtools`	5.104.0 → 5.104.1	Dependent
`@tanstack/solid-query-persist-client`	5.104.0 → 5.104.1	Dependent
`@tanstack/svelte-query`	6.3.0 → 6.3.1	Dependent
`@tanstack/svelte-query-devtools`	6.3.0 → 6.3.1	Dependent
`@tanstack/svelte-query-persist-client`	6.3.0 → 6.3.1	Dependent
`@tanstack/vue-query`	5.104.0 → 5.104.1	Dependent
`@tanstack/vue-query-devtools`	6.3.0 → 6.3.1	Dependent

coderabbitai · 2026-09-29T01:48:11Z

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: TanStack/query/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 2870a38f-89eb-4a91-9627-6751f885f308

📥 Commits

Reviewing files that changed from the base of the PR and between d99c84b and 47ff0b6.

📒 Files selected for processing (5)

.changeset/lazy-devtools-instance.md
packages/react-query-devtools/src/ReactQueryDevtools.tsx
packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx
packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

📝 Walkthrough

Walkthrough

ReactQueryDevtools now creates its devtools instance through a lazy useState initializer. Rerender tests check constructor call counts for both devtools components. A patch changeset records the update.

Changes

Devtools instance initialization

Layer / File(s)	Summary
Instance initialization and rerender coverage `packages/react-query-devtools/src/ReactQueryDevtools.tsx`, `packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx`, `packages/react-query-devtools/src/__tests__/*`, `.changeset/lazy-devtools-instance.md`	`ReactQueryDevtools` now uses a lazy `useState` initializer. The panel initializer was reformatted without changing its constructor arguments. Tests check constructor call counts after rerenders, and the changeset records the patch.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 47ff0

The devtools instance is now initialized lazily, while position changes still update it. No actionable behavior regression is established, so merge risk is minimal.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 47ff0

The devtools components now avoid constructing discarded instances on rerenders. Their configuration, client updates, and mount and cleanup paths remain the same. No new security exposure was identified in the examined code.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

inferred — The examined change affects construction timing within the public React devtools components, not the client or configuration they forward to the downstream devtools instances.

Trust Boundaries and Controls

inferred — No new trust-boundary crossing is evident in the examined initialization path: the retained instances still receive the same client and configuration, and existing effects continue to update and mount them.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 4 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and accurately summarizes the main change: lazy creation of the React Query Devtools instance through a useState initializer. It is specific and related to the full changeset.
Description check	✅ Passed	The description includes the required Changes, Checklist, and Release Impact sections. It explains the implementation, tests, changeset, and completed checklist items.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 4 files. (1 skipped: 1 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-09-29T01:48:15Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@11722

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@11722

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@11722

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 47ff0b6

github-actions · 2026-09-29T01:48:23Z

size-limit report 📦

Path	Size
react full	11.73 KB (0%)
react minimal	8.58 KB (0%)

fix(react-query-devtools): create the devtools instance lazily with '…

47ff0b6

…useState' initializer instead of on every render

sukvvon self-assigned this Sep 29, 2026

Navigation Menu

Uh oh!

fix(react-query-devtools): create the devtools instance lazily with 'useState' initializer instead of on every render - #11722

fix(react-query-devtools): create the devtools instance lazily with 'useState' initializer instead of on every render#11722
sukvvon wants to merge 1 commit into
mainfrom
fix/react-query-devtools-lazy-state

sukvvon commented Sep 29, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

nx-cloud Bot commented Sep 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 29, 2026

Uh oh!

coderabbitai Bot commented Sep 29, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented Sep 29, 2026

Uh oh!

github-actions Bot commented Sep 29, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented Sep 29, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

nx-cloud Bot commented Sep 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 29, 2026

🚀 Changeset Version Preview

🟩 Patch bumps

Uh oh!

coderabbitai Bot commented Sep 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Security Architecture Review

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented Sep 29, 2026

Uh oh!

github-actions Bot commented Sep 29, 2026

size-limit report 📦

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented Sep 29, 2026 •

edited by coderabbitai Bot

Loading

nx-cloud Bot commented Sep 29, 2026 •

edited

Loading

coderabbitai Bot commented Sep 29, 2026 •

edited

Loading