Warn when using useFormState (#28668)

## Overview

useFormState has been replaced with useActionState. Warn when it's used.

Also removes the `experimental_useFormState` warnings.

DiffTrain build for [18812b645c](https://github.com/facebook/react/commit/18812b645c93a9c42f931fae57bbbab9c1f402b8)
This commit is contained in:
rickhanlonii
2024-03-29 17:45:34 +00:00
parent aa4213fc9b
commit fc94889933
10 changed files with 194 additions and 9 deletions
+1 -1
View File
@@ -1 +1 @@
19c7c2929be68f87cfa6b7947c4ab9ffc5608e48
18812b645c93a9c42f931fae57bbbab9c1f402b8
+24 -1
View File
@@ -66,7 +66,7 @@ if (__DEV__) {
return self;
}
var ReactVersion = "19.0.0-www-classic-b7bec335";
var ReactVersion = "19.0.0-www-classic-9a163259";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
@@ -8988,11 +8988,13 @@ if (__DEV__) {
var didWarnUncachedGetSnapshot;
var didWarnAboutUseWrappedInTryCatch;
var didWarnAboutAsyncClientComponent;
var didWarnAboutUseFormState;
{
didWarnAboutMismatchedHooksForComponent = new Set();
didWarnAboutUseWrappedInTryCatch = new Set();
didWarnAboutAsyncClientComponent = new Set();
didWarnAboutUseFormState = new Set();
} // The effect "instance" is a shared object that remains the same for the entire
// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
// "destroy" function that is returned from an effect, because that is stateful.
@@ -9135,6 +9137,24 @@ if (__DEV__) {
}
}
function warnOnUseFormStateInDev() {
{
var componentName = getComponentNameFromFiber(
currentlyRenderingFiber$1
);
if (!didWarnAboutUseFormState.has(componentName)) {
didWarnAboutUseFormState.add(componentName);
error(
"ReactDOM.useFormState has been deprecated and replaced by " +
"React.useActionState. Please update %s to use React.useActionState.",
componentName
);
}
}
}
function warnIfAsyncClientComponent(Component) {
{
// This dev-only check only works for detecting native async functions,
@@ -12224,6 +12244,7 @@ if (__DEV__) {
function useFormState(action, initialState, permalink) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState);
};
@@ -12388,6 +12409,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return updateActionState(action);
};
@@ -12557,6 +12579,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return rerenderActionState(action);
};
+24 -1
View File
@@ -66,7 +66,7 @@ if (__DEV__) {
return self;
}
var ReactVersion = "19.0.0-www-modern-210281fd";
var ReactVersion = "19.0.0-www-modern-58f8023b";
var LegacyRoot = 0;
var ConcurrentRoot = 1;
@@ -8753,11 +8753,13 @@ if (__DEV__) {
var didWarnUncachedGetSnapshot;
var didWarnAboutUseWrappedInTryCatch;
var didWarnAboutAsyncClientComponent;
var didWarnAboutUseFormState;
{
didWarnAboutMismatchedHooksForComponent = new Set();
didWarnAboutUseWrappedInTryCatch = new Set();
didWarnAboutAsyncClientComponent = new Set();
didWarnAboutUseFormState = new Set();
} // The effect "instance" is a shared object that remains the same for the entire
// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
// "destroy" function that is returned from an effect, because that is stateful.
@@ -8900,6 +8902,24 @@ if (__DEV__) {
}
}
function warnOnUseFormStateInDev() {
{
var componentName = getComponentNameFromFiber(
currentlyRenderingFiber$1
);
if (!didWarnAboutUseFormState.has(componentName)) {
didWarnAboutUseFormState.add(componentName);
error(
"ReactDOM.useFormState has been deprecated and replaced by " +
"React.useActionState. Please update %s to use React.useActionState.",
componentName
);
}
}
}
function warnIfAsyncClientComponent(Component) {
{
// This dev-only check only works for detecting native async functions,
@@ -11989,6 +12009,7 @@ if (__DEV__) {
function useFormState(action, initialState, permalink) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState);
};
@@ -12153,6 +12174,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return updateActionState(action);
};
@@ -12322,6 +12344,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return rerenderActionState(action);
};
+24 -1
View File
@@ -13547,11 +13547,13 @@ if (__DEV__) {
var didWarnUncachedGetSnapshot;
var didWarnAboutUseWrappedInTryCatch;
var didWarnAboutAsyncClientComponent;
var didWarnAboutUseFormState;
{
didWarnAboutMismatchedHooksForComponent = new Set();
didWarnAboutUseWrappedInTryCatch = new Set();
didWarnAboutAsyncClientComponent = new Set();
didWarnAboutUseFormState = new Set();
} // The effect "instance" is a shared object that remains the same for the entire
// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
// "destroy" function that is returned from an effect, because that is stateful.
@@ -13696,6 +13698,24 @@ if (__DEV__) {
}
}
function warnOnUseFormStateInDev() {
{
var componentName = getComponentNameFromFiber(
currentlyRenderingFiber$1
);
if (!didWarnAboutUseFormState.has(componentName)) {
didWarnAboutUseFormState.add(componentName);
error(
"ReactDOM.useFormState has been deprecated and replaced by " +
"React.useActionState. Please update %s to use React.useActionState.",
componentName
);
}
}
}
function warnIfAsyncClientComponent(Component) {
{
// This dev-only check only works for detecting native async functions,
@@ -16924,6 +16944,7 @@ if (__DEV__) {
function useFormState(action, initialState, permalink) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState);
};
@@ -17092,6 +17113,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return updateActionState(action);
};
@@ -17265,6 +17287,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return rerenderActionState(action);
};
@@ -36345,7 +36368,7 @@ if (__DEV__) {
return root;
}
var ReactVersion = "19.0.0-www-classic-698b36f3";
var ReactVersion = "19.0.0-www-classic-eb2e3f4c";
function createPortal$1(
children,
+24 -1
View File
@@ -13510,11 +13510,13 @@ if (__DEV__) {
var didWarnUncachedGetSnapshot;
var didWarnAboutUseWrappedInTryCatch;
var didWarnAboutAsyncClientComponent;
var didWarnAboutUseFormState;
{
didWarnAboutMismatchedHooksForComponent = new Set();
didWarnAboutUseWrappedInTryCatch = new Set();
didWarnAboutAsyncClientComponent = new Set();
didWarnAboutUseFormState = new Set();
} // The effect "instance" is a shared object that remains the same for the entire
// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
// "destroy" function that is returned from an effect, because that is stateful.
@@ -13659,6 +13661,24 @@ if (__DEV__) {
}
}
function warnOnUseFormStateInDev() {
{
var componentName = getComponentNameFromFiber(
currentlyRenderingFiber$1
);
if (!didWarnAboutUseFormState.has(componentName)) {
didWarnAboutUseFormState.add(componentName);
error(
"ReactDOM.useFormState has been deprecated and replaced by " +
"React.useActionState. Please update %s to use React.useActionState.",
componentName
);
}
}
}
function warnIfAsyncClientComponent(Component) {
{
// This dev-only check only works for detecting native async functions,
@@ -16887,6 +16907,7 @@ if (__DEV__) {
function useFormState(action, initialState, permalink) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState);
};
@@ -17055,6 +17076,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return updateActionState(action);
};
@@ -17228,6 +17250,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return rerenderActionState(action);
};
@@ -36193,7 +36216,7 @@ if (__DEV__) {
return root;
}
var ReactVersion = "19.0.0-www-modern-05455d88";
var ReactVersion = "19.0.0-www-modern-0c956171";
function createPortal$1(
children,
@@ -13684,11 +13684,13 @@ if (__DEV__) {
var didWarnUncachedGetSnapshot;
var didWarnAboutUseWrappedInTryCatch;
var didWarnAboutAsyncClientComponent;
var didWarnAboutUseFormState;
{
didWarnAboutMismatchedHooksForComponent = new Set();
didWarnAboutUseWrappedInTryCatch = new Set();
didWarnAboutAsyncClientComponent = new Set();
didWarnAboutUseFormState = new Set();
} // The effect "instance" is a shared object that remains the same for the entire
// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
// "destroy" function that is returned from an effect, because that is stateful.
@@ -13833,6 +13835,24 @@ if (__DEV__) {
}
}
function warnOnUseFormStateInDev() {
{
var componentName = getComponentNameFromFiber(
currentlyRenderingFiber$1
);
if (!didWarnAboutUseFormState.has(componentName)) {
didWarnAboutUseFormState.add(componentName);
error(
"ReactDOM.useFormState has been deprecated and replaced by " +
"React.useActionState. Please update %s to use React.useActionState.",
componentName
);
}
}
}
function warnIfAsyncClientComponent(Component) {
{
// This dev-only check only works for detecting native async functions,
@@ -17061,6 +17081,7 @@ if (__DEV__) {
function useFormState(action, initialState, permalink) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState);
};
@@ -17229,6 +17250,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return updateActionState(action);
};
@@ -17402,6 +17424,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return rerenderActionState(action);
};
@@ -36969,7 +36992,7 @@ if (__DEV__) {
return root;
}
var ReactVersion = "19.0.0-www-classic-f4cfd755";
var ReactVersion = "19.0.0-www-classic-25663c8c";
function createPortal$1(
children,
@@ -13647,11 +13647,13 @@ if (__DEV__) {
var didWarnUncachedGetSnapshot;
var didWarnAboutUseWrappedInTryCatch;
var didWarnAboutAsyncClientComponent;
var didWarnAboutUseFormState;
{
didWarnAboutMismatchedHooksForComponent = new Set();
didWarnAboutUseWrappedInTryCatch = new Set();
didWarnAboutAsyncClientComponent = new Set();
didWarnAboutUseFormState = new Set();
} // The effect "instance" is a shared object that remains the same for the entire
// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
// "destroy" function that is returned from an effect, because that is stateful.
@@ -13796,6 +13798,24 @@ if (__DEV__) {
}
}
function warnOnUseFormStateInDev() {
{
var componentName = getComponentNameFromFiber(
currentlyRenderingFiber$1
);
if (!didWarnAboutUseFormState.has(componentName)) {
didWarnAboutUseFormState.add(componentName);
error(
"ReactDOM.useFormState has been deprecated and replaced by " +
"React.useActionState. Please update %s to use React.useActionState.",
componentName
);
}
}
}
function warnIfAsyncClientComponent(Component) {
{
// This dev-only check only works for detecting native async functions,
@@ -17024,6 +17044,7 @@ if (__DEV__) {
function useFormState(action, initialState, permalink) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState);
};
@@ -17192,6 +17213,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return updateActionState(action);
};
@@ -17365,6 +17387,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return rerenderActionState(action);
};
@@ -36817,7 +36840,7 @@ if (__DEV__) {
return root;
}
var ReactVersion = "19.0.0-www-modern-6e9457ea";
var ReactVersion = "19.0.0-www-modern-bf95121e";
function createPortal$1(
children,
@@ -7898,11 +7898,13 @@ if (__DEV__) {
var didWarnUncachedGetSnapshot;
var didWarnAboutUseWrappedInTryCatch;
var didWarnAboutAsyncClientComponent;
var didWarnAboutUseFormState;
{
didWarnAboutMismatchedHooksForComponent = new Set();
didWarnAboutUseWrappedInTryCatch = new Set();
didWarnAboutAsyncClientComponent = new Set();
didWarnAboutUseFormState = new Set();
} // The effect "instance" is a shared object that remains the same for the entire
// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
// "destroy" function that is returned from an effect, because that is stateful.
@@ -8045,6 +8047,24 @@ if (__DEV__) {
}
}
function warnOnUseFormStateInDev() {
{
var componentName = getComponentNameFromFiber(
currentlyRenderingFiber$1
);
if (!didWarnAboutUseFormState.has(componentName)) {
didWarnAboutUseFormState.add(componentName);
error(
"ReactDOM.useFormState has been deprecated and replaced by " +
"React.useActionState. Please update %s to use React.useActionState.",
componentName
);
}
}
}
function warnIfAsyncClientComponent(Component) {
{
// This dev-only check only works for detecting native async functions,
@@ -10909,6 +10929,7 @@ if (__DEV__) {
function useFormState(action, initialState, permalink) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState);
};
@@ -11063,6 +11084,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return updateActionState(action);
};
@@ -11222,6 +11244,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return rerenderActionState(action);
};
@@ -26836,7 +26859,7 @@ if (__DEV__) {
return root;
}
var ReactVersion = "19.0.0-www-classic-55032d66";
var ReactVersion = "19.0.0-www-classic-4b7162fb";
// Might add PROFILE later.
@@ -7898,11 +7898,13 @@ if (__DEV__) {
var didWarnUncachedGetSnapshot;
var didWarnAboutUseWrappedInTryCatch;
var didWarnAboutAsyncClientComponent;
var didWarnAboutUseFormState;
{
didWarnAboutMismatchedHooksForComponent = new Set();
didWarnAboutUseWrappedInTryCatch = new Set();
didWarnAboutAsyncClientComponent = new Set();
didWarnAboutUseFormState = new Set();
} // The effect "instance" is a shared object that remains the same for the entire
// lifetime of an effect. In Rust terms, a RefCell. We use it to store the
// "destroy" function that is returned from an effect, because that is stateful.
@@ -8045,6 +8047,24 @@ if (__DEV__) {
}
}
function warnOnUseFormStateInDev() {
{
var componentName = getComponentNameFromFiber(
currentlyRenderingFiber$1
);
if (!didWarnAboutUseFormState.has(componentName)) {
didWarnAboutUseFormState.add(componentName);
error(
"ReactDOM.useFormState has been deprecated and replaced by " +
"React.useActionState. Please update %s to use React.useActionState.",
componentName
);
}
}
}
function warnIfAsyncClientComponent(Component) {
{
// This dev-only check only works for detecting native async functions,
@@ -10909,6 +10929,7 @@ if (__DEV__) {
function useFormState(action, initialState, permalink) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return mountActionState(action, initialState);
};
@@ -11063,6 +11084,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return updateActionState(action);
};
@@ -11222,6 +11244,7 @@ if (__DEV__) {
) {
currentHookNameInDev = "useFormState";
updateHookTypesDev();
warnOnUseFormStateInDev();
return rerenderActionState(action);
};
@@ -26836,7 +26859,7 @@ if (__DEV__) {
return root;
}
var ReactVersion = "19.0.0-www-modern-55032d66";
var ReactVersion = "19.0.0-www-modern-4b7162fb";
// Might add PROFILE later.
@@ -252,6 +252,7 @@ export default [
"ReactDOM.render was removed in React 19. Use createRoot instead.",
"ReactDOM.unstable_renderSubtreeIntoContainer() has not been supported since React 18. Consider using a portal instead. Until you switch to the createRoot API, your app will behave as if it's running React 17. Learn more: https://react.dev/link/switch-to-createroot",
"ReactDOM.unstable_renderSubtreeIntoContainer() was removed in React 19. Consider using a portal instead.",
"ReactDOM.useFormState has been deprecated and replaced by React.useActionState. Please update %s to use React.useActionState.",
"ReactTestUtils.mockComponent() is deprecated. Use shallow rendering or jest.mock() instead.\n\nSee https://react.dev/link/test-utils-mock-component for more information.",
"Received NaN for the `%s` attribute. If this is expected, cast the value to a string.",
"Received `%s` for a non-boolean attribute `%s`.\n\nIf you want to write it to the DOM, pass a string instead: %s=\"%s\" or %s={value.toString()}.",