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 f89840de69..30170bed3f 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 0c54464b72..47d47926cf 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 b83abb5693..0ecfe3eb82 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 f19f40a175..5e9d908545 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 e675e63837..b2d13c7580 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);
   });