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.
This commit is contained in:
Sebastian Markbåge 2024-07-08 16:45:24 -04:00 committed by GitHub
parent 21129d34a5
commit 274c980c53
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 17 additions and 19 deletions

View File

@ -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>

View File

@ -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,
},

View File

@ -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(() => {

View File

@ -3994,6 +3994,7 @@ if (__DEV__) {
): [Awaited<S>, (P) => void, boolean] {
currentHookNameInDev = 'useFormState';
mountHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState, permalink);
};
(HooksDispatcherOnMountInDEV: Dispatcher).useActionState =

View File

@ -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);
});