[v2] chore(examples): devtools and StrictMode in every React example

[dasjideepak]

🎯 Changes

Part of #2305. This covers the devtools item ("Include TanStackDevtools in every example with hideUntilHover: false") and StrictMode in every example.

Devtools

• hideUntilHover: true → false in react/simple, react/large-form, react/multi-step-wizard and react/query-integration, the only React examples still hiding the panel.
• Added devtools to react/compiler, set up the same way as react/simple: TanStackDevtools with formDevtoolsPlugin(), rendered next to <App />.
• Added devtools to react/next-server-actions and react/next-server-actions-zod, reusing the 'use client' Devtools component from react/nextjs and rendering it in page.tsx next to ClientComp.
• The new dependencies use the same versions as the other React examples, and pnpm-lock.yaml only gains those entries.

StrictMode (second commit)

• Wrapped <App /> in React.StrictMode in the 6 Vite examples that rendered without it: array, basic, basic-splitting-form, field-groups, ui-integration-dnd-kit and ui-integration-shadcn, same pattern as simple and large-form.
• react/nextjs: set reactStrictMode: true in next.config.ts, matching the two server-actions examples.
• react/expo: index.ts registers a small Root that renders App inside StrictMode (createElement, since the entry is .ts).
• Already in StrictMode and unchanged: compiler, large-form, multi-step-wizard, query-integration, simple, standard-schema, and tanstack-start (Start's default client entry hydrates inside <StrictMode>). The other frameworks have no StrictMode equivalent.

Not included:

• Solid examples. On alpha, @tanstack/solid-form-devtools currently exports only a placeholder, so there's no form plugin to add yet. Happy to follow up once it lands.
• react/expo. The web devtools panel doesn't apply to React Native.

I built all 7 devtools examples locally (vite build and next build), and ran tsc plus vite build on each StrictMode example (tsc for nextjs and expo). pnpm test:sherif, pnpm test:knip, eslint and prettier pass on the changed files.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested code changes locally with pnpm test:pr, or these tests do not apply to this pull request. (Examples only; I built each changed example and ran sherif, knip, eslint and prettier.)
• I 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).

@LeCarbonator, ready for review whenever you get to it. It's independent of #2405 and doesn't touch the same files. (StrictMode was briefly a separate PR, #2409; I moved it here to keep the series smaller.)

Summary by CodeRabbit

• New Features
  • Added form developer tools to the React Compiler and Next.js server action examples.
• Updates
  • Developer tools are now visible by default in several React examples instead of appearing only on hover.
  • Several React examples now run with Strict Mode enabled.

[coderabbitai]

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/form/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: ec343662-2d6f-485f-8325-a7aebd7b9ace

📥 Commits

Reviewing files that changed from the base of the PR and between f91e059 and d063eb3.

📒 Files selected for processing (8)

• examples/react/array/src/index.tsx
• examples/react/basic-splitting-form/src/index.tsx
• examples/react/basic/src/index.tsx
• examples/react/expo/index.ts
• examples/react/field-groups/src/index.tsx
• examples/react/nextjs/next.config.ts
• examples/react/ui-integration-dnd-kit/src/index.tsx
• examples/react/ui-integration-shadcn/src/index.tsx

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

---

📝 Walkthrough

Walkthrough

Several React examples add TanStack Form Devtools. Other examples change devtools visibility or enable React Strict Mode.

Changes

React Devtools examples

Layer / File(s)	Summary
Add Form Devtools to examples examples/react/compiler/*, examples/react/next-server-actions*/src/app/*, examples/react/next-server-actions*/package.json	The compiler and Next.js server action examples add React Devtools dependencies and render TanStack Devtools with the form devtools plugin.
Show devtools without hover examples/react/large-form/src/index.tsx, examples/react/multi-step-wizard/src/index.tsx, examples/react/query-integration/src/index.tsx, examples/react/simple/src/index.tsx	These examples set hideUntilHover to false.

React Strict Mode examples

Layer / File(s)	Summary
Enable Strict Mode in example entry points examples/react/array/src/index.tsx, examples/react/basic-splitting-form/src/index.tsx, examples/react/basic/src/index.tsx, examples/react/expo/index.ts, examples/react/field-groups/src/index.tsx, examples/react/nextjs/next.config.ts, examples/react/ui-integration-dnd-kit/src/index.tsx, examples/react/ui-integration-shadcn/src/index.tsx	These examples wrap their app in React Strict Mode or enable reactStrictMode in Next.js.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to d063e

The PR adds Form Devtools, changes their visibility, and enables Strict Mode in React examples. Inspection found no concrete defect requiring resolution, so no material merge risk remains.

Security Architecture Review

Security architecture risk: 🔵 Low · up to d063e

The new devtools UI is confined to examples. The reviewed components do not receive page data or gain server-action authority. No introduced security issue was identified, but incomplete coverage prevents a negligible-risk conclusion.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The evidenced exposure is the devtools UI in example application render trees; the reviewed additions do not show a new server-side authority or data-store access path.

Trust Boundaries and Controls

• observed — The new Next.js Devtools modules are client components mounted by pages, with no props supplied at those mounting sites.

🚥 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 12 functions across 17 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly summarizes both primary changes: adding Devtools and enabling StrictMode across the applicable React examples.
Description check	✅ Passed	The description follows the required template, explains the changes and exclusions, records testing, completes the checklist, and identifies the change as dev-only with no release impact.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• 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

• X
• Mastodon
• Reddit
• LinkedIn

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