useFormState and useFormStatus are no longer experimental APIs and exist in canary and experimental builds without the experimental_ prefix. This commit updates our docs, examples, and tests to reflect this.

Author: gnoff

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;