Restrict useFormState in Server Components (#55417)

I based my changes on #49331, which did this for useFormStatus.

While I was editing the file, I noticed that useOptimistic was incorrectly categorized as a `react-dom` package export, but it's actually exported from `react`. So I fixed that, too.

Co-authored-by: Zack Tanner <1939140+ztanner@users.noreply.github.com>

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

@@ -592,7 +592,7 @@ pub fn server_components<C: Comments>(
             JsWord::from("flushSync"),
             JsWord::from("unstable_batchedUpdates"),
             JsWord::from("experimental_useFormStatus"),
-            JsWord::from("experimental_useOptimistic"),
+            JsWord::from("experimental_useFormState"),
         ],
         invalid_server_react_apis: vec![
             JsWord::from("Component"),
@@ -609,6 +609,7 @@ pub fn server_components<C: Comments>(
             JsWord::from("useState"),
             JsWord::from("useSyncExternalStore"),
             JsWord::from("useTransition"),
+            JsWord::from("experimental_useOptimistic"),
         ],
     })
 }

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

@@ -16,6 +16,8 @@ import {
   useSyncExternalStore,
 } from 'react'
 
+import { experimental_useOptimistic as useOptimistic } from 'react'
+
 export default function () {
   return null
 }

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { createContext } from 'react';
 import { useEffect, useImperativeHandle } from 'react';
 import { Component, createFactory, PureComponent, useDeferredValue, useInsertionEffect, useLayoutEffect, useReducer, useRef, useSyncExternalStore } from 'react';
+import { experimental_useOptimistic as useOptimistic } from 'react';
 export default function() {
     return null;
 }

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

@@ -97,3 +97,10 @@
     :   ^^^^^^^^^^^^^^^^^^^^
  17 | } from 'react'
     `----
+
+  x NEXT_RSC_ERR_REACT_API: experimental_useOptimistic
+    ,-[input.js:18:1]
+ 18 | 
+ 19 | import { experimental_useOptimistic as useOptimistic } from 'react'
+    :          ^^^^^^^^^^^^^^^^^^^^^^^^^^
+    `----

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

@@ -1,8 +1,8 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
 
 import {
-  experimental_useOptimistic as useOptimistic,
   experimental_useFormStatus,
+  experimental_useFormState,
 } from 'react-dom'
 
 export default function () {

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_useOptimistic as useOptimistic, experimental_useFormStatus } from 'react-dom';
+import { experimental_useFormStatus, experimental_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_useOptimistic
+  x NEXT_RSC_ERR_REACT_API: experimental_useFormStatus
    ,-[input.js:3:1]
  3 | import {
- 4 |   experimental_useOptimistic as useOptimistic,
+ 4 |   experimental_useFormStatus,
    :   ^^^^^^^^^^^^^^^^^^^^^^^^^^
- 5 |   experimental_useFormStatus,
+ 5 |   experimental_useFormState,
    `----
 
-  x NEXT_RSC_ERR_REACT_API: experimental_useFormStatus
+  x NEXT_RSC_ERR_REACT_API: experimental_useFormState
    ,-[input.js:4:1]
- 4 |   experimental_useOptimistic as useOptimistic,
- 5 |   experimental_useFormStatus,
-   :   ^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 4 |   experimental_useFormStatus,
+ 5 |   experimental_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,8 +1,8 @@
 import { findDOMNode, flushSync, unstable_batchedUpdates } from 'react-dom'
 
 import {
-  experimental_useOptimistic as useOptimistic,
   experimental_useFormStatus,
+  experimental_useFormState,
 } from 'react-dom'
 
 export default function () {

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

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

test/development/acceptance-app/server-components.test.ts

@@ -258,19 +258,12 @@ describe('Error Overlay for server components', () => {
       )
 
       await check(async () => {
-        expect(
-          await browser
-            .waitForElementByCss('#nextjs__container_errors_desc')
-            .text()
-        ).toContain(
-          'experimental_useOptimistic only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component'
-        )
+        const html = await browser.eval('document.documentElement.innerHTML')
+        expect(html).toContain('experimental_useOptimistic')
         return 'success'
       }, 'success')
 
-      expect(next.cliOutput).toContain(
-        'experimental_useOptimistic only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component'
-      )
+      expect(next.cliOutput).toContain('experimental_useOptimistic')
 
       await cleanup()
     })