fix:duplicate Devtools UI rendering when React StrictMode is enabled

[xPapla]

fixes #402, fixes #391

🎯 Changes

Previous implementation used separate boolean flags (#isMounted, #isMounting, #abortMount) to track state, which led to race conditions in StrictMode. When mount(), unmount() and mount() were rapidly called, the second mount() would reset the state flags before the first import had a chance to complete its abort check.

I've replaced that with AbortController and #state union to also eliminate illegal state (i.e. #isMounted = true and #isMounting = true).

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 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
  • Fixed duplicate Devtools UI rendering when React StrictMode is enabled.

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactored devtools core state management from three boolean flags to a finite-state machine ('unmounted' | 'mounting' | 'mounted') with AbortController to prevent duplicate UI rendering when React StrictMode remounts components.

Changes

Cohort / File(s)	Summary
Configuration .changeset/legal-trains-throw.md	Added changeset marking patch release for @tanstack/devtools documenting fix for duplicate UI rendering in React StrictMode.
Core State Management packages/devtools/src/core.ts	Replaced multiple boolean tracking flags with unified state field and AbortController. Updated mount(), unmount(), and setConfig() methods to use state machine and abort pending mounts to prevent duplicate initialization.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A mount that doubled, causing strife,
Now tamed with states through StrictMode's life,
AbortController keeps chaos at bay,
One UI renders, hip-hip-hooray! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR directly addresses issue #402 by replacing boolean-flag state management with AbortController and state union, eliminating race conditions that caused duplicate UI rendering under React StrictMode.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the race condition: a changeset file for release notes and internal refactoring of TanStackDevtoolsCore's mount/unmount logic with no extraneous modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main fix: preventing duplicate Devtools UI rendering in React StrictMode by improving mount state management.
Description check	✅ Passed	The pull request description is comprehensive and follows the template structure with all required sections completed.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8cca289

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:sherif,t...	✅ Succeeded	1m 35s	View ↗
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	27s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-25 22:14:43 UTC

[pkg-pr-new]

More templates

• ssr
• @tanstack/devtools-example-preact-basic
• @tanstack/devtools-custom-devtools-preact
• @tanstack/react-devtools-a11y-example
• @tanstack/devtools-example-react-basic
• start-repro
• @tanstack/devtools-custom-devtools
• tanstack-start-example-counter
• @tanstack/devtools-example-react-https
• start
• @tanstack/devtools-example-react-time-travel
• @tanstack/solid-devtools-a11y-example
• @tanstack/devtools-example-solid-basic
• @tanstack/devtools-example-devtools-ui
• @tanstack/devtools-example-solid-start
• @tanstack/query-example-vue-basic

@tanstack/devtools

npm i https://pkg.pr.new/@tanstack/devtools@404

@tanstack/devtools-a11y

npm i https://pkg.pr.new/@tanstack/devtools-a11y@404

@tanstack/devtools-client

npm i https://pkg.pr.new/@tanstack/devtools-client@404

@tanstack/devtools-ui

npm i https://pkg.pr.new/@tanstack/devtools-ui@404

@tanstack/devtools-utils

npm i https://pkg.pr.new/@tanstack/devtools-utils@404

@tanstack/devtools-vite

npm i https://pkg.pr.new/@tanstack/devtools-vite@404

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/@tanstack/devtools-event-bus@404

@tanstack/devtools-event-client

npm i https://pkg.pr.new/@tanstack/devtools-event-client@404

@tanstack/preact-devtools

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

@tanstack/react-devtools

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

@tanstack/solid-devtools

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

@tanstack/vue-devtools

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

commit: 8cca289