From f91e059e43f99ba83844ee8774794277ee8d68ae Mon Sep 17 00:00:00 2001 From: Deepak Sharma Date: Sat, 26 Sep 2026 02:49:11 +0530 Subject: [PATCH 1/2] chore(examples): show devtools in every React example --- examples/react/compiler/package.json | 2 ++ examples/react/compiler/src/index.tsx | 7 +++++++ examples/react/large-form/src/index.tsx | 2 +- examples/react/multi-step-wizard/src/index.tsx | 2 +- .../react/next-server-actions-zod/package.json | 2 ++ .../src/app/devtools.tsx | 15 +++++++++++++++ .../next-server-actions-zod/src/app/page.tsx | 2 ++ .../react/next-server-actions/package.json | 2 ++ .../next-server-actions/src/app/devtools.tsx | 15 +++++++++++++++ .../react/next-server-actions/src/app/page.tsx | 2 ++ examples/react/query-integration/src/index.tsx | 2 +- examples/react/simple/src/index.tsx | 2 +- pnpm-lock.yaml | 18 ++++++++++++++++++ 13 files changed, 69 insertions(+), 4 deletions(-) create mode 100644 examples/react/next-server-actions-zod/src/app/devtools.tsx create mode 100644 examples/react/next-server-actions/src/app/devtools.tsx diff --git a/examples/react/compiler/package.json b/examples/react/compiler/package.json index aafda054ce..23320cb275 100644 --- a/examples/react/compiler/package.json +++ b/examples/react/compiler/package.json @@ -9,7 +9,9 @@ "test:types": "tsc" }, "dependencies": { + "@tanstack/react-devtools": "^0.10.5", "@tanstack/react-form": "^2.0.0-alpha.2", + "@tanstack/react-form-devtools": "^1.0.0-alpha.2", "react": "19.2.8", "react-dom": "19.2.8" }, diff --git a/examples/react/compiler/src/index.tsx b/examples/react/compiler/src/index.tsx index c891059331..d51b3b3383 100644 --- a/examples/react/compiler/src/index.tsx +++ b/examples/react/compiler/src/index.tsx @@ -1,6 +1,8 @@ import * as React from 'react' import { createRoot } from 'react-dom/client' +import { TanStackDevtools } from '@tanstack/react-devtools' +import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' import { useForm } from '@tanstack/react-form' import type { AnyFieldApi } from '@tanstack/react-form' @@ -131,5 +133,10 @@ const rootElement = document.getElementById('root')! createRoot(rootElement).render( + + , ) diff --git a/examples/react/large-form/src/index.tsx b/examples/react/large-form/src/index.tsx index ff73d4079a..4f38bf6b7b 100644 --- a/examples/react/large-form/src/index.tsx +++ b/examples/react/large-form/src/index.tsx @@ -13,7 +13,7 @@ createRoot(rootElement).render( , diff --git a/examples/react/multi-step-wizard/src/index.tsx b/examples/react/multi-step-wizard/src/index.tsx index ff73d4079a..4f38bf6b7b 100644 --- a/examples/react/multi-step-wizard/src/index.tsx +++ b/examples/react/multi-step-wizard/src/index.tsx @@ -13,7 +13,7 @@ createRoot(rootElement).render( , diff --git a/examples/react/next-server-actions-zod/package.json b/examples/react/next-server-actions-zod/package.json index 0d0c00e2cb..a5b2d0ed50 100644 --- a/examples/react/next-server-actions-zod/package.json +++ b/examples/react/next-server-actions-zod/package.json @@ -8,7 +8,9 @@ "_test:types": "tsc" }, "dependencies": { + "@tanstack/react-devtools": "^0.10.5", "@tanstack/react-form": "^2.0.0-alpha.2", + "@tanstack/react-form-devtools": "^1.0.0-alpha.2", "@tanstack/react-form-nextjs": "^2.0.0-alpha.2", "next": "16.3.0", "react": "19.2.8", diff --git a/examples/react/next-server-actions-zod/src/app/devtools.tsx b/examples/react/next-server-actions-zod/src/app/devtools.tsx new file mode 100644 index 0000000000..1de24e7aff --- /dev/null +++ b/examples/react/next-server-actions-zod/src/app/devtools.tsx @@ -0,0 +1,15 @@ +'use client' + +import { TanStackDevtools } from '@tanstack/react-devtools' +import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' + +export function Devtools() { + return ( + + ) +} diff --git a/examples/react/next-server-actions-zod/src/app/page.tsx b/examples/react/next-server-actions-zod/src/app/page.tsx index 7d8c877c1d..395c64f641 100644 --- a/examples/react/next-server-actions-zod/src/app/page.tsx +++ b/examples/react/next-server-actions-zod/src/app/page.tsx @@ -1,9 +1,11 @@ import { ClientComp } from './client-component' +import { Devtools } from './devtools' export default function Home() { return ( <> + ) } diff --git a/examples/react/next-server-actions/package.json b/examples/react/next-server-actions/package.json index f24b75ad60..c65884cc93 100644 --- a/examples/react/next-server-actions/package.json +++ b/examples/react/next-server-actions/package.json @@ -8,7 +8,9 @@ "_test:types": "tsc" }, "dependencies": { + "@tanstack/react-devtools": "^0.10.5", "@tanstack/react-form": "^2.0.0-alpha.2", + "@tanstack/react-form-devtools": "^1.0.0-alpha.2", "@tanstack/react-form-nextjs": "^2.0.0-alpha.2", "next": "16.3.0", "react": "19.2.8", diff --git a/examples/react/next-server-actions/src/app/devtools.tsx b/examples/react/next-server-actions/src/app/devtools.tsx new file mode 100644 index 0000000000..1de24e7aff --- /dev/null +++ b/examples/react/next-server-actions/src/app/devtools.tsx @@ -0,0 +1,15 @@ +'use client' + +import { TanStackDevtools } from '@tanstack/react-devtools' +import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' + +export function Devtools() { + return ( + + ) +} diff --git a/examples/react/next-server-actions/src/app/page.tsx b/examples/react/next-server-actions/src/app/page.tsx index 7d8c877c1d..395c64f641 100644 --- a/examples/react/next-server-actions/src/app/page.tsx +++ b/examples/react/next-server-actions/src/app/page.tsx @@ -1,9 +1,11 @@ import { ClientComp } from './client-component' +import { Devtools } from './devtools' export default function Home() { return ( <> + ) } diff --git a/examples/react/query-integration/src/index.tsx b/examples/react/query-integration/src/index.tsx index 5c782cd67d..0278e5a801 100644 --- a/examples/react/query-integration/src/index.tsx +++ b/examples/react/query-integration/src/index.tsx @@ -16,7 +16,7 @@ createRoot(rootElement).render( , diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx index dec6bcd0c1..d57a4edf76 100644 --- a/examples/react/simple/src/index.tsx +++ b/examples/react/simple/src/index.tsx @@ -135,7 +135,7 @@ createRoot(rootElement).render( , diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 21efb7f19f..f190158397 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1078,9 +1078,15 @@ importers: examples/react/compiler: dependencies: + '@tanstack/react-devtools': + specifier: ^0.10.5 + version: 0.10.9(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(csstype@3.2.3)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(solid-js@1.9.14) '@tanstack/react-form': specifier: ^2.0.0-alpha.2 version: link:../../../packages/react-form + '@tanstack/react-form-devtools': + specifier: ^1.0.0-alpha.2 + version: link:../../../packages/react-form-devtools react: specifier: 19.2.8 version: 19.2.8 @@ -1326,9 +1332,15 @@ importers: examples/react/next-server-actions: dependencies: + '@tanstack/react-devtools': + specifier: ^0.10.5 + version: 0.10.9(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(csstype@3.2.3)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(solid-js@1.9.14) '@tanstack/react-form': specifier: ^2.0.0-alpha.2 version: link:../../../packages/react-form + '@tanstack/react-form-devtools': + specifier: ^1.0.0-alpha.2 + version: link:../../../packages/react-form-devtools '@tanstack/react-form-nextjs': specifier: ^2.0.0-alpha.2 version: link:../../../packages/react-form-nextjs @@ -1357,9 +1369,15 @@ importers: examples/react/next-server-actions-zod: dependencies: + '@tanstack/react-devtools': + specifier: ^0.10.5 + version: 0.10.9(@types/react-dom@19.2.4(@types/react@19.2.18))(@types/react@19.2.18)(csstype@3.2.3)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(solid-js@1.9.14) '@tanstack/react-form': specifier: ^2.0.0-alpha.2 version: link:../../../packages/react-form + '@tanstack/react-form-devtools': + specifier: ^1.0.0-alpha.2 + version: link:../../../packages/react-form-devtools '@tanstack/react-form-nextjs': specifier: ^2.0.0-alpha.2 version: link:../../../packages/react-form-nextjs From d063eb3dd03b984dfa6a48fc5b2a10810ff6a291 Mon Sep 17 00:00:00 2001 From: Deepak Sharma Date: Sat, 26 Sep 2026 12:50:35 +0530 Subject: [PATCH 2/2] [v2] chore(examples): render every React example in StrictMode --- examples/react/array/src/index.tsx | 8 ++++++-- examples/react/basic-splitting-form/src/index.tsx | 7 ++++++- examples/react/basic/src/index.tsx | 7 ++++++- examples/react/expo/index.ts | 7 ++++++- examples/react/field-groups/src/index.tsx | 7 ++++++- examples/react/nextjs/next.config.ts | 4 +++- examples/react/ui-integration-dnd-kit/src/index.tsx | 7 ++++++- examples/react/ui-integration-shadcn/src/index.tsx | 7 ++++++- 8 files changed, 45 insertions(+), 9 deletions(-) diff --git a/examples/react/array/src/index.tsx b/examples/react/array/src/index.tsx index 482eba9e94..96643d8108 100644 --- a/examples/react/array/src/index.tsx +++ b/examples/react/array/src/index.tsx @@ -3,7 +3,7 @@ import { useForm } from '@tanstack/react-form' import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' import ReactDOM from 'react-dom/client' import './index.css' -import { useMemo, useRef, useState } from 'react' +import { StrictMode, useMemo, useRef, useState } from 'react' function ArrayForm({ items }: { items: Array }) { const form = useForm({ @@ -120,4 +120,8 @@ function App() { ) } -ReactDOM.createRoot(document.getElementById('root')!).render() +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/examples/react/basic-splitting-form/src/index.tsx b/examples/react/basic-splitting-form/src/index.tsx index 5e557c3ea3..5c89bbb9bf 100644 --- a/examples/react/basic-splitting-form/src/index.tsx +++ b/examples/react/basic-splitting-form/src/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react' import { TanStackDevtools } from '@tanstack/react-devtools' import { useForm } from '@tanstack/react-form' import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' @@ -58,4 +59,8 @@ function App() { ) } -ReactDOM.createRoot(document.getElementById('root')!).render() +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/examples/react/basic/src/index.tsx b/examples/react/basic/src/index.tsx index a045cb10d8..c8136aceab 100644 --- a/examples/react/basic/src/index.tsx +++ b/examples/react/basic/src/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react' import { TanStackDevtools } from '@tanstack/react-devtools' import { useForm } from '@tanstack/react-form' import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' @@ -139,4 +140,8 @@ function App() { ) } -ReactDOM.createRoot(document.getElementById('root')!).render() +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/examples/react/expo/index.ts b/examples/react/expo/index.ts index 81a299a637..b3720bff61 100644 --- a/examples/react/expo/index.ts +++ b/examples/react/expo/index.ts @@ -1,5 +1,10 @@ +import { StrictMode, createElement } from 'react' import { registerRootComponent } from 'expo' import App from './app/index' -registerRootComponent(App) +function Root() { + return createElement(StrictMode, null, createElement(App)) +} + +registerRootComponent(Root) diff --git a/examples/react/field-groups/src/index.tsx b/examples/react/field-groups/src/index.tsx index 2ae25b15ed..27763b01d0 100644 --- a/examples/react/field-groups/src/index.tsx +++ b/examples/react/field-groups/src/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react' import { TanStackDevtools } from '@tanstack/react-devtools' import { useForm } from '@tanstack/react-form' import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' @@ -143,4 +144,8 @@ function App() { ) } -ReactDOM.createRoot(document.getElementById('root')!).render() +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/examples/react/nextjs/next.config.ts b/examples/react/nextjs/next.config.ts index 1830ed6a93..095b6a669e 100644 --- a/examples/react/nextjs/next.config.ts +++ b/examples/react/nextjs/next.config.ts @@ -1,5 +1,7 @@ import type { NextConfig } from 'next' -const nextConfig: NextConfig = {/* config options here */} +const nextConfig: NextConfig = { + reactStrictMode: true, +} export default nextConfig diff --git a/examples/react/ui-integration-dnd-kit/src/index.tsx b/examples/react/ui-integration-dnd-kit/src/index.tsx index f7be5b0400..614d05c7db 100644 --- a/examples/react/ui-integration-dnd-kit/src/index.tsx +++ b/examples/react/ui-integration-dnd-kit/src/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react' import { TanStackDevtools } from '@tanstack/react-devtools' import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' import { createRoot } from 'react-dom/client' @@ -25,4 +26,8 @@ function App() { ) } -createRoot(document.getElementById('root')!).render() +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/examples/react/ui-integration-shadcn/src/index.tsx b/examples/react/ui-integration-shadcn/src/index.tsx index 97c609d593..3727fb8abb 100644 --- a/examples/react/ui-integration-shadcn/src/index.tsx +++ b/examples/react/ui-integration-shadcn/src/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import { TanStackDevtools } from '@tanstack/react-devtools' @@ -20,4 +21,8 @@ function App() { ) } -ReactDOM.createRoot(document.getElementById('root')!).render() +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +)