Add stub for experimental_useFormStatus (#26719)
This wires up, but does not yet implement, an experimental hook called useFormStatus. The hook is imported from React DOM, not React, because it represents DOM-specific state — its return type includes FormData as one of its fields. Other renderers that implement similar methods would use their own renderer-specific types. The API is prefixed and only available in the experimental channel. It can only be used from client (browser, SSR) components, not Server Components.
Andrew Clark committed
Apr 24, 2023 at 20:18 UTC
919620b2935ca6bb8dfc96204a7cf8754c006240
8 files changed
+91
packages/react-dom/index.classic.fb.js
+1
@@ -31,6 +31,7 @@ export {
31
unstable_createEventHandle,
32
unstable_renderSubtreeIntoContainer,
33
unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
34
+ useFormStatus as experimental_useFormStatus,
35
prefetchDNS,
36
preconnect,
37
preload,
packages/react-dom/index.experimental.js
+1
@@ -20,6 +20,7 @@ export {
20
unstable_batchedUpdates,
21
unstable_renderSubtreeIntoContainer,
22
unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
23
+ useFormStatus as experimental_useFormStatus,
24
prefetchDNS,
25
preconnect,
26
preload,
packages/react-dom/index.js
+1
@@ -23,6 +23,7 @@ export {
23
unstable_createEventHandle,
24
unstable_renderSubtreeIntoContainer,
25
unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
26
+ useFormStatus as experimental_useFormStatus,
27
prefetchDNS,
28
preconnect,
29
preload,
packages/react-dom/index.modern.fb.js
+1
@@ -16,6 +16,7 @@ export {
16
unstable_batchedUpdates,
17
unstable_createEventHandle,
18
unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
19
+ useFormStatus as experimental_useFormStatus,
20
prefetchDNS,
21
preconnect,
22
preload,
packages/react-dom/src/ReactDOMFormActions.js
new
+50
@@ -0,0 +1,50 @@
1
+/**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import {enableAsyncActions, enableFormActions} from 'shared/ReactFeatureFlags';
11
+
12
+type FormStatusNotPending = {|
13
+ pending: false,
14
+ data: null,
15
+ method: null,
16
+ action: null,
17
+|};
18
+
19
+type FormStatusPending = {|
20
+ pending: true,
21
+ data: FormData,
22
+ method: string,
23
+ action: string | (FormData => void | Promise<void>),
24
+|};
25
+
26
+export type FormStatus = FormStatusPending | FormStatusNotPending;
27
+
28
+// Since the "not pending" value is always the same, we can reuse the
29
+// same object across all transitions.
30
+const sharedNotPendingObject = {
31
+ pending: false,
32
+ data: null,
33
+ method: null,
34
+ action: null,
35
+};
36
+
37
+const NotPending: FormStatus = __DEV__
38
+ ? Object.freeze(sharedNotPendingObject)
39
+ : sharedNotPendingObject;
40
+
41
+export function useFormStatus(): FormStatus {
42
+ if (!(enableFormActions && enableAsyncActions)) {
43
+ throw new Error('Not implemented.');
44
+ } else {
45
+ // TODO: This isn't fully implemented yet but we return a correctly typed
46
+ // value so we can test that the API is exposed and gated correctly. The
47
+ // real implementation will access the status via the dispatcher.
48
+ return NotPending;
49
+ }
50
+}
packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
+18
@@ -19,6 +19,7 @@ let container;
19
let React;
20
let ReactDOMServer;
21
let ReactDOMClient;
22
+let useFormStatus;
23
24
describe('ReactDOMFizzForm', () => {
25
beforeEach(() => {
@@ -26,6 +27,7 @@ describe('ReactDOMFizzForm', () => {
27
React = require('react');
28
ReactDOMServer = require('react-dom/server.browser');
29
ReactDOMClient = require('react-dom/client');
30
+ useFormStatus = require('react-dom').experimental_useFormStatus;
31
act = require('internal-test-utils').act;
32
container = document.createElement('div');
33
document.body.appendChild(container);
@@ -360,4 +362,20 @@ describe('ReactDOMFizzForm', () => {
362
expect(buttonRef.current.hasAttribute('formMethod')).toBe(false);
363
expect(buttonRef.current.hasAttribute('formTarget')).toBe(false);
364
});
365
+
366
+ // @gate enableFormActions
367
+ // @gate enableAsyncActions
368
+ it('useFormStatus is not pending during server render', async () => {
369
+ function App() {
370
+ const {pending} = useFormStatus();
371
+ return 'Pending: ' + pending;
372
+ }
373
+
374
+ const stream = await ReactDOMServer.renderToReadableStream(<App />);
375
+ await readIntoContainer(stream);
376
+ expect(container.textContent).toBe('Pending: false');
377
+
378
+ await act(() => ReactDOMClient.hydrateRoot(container, <App />));
379
+ expect(container.textContent).toBe('Pending: false');
380
+ });
381
});
packages/react-dom/src/__tests__/ReactDOMForm-test.js
+18
@@ -39,6 +39,7 @@ describe('ReactDOMForm', () => {
39
let Suspense;
40
let startTransition;
41
let textCache;
42
+ let useFormStatus;
43
44
beforeEach(() => {
45
jest.resetModules();
@@ -51,6 +52,7 @@ describe('ReactDOMForm', () => {
52
useState = React.useState;
53
Suspense = React.Suspense;
54
startTransition = React.startTransition;
55
+ useFormStatus = ReactDOM.experimental_useFormStatus;
56
container = document.createElement('div');
57
document.body.appendChild(container);
58
@@ -846,4 +848,20 @@ describe('ReactDOMForm', () => {
848
assertLog(['Oh no!', 'Oh no!']);
849
expect(container.textContent).toBe('Oh no!');
850
});
851
+
852
+ // @gate enableFormActions
853
+ // @gate enableAsyncActions
854
+ it('useFormStatus exists', async () => {
855
+ // This API isn't fully implemented yet. This just tests that it's wired
856
+ // up correctly.
857
+
858
+ function App() {
859
+ const {pending} = useFormStatus();
860
+ return 'Pending: ' + pending;
861
+ }
862
+
863
+ const root = ReactDOMClient.createRoot(container);
864
+ await act(() => root.render(<App />));
865
+ expect(container.textContent).toBe('Pending: false');
866
+ });
867
});
packages/react-dom/src/client/ReactDOM.js
+1
@@ -56,6 +56,7 @@ import {
56
import Internals from '../ReactDOMSharedInternals';
57
58
export {prefetchDNS, preconnect, preload, preinit} from '../ReactDOMFloat';
59
+export {useFormStatus} from '../ReactDOMFormActions';
60
61
if (__DEV__) {
62
if (