Skip to content

Commit

Permalink
Warn for useFormState on initial render (#30292)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
sebmarkbage authored Jul 8, 2024
1 parent 21129d3 commit 274c980
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 19 deletions.
3 changes: 1 addition & 2 deletions fixtures/flight/src/Counter.js
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
'use strict';

let React;
let ReactDOM;
let ReactTestRenderer;
let ReactDebugTools;
let act;
Expand All @@ -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;
Expand Down Expand Up @@ -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', []);
Expand Down Expand Up @@ -2689,7 +2687,7 @@ describe('ReactHooksInspectionIntegration', () => {
},
"id": 0,
"isStateEditable": false,
"name": "FormState",
"name": "ActionState",
"subHooks": [],
"value": 0,
},
Expand Down
12 changes: 6 additions & 6 deletions packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
1 change: 1 addition & 0 deletions packages/react-reconciler/src/ReactFiberHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -3994,6 +3994,7 @@ if (__DEV__) {
): [Awaited<S>, (P) => void, boolean] {
currentHookNameInDev = 'useFormState';
mountHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState, permalink);
};
(HooksDispatcherOnMountInDEV: Dispatcher).useActionState =
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down

0 comments on commit 274c980

Please sign in to comment.