OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Warn for useFormState on initial render (#30292)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
fixtures/flight/src/Counter.js
View File

@ -1,12 +1,11 @@
'use client'; 'use client';
import * as React from 'react'; import * as React from 'react';
import {useFormState} from 'react-dom';
import Container from './Container.js'; import Container from './Container.js';
export function Counter({incrementAction}) { export function Counter({incrementAction}) {
const [count, incrementFormAction] = useFormState(incrementAction, 0); const [count, incrementFormAction] = React.useActionState(incrementAction, 0);
return ( return (
<Container> <Container>
<form> <form>

8
packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js vendored
View File

@ -11,7 +11,6 @@
'use strict'; 'use strict';
let React; let React;
let ReactDOM;
let ReactTestRenderer; let ReactTestRenderer;
let ReactDebugTools; let ReactDebugTools;
let act; let act;
@ -34,7 +33,6 @@ describe('ReactHooksInspectionIntegration', () => {
jest.resetModules(); jest.resetModules();
React = require('react'); React = require('react');
ReactTestRenderer = require('react-test-renderer'); ReactTestRenderer = require('react-test-renderer');
ReactDOM = require('react-dom');
act = require('internal-test-utils').act; act = require('internal-test-utils').act;
ReactDebugTools = require('react-debug-tools'); ReactDebugTools = require('react-debug-tools');
useMemoCache = require('react/compiler-runtime').c; useMemoCache = require('react/compiler-runtime').c;
@ -2658,9 +2656,9 @@ describe('ReactHooksInspectionIntegration', () => {
}); });
// @gate enableAsyncActions // @gate enableAsyncActions
it('should support useFormState hook', async () => { it('should support useActionState hook', async () => {
function Foo() { function Foo() {
const [value] = ReactDOM.useFormState(function increment(n) { const [value] = React.useActionState(function increment(n) {
return n; return n;
}, 0); }, 0);
React.useMemo(() => 'memo', []); React.useMemo(() => 'memo', []);
@ -2689,7 +2687,7 @@ describe('ReactHooksInspectionIntegration', () => {
}, },
"id": 0, "id": 0,
"isStateEditable": false, "isStateEditable": false,
"name": "FormState", "name": "ActionState",
"subHooks": [], "subHooks": [],
"value": 0, "value": 0,
}, },

8
packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js vendored
View File

@ -40,12 +40,12 @@ describe('ReactDOMFizzForm', () => {
act = require('internal-test-utils').act; act = require('internal-test-utils').act;
container = document.createElement('div'); container = document.createElement('div');
document.body.appendChild(container); document.body.appendChild(container);
if (__VARIANT__) { // TODO: Test the old api but it warns so needs warnings to be asserted.
// if (__VARIANT__) {
// Remove after API is deleted. // Remove after API is deleted.
useActionState = require('react-dom').useFormState; // useActionState = require('react-dom').useFormState;
} else { // }
useActionState = require('react').useActionState; useActionState = require('react').useActionState;
}
}); });
afterEach(() => { afterEach(() => {

1
packages/react-reconciler/src/ReactFiberHooks.js vendored
View File

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

8
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js vendored
View File

@ -73,12 +73,12 @@ describe('ReactFlightDOMForm', () => {
ReactDOMClient = require('react-dom/client'); ReactDOMClient = require('react-dom/client');
act = React.act; act = React.act;
if (__VARIANT__) { // TODO: Test the old api but it warns so needs warnings to be asserted.
// if (__VARIANT__) {
// Remove after API is deleted. // Remove after API is deleted.
useActionState = require('react-dom').useFormState; // useActionState = require('react-dom').useFormState;
} else { // }
useActionState = require('react').useActionState; useActionState = require('react').useActionState;
}
container = document.createElement('div'); container = document.createElement('div');
document.body.appendChild(container); document.body.appendChild(container);
}); });