Update name to useFormStatus

Author: josephsavona

compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts

@@ -11,7 +11,7 @@ import {
   BuiltInArrayId,
   BuiltInUseActionStateId,
   BuiltInUseEffectHookId,
-  BuiltInUseFormStateId,
+  BuiltInUseFormStatusId,
   BuiltInUseInsertionEffectHookId,
   BuiltInUseLayoutEffectHookId,
   BuiltInUseOperatorId,
@@ -281,13 +281,13 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
     }),
   ],
   [
-    "useFormState",
+    "useFormStatus",
     addHook(DEFAULT_SHAPES, {
       positionalParams: [],
       restParam: Effect.Freeze,
-      returnType: { kind: "Object", shapeId: BuiltInUseFormStateId },
+      returnType: { kind: "Object", shapeId: BuiltInUseFormStatusId },
       calleeEffect: Effect.Read,
-      hookKind: "useFormState",
+      hookKind: "useFormStatus",
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.State,
     }),

compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts

@@ -1555,13 +1555,15 @@ export function isSetActionStateType(id: Identifier): boolean {
   );
 }
 
-export function isUseFormStateType(id: Identifier): boolean {
-  return id.type.kind === "Object" && id.type.shapeId === "BuiltInUseFormState";
+export function isUseFormStatusType(id: Identifier): boolean {
+  return (
+    id.type.kind === "Object" && id.type.shapeId === "BuiltInUseFormStatus"
+  );
 }
 
-export function isSetFormStateType(id: Identifier): boolean {
+export function isSetFormStatusType(id: Identifier): boolean {
   return (
-    id.type.kind === "Function" && id.type.shapeId === "BuiltInSetFormState"
+    id.type.kind === "Function" && id.type.shapeId === "BuiltInSetFormStatus"
   );
 }
 
@@ -1577,7 +1579,7 @@ export function isStableType(id: Identifier): boolean {
   return (
     isSetStateType(id) ||
     isSetActionStateType(id) ||
-    isSetFormStateType(id) ||
+    isSetFormStatusType(id) ||
     isDispatcherType(id)
   );
 }

compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts

@@ -119,7 +119,7 @@ export type HookKind =
   | "useContext"
   | "useState"
   | "useActionState"
-  | "useFormState"
+  | "useFormStatus"
   | "useReducer"
   | "useRef"
   | "useEffect"
@@ -199,8 +199,8 @@ export const BuiltInUseStateId = "BuiltInUseState";
 export const BuiltInSetStateId = "BuiltInSetState";
 export const BuiltInUseActionStateId = "BuiltInUseActionState";
 export const BuiltInSetActionStateId = "BuiltInSetActionState";
-export const BuiltInUseFormStateId = "BuiltInUseFormState";
-export const BuiltInSetFormStateId = "BuiltInSetFormState";
+export const BuiltInUseFormStatusId = "BuiltInUseFormStatus";
+export const BuiltInSetFormStatusId = "BuiltInSetFormStatus";
 export const BuiltInUseRefId = "BuiltInUseRefId";
 export const BuiltInRefValueId = "BuiltInRefValue";
 export const BuiltInMixedReadonlyId = "BuiltInMixedReadonly";
@@ -421,7 +421,7 @@ addObject(BUILTIN_SHAPES, BuiltInUseActionStateId, [
   ],
 ]);
 
-addObject(BUILTIN_SHAPES, BuiltInUseFormStateId, [
+addObject(BUILTIN_SHAPES, BuiltInUseFormStatusId, [
   ["0", { kind: "Poly" }],
   [
     "1",
@@ -435,7 +435,7 @@ addObject(BUILTIN_SHAPES, BuiltInUseFormStateId, [
         calleeEffect: Effect.Read,
         returnValueKind: ValueKind.Primitive,
       },
-      BuiltInSetFormStateId
+      BuiltInSetFormStatusId
     ),
   ],
 ]);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useActionState-dispatch-considered-as-non-reactive.expect.md

@@ -28,26 +28,20 @@ import { c as _c } from "react/compiler-runtime";
 import { useActionState } from "react";
 
 function Component() {
-  const $ = _c(2);
+  const $ = _c(1);
   const [actionState, dispatchAction] = useActionState();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const onSubmitAction = () => {
       dispatchAction();
     };
+
+    t0 = <Foo onSubmitAction={onSubmitAction} />;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const onSubmitAction = t0;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <Foo onSubmitAction={onSubmitAction} />;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
+  return t0;
 }
 
 function Foo() {}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.expect.md

@@ -2,10 +2,10 @@
 ## Input
 
 ```javascript
-import { useFormState } from "react-dom";
+import { useFormStatus } from "react-dom";
 
 function Component() {
-  const [formState, dispatchForm] = useFormState();
+  const [formState, dispatchForm] = useFormStatus();
   const onSubmitForm = () => {
     dispatchForm();
   };
@@ -25,29 +25,23 @@ export const FIXTURE_ENTRYPOINT = {
 
 ```javascript
 import { c as _c } from "react/compiler-runtime";
-import { useFormState } from "react-dom";
+import { useFormStatus } from "react-dom";
 
 function Component() {
-  const $ = _c(2);
-  const [formState, dispatchForm] = useFormState();
+  const $ = _c(1);
+  const [formState, dispatchForm] = useFormStatus();
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const onSubmitForm = () => {
       dispatchForm();
     };
+
+    t0 = <Foo onSubmitForm={onSubmitForm} />;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const onSubmitForm = t0;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <Foo onSubmitForm={onSubmitForm} />;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
+  return t0;
 }
 
 function Foo() {}
@@ -60,4 +54,4 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) 
+(kind: exception) object is not iterable (cannot read property Symbol(Symbol.iterator))

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useFormState-dispatch-considered-as-non-reactive.js

@@ -1,7 +1,7 @@
-import { useFormState } from "react-dom";
+import { useFormStatus } from "react-dom";
 
 function Component() {
-  const [formState, dispatchForm] = useFormState();
+  const [formState, dispatchForm] = useFormStatus();
   const onSubmitForm = () => {
     dispatchForm();
   };