Warn when using useFormState (#28668)

## Overview useFormState has been replaced with useActionState. Warn when it's used. Also removes the `experimental_useFormState` warnings. DiffTrain build for commit 18812b6.
facebook · Mar 29, 2024 · f477752 · f477752
1 parent d777384
commit f477752
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 7 deletions.
diff --git a/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/...ook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<2123de3808a6ddc6df79e3bd382b5c8a>>
+ * @generated SignedSource<<bcb9ae48fd24d391c11eab7a159bcc36>>
  */
 
 "use strict";
@@ -7631,11 +7631,13 @@ if (__DEV__) {
     var didWarnUncachedGetSnapshot;
     var didWarnAboutUseWrappedInTryCatch;
     var didWarnAboutAsyncClientComponent;
+    var didWarnAboutUseFormState;
 
     {
       didWarnAboutMismatchedHooksForComponent = new Set();
       didWarnAboutUseWrappedInTryCatch = new Set();
       didWarnAboutAsyncClientComponent = new Set();
+      didWarnAboutUseFormState = new Set();
     } // The effect "instance" is a shared object that remains the same for the entire
     // lifetime of an effect. In Rust terms, a RefCell. We use it to store the
     // "destroy" function that is returned from an effect, because that is stateful.
@@ -7778,6 +7780,24 @@ if (__DEV__) {
       }
     }
 
+    function warnOnUseFormStateInDev() {
+      {
+        var componentName = getComponentNameFromFiber(
+          currentlyRenderingFiber$1
+        );
+
+        if (!didWarnAboutUseFormState.has(componentName)) {
+          didWarnAboutUseFormState.add(componentName);
+
+          error(
+            "ReactDOM.useFormState has been deprecated and replaced by " +
+              "React.useActionState. Please update %s to use React.useActionState.",
+            componentName
+          );
+        }
+      }
+    }
+
     function warnIfAsyncClientComponent(Component) {
       {
         // This dev-only check only works for detecting native async functions,
@@ -10626,6 +10646,7 @@ if (__DEV__) {
           function useFormState(action, initialState, permalink) {
             currentHookNameInDev = "useFormState";
             updateHookTypesDev();
+            warnOnUseFormStateInDev();
             return mountActionState(action, initialState);
           };
 
@@ -10780,6 +10801,7 @@ if (__DEV__) {
         ) {
           currentHookNameInDev = "useFormState";
           updateHookTypesDev();
+          warnOnUseFormStateInDev();
           return updateActionState(action);
         };
 
@@ -10939,6 +10961,7 @@ if (__DEV__) {
         ) {
           currentHookNameInDev = "useFormState";
           updateHookTypesDev();
+          warnOnUseFormStateInDev();
           return rerenderActionState(action);
         };
 
@@ -26249,7 +26272,7 @@ if (__DEV__) {
       return root;
     }
 
-    var ReactVersion = "19.0.0-canary-5cab92f5";
+    var ReactVersion = "19.0.0-canary-bf3f1a01";
 
     // Might add PROFILE later.
 

diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION
@@ -1 +1 @@
-a73c3450e1b528fa6cb3e94fa4d4359c7a4b61f1
+18812b645c93a9c42f931fae57bbbab9c1f402b8
diff --git a/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/...rce/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<359ce6fb063e371084bf38d1957253bd>>
+ * @generated SignedSource<<dbb809a434e7b6781bf5289b294a7b12>>
  */
 
 "use strict";
@@ -11435,11 +11435,13 @@ to return true:wantsResponderID|                            |
     var didWarnUncachedGetSnapshot;
     var didWarnAboutUseWrappedInTryCatch;
     var didWarnAboutAsyncClientComponent;
+    var didWarnAboutUseFormState;
 
     {
       didWarnAboutMismatchedHooksForComponent = new Set();
       didWarnAboutUseWrappedInTryCatch = new Set();
       didWarnAboutAsyncClientComponent = new Set();
+      didWarnAboutUseFormState = new Set();
     } // The effect "instance" is a shared object that remains the same for the entire
     // lifetime of an effect. In Rust terms, a RefCell. We use it to store the
     // "destroy" function that is returned from an effect, because that is stateful.
@@ -11582,6 +11584,24 @@ to return true:wantsResponderID|                            |
       }
     }
 
+    function warnOnUseFormStateInDev() {
+      {
+        var componentName = getComponentNameFromFiber(
+          currentlyRenderingFiber$1
+        );
+
+        if (!didWarnAboutUseFormState.has(componentName)) {
+          didWarnAboutUseFormState.add(componentName);
+
+          error(
+            "ReactDOM.useFormState has been deprecated and replaced by " +
+              "React.useActionState. Please update %s to use React.useActionState.",
+            componentName
+          );
+        }
+      }
+    }
+
     function warnIfAsyncClientComponent(Component) {
       {
         // This dev-only check only works for detecting native async functions,
@@ -14580,6 +14600,7 @@ to return true:wantsResponderID|                            |
           function useFormState(action, initialState, permalink) {
             currentHookNameInDev = "useFormState";
             updateHookTypesDev();
+            warnOnUseFormStateInDev();
             return mountActionState(action, initialState);
           };
 
@@ -14734,6 +14755,7 @@ to return true:wantsResponderID|                            |
         ) {
           currentHookNameInDev = "useFormState";
           updateHookTypesDev();
+          warnOnUseFormStateInDev();
           return updateActionState(action);
         };
 
@@ -14893,6 +14915,7 @@ to return true:wantsResponderID|                            |
         ) {
           currentHookNameInDev = "useFormState";
           updateHookTypesDev();
+          warnOnUseFormStateInDev();
           return rerenderActionState(action);
         };
 
@@ -30580,7 +30603,7 @@ to return true:wantsResponderID|                            |
       return root;
     }
 
-    var ReactVersion = "19.0.0-canary-7938b6a8";
+    var ReactVersion = "19.0.0-canary-c6651440";
 
     function createPortal$1(
       children,

diff --git a/...t/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/...t/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js
@@ -7,7 +7,7 @@
  * @noflow
  * @nolint
  * @preventMunge
- * @generated SignedSource<<a9d8887935e3fc32f3bf95aea2bbf91d>>
+ * @generated SignedSource<<cf66f3f917e3c7a41bc8a26d1175d766>>
  */
 
 "use strict";
@@ -11706,11 +11706,13 @@ to return true:wantsResponderID|                            |
     var didWarnUncachedGetSnapshot;
     var didWarnAboutUseWrappedInTryCatch;
     var didWarnAboutAsyncClientComponent;
+    var didWarnAboutUseFormState;
 
     {
       didWarnAboutMismatchedHooksForComponent = new Set();
       didWarnAboutUseWrappedInTryCatch = new Set();
       didWarnAboutAsyncClientComponent = new Set();
+      didWarnAboutUseFormState = new Set();
     } // The effect "instance" is a shared object that remains the same for the entire
     // lifetime of an effect. In Rust terms, a RefCell. We use it to store the
     // "destroy" function that is returned from an effect, because that is stateful.
@@ -11853,6 +11855,24 @@ to return true:wantsResponderID|                            |
       }
     }
 
+    function warnOnUseFormStateInDev() {
+      {
+        var componentName = getComponentNameFromFiber(
+          currentlyRenderingFiber$1
+        );
+
+        if (!didWarnAboutUseFormState.has(componentName)) {
+          didWarnAboutUseFormState.add(componentName);
+
+          error(
+            "ReactDOM.useFormState has been deprecated and replaced by " +
+              "React.useActionState. Please update %s to use React.useActionState.",
+            componentName
+          );
+        }
+      }
+    }
+
     function warnIfAsyncClientComponent(Component) {
       {
         // This dev-only check only works for detecting native async functions,
@@ -14851,6 +14871,7 @@ to return true:wantsResponderID|                            |
           function useFormState(action, initialState, permalink) {
             currentHookNameInDev = "useFormState";
             updateHookTypesDev();
+            warnOnUseFormStateInDev();
             return mountActionState(action, initialState);
           };
 
@@ -15005,6 +15026,7 @@ to return true:wantsResponderID|                            |
         ) {
           currentHookNameInDev = "useFormState";
           updateHookTypesDev();
+          warnOnUseFormStateInDev();
           return updateActionState(action);
         };
 
@@ -15164,6 +15186,7 @@ to return true:wantsResponderID|                            |
         ) {
           currentHookNameInDev = "useFormState";
           updateHookTypesDev();
+          warnOnUseFormStateInDev();
           return rerenderActionState(action);
         };
 
@@ -31020,7 +31043,7 @@ to return true:wantsResponderID|                            |
       return root;
     }
 
-    var ReactVersion = "19.0.0-canary-ebdc2fa2";
+    var ReactVersion = "19.0.0-canary-09379a47";
 
     function createPortal$1(
       children,