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.
Sebastian Markbåge committed
Jul 8, 2024 at 16:45 UTC
274c980c535bb34e17f5d97cc22ef4dd296ab413
5 files changed
+17
-19
fixtures/flight/src/Counter.js
+1
-2
@@ -1,12 +1,11 @@
1
'use client';
2
3
import * as React from 'react';
4
-import {useFormState} from 'react-dom';
4
5
import Container from './Container.js';
6
7
export function Counter({incrementAction}) {
9
- const [count, incrementFormAction] = useFormState(incrementAction, 0);
8
+ const [count, incrementFormAction] = React.useActionState(incrementAction, 0);
9
return (
10
<Container>
11
<form>
packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+3
-5
@@ -11,7 +11,6 @@
11
'use strict';
12
13
let React;
14
-let ReactDOM;
14
let ReactTestRenderer;
15
let ReactDebugTools;
16
let act;
@@ -34,7 +33,6 @@ describe('ReactHooksInspectionIntegration', () => {
33
jest.resetModules();
34
React = require('react');
35
ReactTestRenderer = require('react-test-renderer');
37
- ReactDOM = require('react-dom');
36
act = require('internal-test-utils').act;
37
ReactDebugTools = require('react-debug-tools');
38
useMemoCache = require('react/compiler-runtime').c;
@@ -2658,9 +2656,9 @@ describe('ReactHooksInspectionIntegration', () => {
2656
});
2657
2658
// @gate enableAsyncActions
2661
- it('should support useFormState hook', async () => {
2659
+ it('should support useActionState hook', async () => {
2660
function Foo() {
2663
- const [value] = ReactDOM.useFormState(function increment(n) {
2661
+ const [value] = React.useActionState(function increment(n) {
2662
return n;
2663
}, 0);
2664
React.useMemo(() => 'memo', []);
@@ -2689,7 +2687,7 @@ describe('ReactHooksInspectionIntegration', () => {
2687
},
2688
"id": 0,
2689
"isStateEditable": false,
2692
- "name": "FormState",
2690
+ "name": "ActionState",
2691
"subHooks": [],
2692
"value": 0,
2693
},
packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
+6
-6
@@ -40,12 +40,12 @@ describe('ReactDOMFizzForm', () => {
40
act = require('internal-test-utils').act;
41
container = document.createElement('div');
42
document.body.appendChild(container);
43
- if (__VARIANT__) {
44
- // Remove after API is deleted.
45
- useActionState = require('react-dom').useFormState;
46
- } else {
47
- useActionState = require('react').useActionState;
48
- }
43
+ // TODO: Test the old api but it warns so needs warnings to be asserted.
44
+ // if (__VARIANT__) {
45
+ // Remove after API is deleted.
46
+ // useActionState = require('react-dom').useFormState;
47
+ // }
48
+ useActionState = require('react').useActionState;
49
});
50
51
afterEach(() => {
packages/react-reconciler/src/ReactFiberHooks.js
+1
@@ -3994,6 +3994,7 @@ if (__DEV__) {
3994
): [Awaited<S>, (P) => void, boolean] {
3995
currentHookNameInDev = 'useFormState';
3996
mountHookTypesDev();
3997
+ warnOnUseFormStateInDev();
3998
return mountActionState(action, initialState, permalink);
3999
};
4000
(HooksDispatcherOnMountInDEV: Dispatcher).useActionState =
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js
+6
-6
@@ -73,12 +73,12 @@ describe('ReactFlightDOMForm', () => {
73
ReactDOMClient = require('react-dom/client');
74
act = React.act;
75
76
- if (__VARIANT__) {
77
- // Remove after API is deleted.
78
- useActionState = require('react-dom').useFormState;
79
- } else {
80
- useActionState = require('react').useActionState;
81
- }
76
+ // TODO: Test the old api but it warns so needs warnings to be asserted.
77
+ // if (__VARIANT__) {
78
+ // Remove after API is deleted.
79
+ // useActionState = require('react-dom').useFormState;
80
+ // }
81
+ useActionState = require('react').useActionState;
82
container = document.createElement('div');
83
document.body.appendChild(container);
84
});