From 274c980c535bb34e17f5d97cc22ef4dd296ab413 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Mon, 8 Jul 2024 16:45:24 -0400
Subject: [PATCH] Warn for useFormState on initial render (#30292)

This was missed in the mount dev dispatcher. It was only in the rerender
dispatcher which means that it was only logged during the rerender.
Since DevTools can hide logs during rerenders, this hid the warning in
StrictMode.
---
 fixtures/flight/src/Counter.js                       |  3 +--
 .../ReactHooksInspectionIntegration-test.js          |  8 +++-----
 .../react-dom/src/__tests__/ReactDOMFizzForm-test.js | 12 ++++++------
 packages/react-reconciler/src/ReactFiberHooks.js     |  1 +
 .../src/__tests__/ReactFlightDOMForm-test.js         | 12 ++++++------
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/fixtures/flight/src/Counter.js b/fixtures/flight/src/Counter.js
index f89840de69da6..30170bed3fd4b 100644
--- a/fixtures/flight/src/Counter.js
+++ b/fixtures/flight/src/Counter.js
@@ -1,12 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import {useFormState} from 'react-dom';
 
 import Container from './Container.js';
 
 export function Counter({incrementAction}) {
-  const [count, incrementFormAction] = useFormState(incrementAction, 0);
+  const [count, incrementFormAction] = React.useActionState(incrementAction, 0);
   return (
     <Container>
       <form>
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 0c54464b72a4a..47d47926cf6ee 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -11,7 +11,6 @@
 'use strict';
 
 let React;
-let ReactDOM;
 let ReactTestRenderer;
 let ReactDebugTools;
 let act;
@@ -34,7 +33,6 @@ describe('ReactHooksInspectionIntegration', () => {
     jest.resetModules();
     React = require('react');
     ReactTestRenderer = require('react-test-renderer');
-    ReactDOM = require('react-dom');
     act = require('internal-test-utils').act;
     ReactDebugTools = require('react-debug-tools');
     useMemoCache = require('react/compiler-runtime').c;
@@ -2658,9 +2656,9 @@ describe('ReactHooksInspectionIntegration', () => {
   });
 
   // @gate enableAsyncActions
-  it('should support useFormState hook', async () => {
+  it('should support useActionState hook', async () => {
     function Foo() {
-      const [value] = ReactDOM.useFormState(function increment(n) {
+      const [value] = React.useActionState(function increment(n) {
         return n;
       }, 0);
       React.useMemo(() => 'memo', []);
@@ -2689,7 +2687,7 @@ describe('ReactHooksInspectionIntegration', () => {
           },
           "id": 0,
           "isStateEditable": false,
-          "name": "FormState",
+          "name": "ActionState",
           "subHooks": [],
           "value": 0,
         },
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
index b83abb5693bcb..0ecfe3eb82e0b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
@@ -40,12 +40,12 @@ describe('ReactDOMFizzForm', () => {
     act = require('internal-test-utils').act;
     container = document.createElement('div');
     document.body.appendChild(container);
-    if (__VARIANT__) {
-      // Remove after API is deleted.
-      useActionState = require('react-dom').useFormState;
-    } else {
-      useActionState = require('react').useActionState;
-    }
+    // TODO: Test the old api but it warns so needs warnings to be asserted.
+    // if (__VARIANT__) {
+    // Remove after API is deleted.
+    // useActionState = require('react-dom').useFormState;
+    // }
+    useActionState = require('react').useActionState;
   });
 
   afterEach(() => {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
index f19f40a175168..5e9d9085457c1 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -3994,6 +3994,7 @@ if (__DEV__) {
       ): [Awaited<S>, (P) => void, boolean] {
         currentHookNameInDev = 'useFormState';
         mountHookTypesDev();
+        warnOnUseFormStateInDev();
         return mountActionState(action, initialState, permalink);
       };
     (HooksDispatcherOnMountInDEV: Dispatcher).useActionState =
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
index e675e63837ad3..b2d13c7580985 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
@@ -73,12 +73,12 @@ describe('ReactFlightDOMForm', () => {
     ReactDOMClient = require('react-dom/client');
     act = React.act;
 
-    if (__VARIANT__) {
-      // Remove after API is deleted.
-      useActionState = require('react-dom').useFormState;
-    } else {
-      useActionState = require('react').useActionState;
-    }
+    // TODO: Test the old api but it warns so needs warnings to be asserted.
+    // if (__VARIANT__) {
+    // Remove after API is deleted.
+    // useActionState = require('react-dom').useFormState;
+    // }
+    useActionState = require('react').useActionState;
     container = document.createElement('div');
     document.body.appendChild(container);
   });