useFormState and useFormStatus are no longer experimental APIs and ex…

…ist in canary and experimental builds without the `experimental_` prefix. This commit updates our docs, examples, and tests to reflect this.

docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx

@@ -377,7 +377,7 @@ For example, the following submit button:
 ```tsx filename="app/submit-button.tsx" switcher
 'use client'
 
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 
 export function SubmitButton() {
   const { pending } = useFormStatus()
@@ -393,7 +393,7 @@ export function SubmitButton() {
 ```jsx filename="app/submit-button.jsx" switcher
 'use client'
 
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 
 export function SubmitButton() {
   const { pending } = useFormStatus()
@@ -557,8 +557,7 @@ Then, from a Client Component, you can read this value and display an error mess
 ```tsx filename="app/add-form.tsx" switcher
 'use client'
 
-import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormState, useFormStatus } from 'react-dom'
 import { createTodo } from '@/app/actions'
 
 const initialState = {
@@ -594,8 +593,7 @@ export function AddForm() {
 ```jsx filename="app/add-form.jsx" switcher
 'use client'
 
-import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormState, useFormStatus } from 'react-dom'
 import { createTodo } from '@/app/actions'
 
 const initialState = {

examples/next-forms/app/add-form.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 import { createTodo } from '@/app/actions'
 
 const initialState = {

examples/next-forms/app/delete-form.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormState, useFormStatus } from 'react-dom'
 import { deleteTodo } from '@/app/actions'
 
 const initialState = {

examples/with-fauna/components/EntryForm.tsx

@@ -3,8 +3,7 @@
 import cn from 'classnames'
 import { createEntryAction } from '@/actions/entry'
 // @ts-ignore
-import { experimental_useFormState as useFormState } from 'react-dom'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormState, useFormStatus } from 'react-dom'
 import LoadingSpinner from '@/components/LoadingSpinner'
 import SuccessMessage from '@/components/SuccessMessage'
 import ErrorMessage from '@/components/ErrorMessage'
@@ -26,7 +25,7 @@ export default function EntryForm() {
 
   return (
     <>
-      <form className="flex relative my-4" action={formAction}>
+      <form className="relative flex my-4" action={formAction}>
         <input
           required
           className={cn(inputClasses, 'w-1/3 mr-2 px-4')}

packages/next-swc/crates/core/src/react_server_components.rs

@@ -612,8 +612,8 @@ pub fn server_components<C: Comments>(
             JsWord::from("findDOMNode"),
             JsWord::from("flushSync"),
             JsWord::from("unstable_batchedUpdates"),
-            JsWord::from("experimental_useFormStatus"),
-            JsWord::from("experimental_useFormState"),
+            JsWord::from("useFormStatus"),
+            JsWord::from("useFormState"),
         ],
         invalid_server_react_apis: vec![
             JsWord::from("Component"),

packages/next-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/input.js

@@ -1,9 +1,6 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
 
-import {
-  experimental_useFormStatus,
-  experimental_useFormState,
-} from 'react-dom'
+import { useFormStatus, useFormState } from 'react-dom'
 
 export default function () {
   return null

packages/next-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.js

@@ -1,5 +1,5 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
-import { experimental_useFormStatus, experimental_useFormState } from 'react-dom';
+import { useFormStatus, useFormState } from 'react-dom';
 export default function() {
     return null;
 }

packages/next-swc/crates/core/tests/errors/react-server-components/server-graph/react-dom-api/output.stderr

@@ -17,18 +17,18 @@
    :                                  ^^^^^^^^^^^^^^^^^^^^^^^
    `----
 
-  x NEXT_RSC_ERR_REACT_API: experimental_useFormStatus
+  x NEXT_RSC_ERR_REACT_API: useFormStatus
    ,-[input.js:3:1]
  3 | import {
- 4 |   experimental_useFormStatus,
+ 4 |   useFormStatus,
    :   ^^^^^^^^^^^^^^^^^^^^^^^^^^
- 5 |   experimental_useFormState,
+ 5 |   useFormState,
    `----
 
-  x NEXT_RSC_ERR_REACT_API: experimental_useFormState
+  x NEXT_RSC_ERR_REACT_API: useFormState
    ,-[input.js:4:1]
- 4 |   experimental_useFormStatus,
- 5 |   experimental_useFormState,
+ 4 |   useFormStatus,
+ 5 |   useFormState,
    :   ^^^^^^^^^^^^^^^^^^^^^^^^^
  6 | } from 'react-dom'
    `----

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/input.js

@@ -1,9 +1,6 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
 
-import {
-  experimental_useFormStatus,
-  experimental_useFormState,
-} from 'react-dom'
+import { useFormStatus, useFormState } from 'react-dom'
 
 export default function () {
   return null

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph-no-checks/react-dom-api/output.js

@@ -1,5 +1,5 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom';
-import { experimental_useFormStatus, experimental_useFormState } from 'react-dom';
+import { useFormStatus, useFormState } from 'react-dom';
 
 export default function() {
     return null;

packages/next/src/client/app-index.tsx

@@ -299,7 +299,7 @@ export function hydrate() {
     React.startTransition(() =>
       (ReactDOMClient as any).hydrateRoot(appElement, reactEl, {
         ...options,
-        experimental_formState: initialFormStateData,
+        formState: initialFormStateData,
       })
     )
   }

packages/next/src/server/app-render/app-render.tsx

@@ -675,7 +675,7 @@ async function renderToHTMLOrFlightImpl(
             nonce,
             // Include hydration scripts in the HTML
             bootstrapScripts: [bootstrapScript],
-            experimental_formState: formState,
+            formState,
           },
         })
 
@@ -825,7 +825,7 @@ async function renderToHTMLOrFlightImpl(
               nonce,
               // Include hydration scripts in the HTML
               bootstrapScripts: [errorBootstrapScript],
-              experimental_formState: formState,
+              formState,
             },
           })
 

test/e2e/app-dir/actions-navigation/app/nested-folder/(foo)/product-category/[...slugs]/page.js

@@ -1,5 +1,5 @@
 'use client'
-import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import { useFormStatus } from 'react-dom'
 import { addToCart } from './actions'
 
 function SubmitButton() {

test/e2e/app-dir/actions/app/client/form-state/page-2/page.js

@@ -1,11 +1,11 @@
 'use client'
 
-import { experimental_useFormState } from 'react-dom'
+import { useFormState } from 'react-dom'
 import { appendName } from '../actions'
 import { useEffect, useState } from 'react'
 
 export default function Page() {
-  const [state, appendNameFormAction] = experimental_useFormState(
+  const [state, appendNameFormAction] = useFormState(
     appendName,
     'initial-state',
     '/client/form-state'

test/e2e/app-dir/actions/app/client/form-state/page.js

@@ -1,11 +1,11 @@
 'use client'
 
-import { experimental_useFormState } from 'react-dom'
+import { useFormState } from 'react-dom'
 import { appendName } from './actions'
 import { useEffect, useState } from 'react'
 
 export default function Page() {
-  const [state, appendNameFormAction] = experimental_useFormState(
+  const [state, appendNameFormAction] = useFormState(
     appendName,
     'initial-state',
     '/client/form-state'