diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js index cb240482273d1..23a44a41ed803 100644 --- a/packages/react-client/src/__tests__/ReactFlight-test.js +++ b/packages/react-client/src/__tests__/ReactFlight-test.js @@ -530,7 +530,6 @@ describe('ReactFlight', () => { expect(ReactNoop).toMatchRenderedOutput(
I am client
); }); - // @gate enableUseHook it('should error if a non-serializable value is passed to a host component', async () => { function ClientImpl({children}) { return children; @@ -641,7 +640,6 @@ describe('ReactFlight', () => { }); }); - // @gate enableUseHook it('should trigger the inner most error boundary inside a Client Component', async () => { function ServerComponent() { throw new Error('This was thrown in the Server Component.'); diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index bed4c2fead5eb..362e5f36d2bb1 100644 --- a/packages/react-debug-tools/src/ReactDebugHooks.js +++ b/packages/react-debug-tools/src/ReactDebugHooks.js @@ -106,6 +106,13 @@ function readContext(context: ReactContext): T { return context._currentValue; } +function use(): T { + // TODO: What should this do if it receives an unresolved promise? + throw new Error( + 'Support for `use` not yet implemented in react-debug-tools.', + ); +} + function useContext(context: ReactContext): T { hookLog.push({ primitive: 'Context', @@ -327,6 +334,7 @@ function useId(): string { } const Dispatcher: DispatcherType = { + use, readContext, useCacheRefresh, useCallback, diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index 1f8746c0e96cc..40d996194cb94 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -5212,7 +5212,6 @@ describe('ReactDOMFizzServer', () => { }); }); - // @gate enableUseHook it('basic use(promise)', async () => { const promiseA = Promise.resolve('A'); const promiseB = Promise.resolve('B'); @@ -5258,7 +5257,6 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual('ABC'); }); - // @gate enableUseHook it('basic use(context)', async () => { const ContextA = React.createContext('default'); const ContextB = React.createContext('B'); @@ -5303,7 +5301,6 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual(['AB', 'C']); }); - // @gate enableUseHook it('use(promise) in multiple components', async () => { const promiseA = Promise.resolve('A'); const promiseB = Promise.resolve('B'); @@ -5357,7 +5354,6 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual('ABCD'); }); - // @gate enableUseHook it('using a rejected promise will throw', async () => { const promiseA = Promise.resolve('A'); const promiseB = Promise.reject(new Error('Oops!')); @@ -5443,7 +5439,6 @@ describe('ReactDOMFizzServer', () => { } }); - // @gate enableUseHook it("use a promise that's already been instrumented and resolved", async () => { const thenable = { status: 'fulfilled', @@ -5467,7 +5462,6 @@ describe('ReactDOMFizzServer', () => { expect(getVisibleChildren(container)).toEqual('Hi'); }); - // @gate enableUseHook it('unwraps thenable that fulfills synchronously without suspending', async () => { function App() { const thenable = { diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index fa0f155bf8048..b4b193233b401 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -37,7 +37,6 @@ import { enableLazyContextPropagation, enableUseMutableSource, enableTransitionTracing, - enableUseHook, enableUseMemoCacheHook, enableUseEffectEventHook, enableLegacyCache, @@ -2944,6 +2943,7 @@ function markUpdateInDevTools(fiber: Fiber, lane: Lane, action: A): void { export const ContextOnlyDispatcher: Dispatcher = { readContext, + use, useCallback: throwInvalidHookError, useContext: throwInvalidHookError, useEffect: throwInvalidHookError, @@ -2964,9 +2964,6 @@ export const ContextOnlyDispatcher: Dispatcher = { if (enableCache) { (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError; } -if (enableUseHook) { - (ContextOnlyDispatcher: Dispatcher).use = throwInvalidHookError; -} if (enableUseMemoCacheHook) { (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError; } @@ -2977,6 +2974,7 @@ if (enableUseEffectEventHook) { const HooksDispatcherOnMount: Dispatcher = { readContext, + use, useCallback: mountCallback, useContext: readContext, useEffect: mountEffect, @@ -2997,9 +2995,6 @@ const HooksDispatcherOnMount: Dispatcher = { if (enableCache) { (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh; } -if (enableUseHook) { - (HooksDispatcherOnMount: Dispatcher).use = use; -} if (enableUseMemoCacheHook) { (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache; } @@ -3009,6 +3004,7 @@ if (enableUseEffectEventHook) { const HooksDispatcherOnUpdate: Dispatcher = { readContext, + use, useCallback: updateCallback, useContext: readContext, useEffect: updateEffect, @@ -3032,9 +3028,6 @@ if (enableCache) { if (enableUseMemoCacheHook) { (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache; } -if (enableUseHook) { - (HooksDispatcherOnUpdate: Dispatcher).use = use; -} if (enableUseEffectEventHook) { (HooksDispatcherOnUpdate: Dispatcher).useEffectEvent = updateEvent; } @@ -3042,6 +3035,7 @@ if (enableUseEffectEventHook) { const HooksDispatcherOnRerender: Dispatcher = { readContext, + use, useCallback: updateCallback, useContext: readContext, useEffect: updateEffect, @@ -3062,9 +3056,6 @@ const HooksDispatcherOnRerender: Dispatcher = { if (enableCache) { (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh; } -if (enableUseHook) { - (HooksDispatcherOnRerender: Dispatcher).use = use; -} if (enableUseMemoCacheHook) { (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache; } @@ -3103,6 +3094,7 @@ if (__DEV__) { readContext(context: ReactContext): T { return readContext(context); }, + use, useCallback(callback: T, deps: Array | void | null): T { currentHookNameInDev = 'useCallback'; mountHookTypesDev(); @@ -3243,9 +3235,6 @@ if (__DEV__) { return mountRefresh(); }; } - if (enableUseHook) { - (HooksDispatcherOnMountInDEV: Dispatcher).use = use; - } if (enableUseMemoCacheHook) { (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache; } @@ -3264,6 +3253,7 @@ if (__DEV__) { readContext(context: ReactContext): T { return readContext(context); }, + use, useCallback(callback: T, deps: Array | void | null): T { currentHookNameInDev = 'useCallback'; updateHookTypesDev(); @@ -3398,9 +3388,6 @@ if (__DEV__) { return mountRefresh(); }; } - if (enableUseHook) { - (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).use = use; - } if (enableUseMemoCacheHook) { (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache; @@ -3420,6 +3407,7 @@ if (__DEV__) { readContext(context: ReactContext): T { return readContext(context); }, + use, useCallback(callback: T, deps: Array | void | null): T { currentHookNameInDev = 'useCallback'; updateHookTypesDev(); @@ -3557,9 +3545,6 @@ if (__DEV__) { return updateRefresh(); }; } - if (enableUseHook) { - (HooksDispatcherOnUpdateInDEV: Dispatcher).use = use; - } if (enableUseMemoCacheHook) { (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache; } @@ -3578,7 +3563,7 @@ if (__DEV__) { readContext(context: ReactContext): T { return readContext(context); }, - + use, useCallback(callback: T, deps: Array | void | null): T { currentHookNameInDev = 'useCallback'; updateHookTypesDev(); @@ -3716,9 +3701,6 @@ if (__DEV__) { return updateRefresh(); }; } - if (enableUseHook) { - (HooksDispatcherOnRerenderInDEV: Dispatcher).use = use; - } if (enableUseMemoCacheHook) { (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache; } @@ -3738,6 +3720,10 @@ if (__DEV__) { warnInvalidContextAccess(); return readContext(context); }, + use(usable: Usable): T { + warnInvalidHookAccess(); + return use(usable); + }, useCallback(callback: T, deps: Array | void | null): T { currentHookNameInDev = 'useCallback'; warnInvalidHookAccess(); @@ -3888,14 +3874,6 @@ if (__DEV__) { return mountRefresh(); }; } - if (enableUseHook) { - (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).use = function ( - usable: Usable, - ): T { - warnInvalidHookAccess(); - return use(usable); - }; - } if (enableUseMemoCacheHook) { (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function (size: number): Array { @@ -3920,6 +3898,10 @@ if (__DEV__) { warnInvalidContextAccess(); return readContext(context); }, + use(usable: Usable): T { + warnInvalidHookAccess(); + return use(usable); + }, useCallback(callback: T, deps: Array | void | null): T { currentHookNameInDev = 'useCallback'; warnInvalidHookAccess(); @@ -4073,14 +4055,6 @@ if (__DEV__) { return updateRefresh(); }; } - if (enableUseHook) { - (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).use = function ( - usable: Usable, - ): T { - warnInvalidHookAccess(); - return use(usable); - }; - } if (enableUseMemoCacheHook) { (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function (size: number): Array { @@ -4105,7 +4079,10 @@ if (__DEV__) { warnInvalidContextAccess(); return readContext(context); }, - + use(usable: Usable): T { + warnInvalidHookAccess(); + return use(usable); + }, useCallback(callback: T, deps: Array | void | null): T { currentHookNameInDev = 'useCallback'; warnInvalidHookAccess(); @@ -4259,14 +4236,6 @@ if (__DEV__) { return updateRefresh(); }; } - if (enableUseHook) { - (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).use = function < - T, - >(usable: Usable): T { - warnInvalidHookAccess(); - return use(usable); - }; - } if (enableUseMemoCacheHook) { (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function (size: number): Array { diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js index 281186c53de0d..1421181cb8ea9 100644 --- a/packages/react-reconciler/src/ReactInternalTypes.js +++ b/packages/react-reconciler/src/ReactInternalTypes.js @@ -372,7 +372,7 @@ type BasicStateAction = (S => S) | S; type Dispatch = A => void; export type Dispatcher = { - use?: (Usable) => T, + use: (Usable) => T, readContext(context: ReactContext): T, useState(initialState: (() => S) | S): [S, Dispatch>], useReducer( diff --git a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js index 8615d4ab2667e..28b5333e4cf4c 100644 --- a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js +++ b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js @@ -206,7 +206,6 @@ describe('isomorphic act()', () => { }); // @gate __DEV__ - // @gate enableUseHook test('unwraps promises by yielding to microtasks (async act scope)', async () => { const promise = Promise.resolve('Async'); @@ -232,7 +231,6 @@ describe('isomorphic act()', () => { }); // @gate __DEV__ - // @gate enableUseHook test('unwraps promises by yielding to microtasks (non-async act scope)', async () => { const promise = Promise.resolve('Async'); @@ -260,7 +258,6 @@ describe('isomorphic act()', () => { }); // @gate __DEV__ - // @gate enableUseHook test('warns if a promise is used in a non-awaited `act` scope', async () => { const promise = new Promise(() => {}); diff --git a/packages/react-reconciler/src/__tests__/ReactUse-test.js b/packages/react-reconciler/src/__tests__/ReactUse-test.js index ec3b86acb1cda..1057dc2718ec7 100644 --- a/packages/react-reconciler/src/__tests__/ReactUse-test.js +++ b/packages/react-reconciler/src/__tests__/ReactUse-test.js @@ -184,7 +184,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('Loading...'); }); - // @gate enableUseHook test('basic use(promise)', async () => { const promiseA = Promise.resolve('A'); const promiseB = Promise.resolve('B'); @@ -213,7 +212,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('ABC'); }); - // @gate enableUseHook test("using a promise that's not cached between attempts", async () => { function Async() { const text = @@ -241,7 +239,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('ABC'); }); - // @gate enableUseHook test('using a rejected promise will throw', async () => { class ErrorBoundary extends React.Component { state = {error: null}; @@ -286,7 +283,6 @@ describe('ReactUse', () => { assertLog(['Oops!', 'Oops!']); }); - // @gate enableUseHook test('use(promise) in multiple components', async () => { // This tests that the state for tracking promises is reset per component. const promiseA = Promise.resolve('A'); @@ -320,7 +316,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('ABCD'); }); - // @gate enableUseHook test('use(promise) in multiple sibling components', async () => { // This tests that the state for tracking promises is reset per component. @@ -356,7 +351,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('Loading...'); }); - // @gate enableUseHook test('erroring in the same component as an uncached promise does not result in an infinite loop', async () => { class ErrorBoundary extends React.Component { state = {error: null}; @@ -434,7 +428,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('Caught an error: Oops!'); }); - // @gate enableUseHook test('basic use(context)', async () => { const ContextA = React.createContext(''); const ContextB = React.createContext('B'); @@ -458,7 +451,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('AB'); }); - // @gate enableUseHook test('interrupting while yielded should reset contexts', async () => { let resolve; const promise = new Promise(r => { @@ -505,7 +497,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput(
Hello world!
); }); - // @gate enableUseHook || !__DEV__ test('warns if use(promise) is wrapped with try/catch block', async () => { function Async() { try { @@ -541,7 +532,6 @@ describe('ReactUse', () => { } }); - // @gate enableUseHook test('during a transition, can unwrap async operations even if nothing is cached', async () => { function App() { return ; @@ -577,7 +567,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('Async'); }); - // @gate enableUseHook test("does not prevent a Suspense fallback from showing if it's a new boundary, even during a transition", async () => { function App() { return ; @@ -620,7 +609,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('Async'); }); - // @gate enableUseHook test('when waiting for data to resolve, a fresh update will trigger a restart', async () => { function App() { return ; @@ -652,7 +640,6 @@ describe('ReactUse', () => { assertLog(['Something different']); }); - // @gate enableUseHook test('when waiting for data to resolve, an update on a different root does not cause work to be dropped', async () => { const getCachedAsyncText = cache(getAsyncText); @@ -693,7 +680,6 @@ describe('ReactUse', () => { expect(root1).toMatchRenderedOutput('Hi'); }); - // @gate enableUseHook test('while suspended, hooks cannot be called (i.e. current dispatcher is unset correctly)', async () => { function App() { return ; @@ -722,7 +708,6 @@ describe('ReactUse', () => { ); }); - // @gate enableUseHook test('unwraps thenable that fulfills synchronously without suspending', async () => { function App() { const thenable = { @@ -750,7 +735,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('Hi'); }); - // @gate enableUseHook test('does not suspend indefinitely if an interleaved update was skipped', async () => { function Child({childShouldSuspend}) { return ( @@ -979,7 +963,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('aguacate avocat'); }); - // @gate enableUseHook test( 'wrap an async function with useMemo to skip running the function ' + 'twice when loading new data', @@ -1012,7 +995,6 @@ describe('ReactUse', () => { }, ); - // @gate enableUseHook test('load multiple nested Suspense boundaries', async () => { const getCachedAsyncText = cache(getAsyncText); @@ -1056,7 +1038,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('ABC'); }); - // @gate enableUseHook test('load multiple nested Suspense boundaries (uncached requests)', async () => { // This the same as the previous test, except the requests are not cached. // The tree should still eventually resolve, despite the @@ -1139,7 +1120,6 @@ describe('ReactUse', () => { expect(root).toMatchRenderedOutput('ABC'); }); - // @gate enableUseHook test('use() combined with render phase updates', async () => { function Async() { const a = use(Promise.resolve('A')); diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js index fb99875425279..32224491e4aff 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js @@ -130,7 +130,6 @@ describe('ReactFlightDOM', () => { }); }); - // @gate enableUseHook it('should resolve the root', async () => { // Model function Text({children}) { @@ -180,7 +179,6 @@ describe('ReactFlightDOM', () => { ); }); - // @gate enableUseHook it('should not get confused by $', async () => { // Model function RootModel() { @@ -215,7 +213,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

$1

'); }); - // @gate enableUseHook it('should not get confused by @', async () => { // Model function RootModel() { @@ -250,7 +247,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

@div

'); }); - // @gate enableUseHook it('should be able to esm compat test module references', async () => { const ESMCompatModule = { __esModule: true, @@ -300,7 +296,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

Hello World

'); }); - // @gate enableUseHook it('should be able to render a named component export', async () => { const Module = { Component: function ({greeting}) { @@ -338,7 +333,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

Hello World

'); }); - // @gate enableUseHook it('should be able to render a module split named component export', async () => { const Module = { // This gets split into a separate module from the original one. @@ -377,7 +371,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

Hello World

'); }); - // @gate enableUseHook it('should unwrap async module references', async () => { const AsyncModule = Promise.resolve(function AsyncModule({text}) { return 'Async: ' + text; @@ -418,7 +411,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

Async: Module

'); }); - // @gate enableUseHook it('should unwrap async module references using use', async () => { const AsyncModule = Promise.resolve('Async Text'); @@ -457,7 +449,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

Async Text

'); }); - // @gate enableUseHook it('should be able to import a name called "then"', async () => { const thenExports = { then: function then() { @@ -531,7 +522,6 @@ describe('ReactFlightDOM', () => { ); }); - // @gate enableUseHook it('should progressively reveal server components', async () => { let reportedErrors = []; @@ -728,7 +718,6 @@ describe('ReactFlightDOM', () => { expect(reportedErrors).toEqual([]); }); - // @gate enableUseHook it('should preserve state of client components on refetch', async () => { // Client @@ -814,7 +803,6 @@ describe('ReactFlightDOM', () => { expect(inputB.value).toBe('goodbye'); }); - // @gate enableUseHook it('should be able to complete after aborting and throw the reason client-side', async () => { const reportedErrors = []; @@ -873,7 +861,6 @@ describe('ReactFlightDOM', () => { expect(reportedErrors).toEqual(['for reasons']); }); - // @gate enableUseHook it('should be able to recover from a direct reference erroring client-side', async () => { const reportedErrors = []; @@ -919,7 +906,6 @@ describe('ReactFlightDOM', () => { expect(reportedErrors).toEqual([]); }); - // @gate enableUseHook it('should be able to recover from a direct reference erroring client-side async', async () => { const reportedErrors = []; @@ -977,7 +963,6 @@ describe('ReactFlightDOM', () => { expect(reportedErrors).toEqual([]); }); - // @gate enableUseHook it('should be able to recover from a direct reference erroring server-side', async () => { const reportedErrors = []; @@ -1044,7 +1029,6 @@ describe('ReactFlightDOM', () => { expect(reportedErrors).toEqual(['bug in the bundler']); }); - // @gate enableUseHook it('should pass a Promise through props and be able use() it on the client', async () => { async function getData() { return 'async hello'; @@ -1090,7 +1074,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

async hello

'); }); - // @gate enableUseHook it('should throw on the client if a passed promise eventually rejects', async () => { const reportedErrors = []; const theError = new Error('Server throw'); @@ -1158,7 +1141,6 @@ describe('ReactFlightDOM', () => { expect(reportedErrors).toEqual([theError]); }); - // @gate enableUseHook it('should support ReactDOM.preload when rendering in Fiber', async () => { function Component() { return

hello world

; @@ -1214,7 +1196,6 @@ describe('ReactFlightDOM', () => { expect(container.innerHTML).toBe('

hello world

'); }); - // @gate enableUseHook it('should support ReactDOM.preload when rendering in Fizz', async () => { function Component() { return

hello world

; diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index c846493de8430..b1e41f2a232f7 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -182,7 +182,6 @@ describe('ReactFlightDOMBrowser', () => { }); }); - // @gate enableUseHook it('should progressively reveal server components', async () => { let reportedErrors = []; @@ -492,7 +491,6 @@ describe('ReactFlightDOMBrowser', () => { expect(isDone).toBeTruthy(); }); - // @gate enableUseHook it('should be able to complete after aborting and throw the reason client-side', async () => { const reportedErrors = []; @@ -576,7 +574,6 @@ describe('ReactFlightDOMBrowser', () => { expect(reportedErrors).toEqual(['for reasons']); }); - // @gate enableUseHook it('basic use(promise)', async () => { function Server() { return ( @@ -605,7 +602,6 @@ describe('ReactFlightDOMBrowser', () => { expect(container.innerHTML).toBe('ABC'); }); - // @gate enableUseHook it('basic use(context)', async () => { const ContextA = React.createServerContext('ContextA', ''); const ContextB = React.createServerContext('ContextB', 'B'); @@ -639,7 +635,6 @@ describe('ReactFlightDOMBrowser', () => { expect(container.innerHTML).toBe('AB'); }); - // @gate enableUseHook it('use(promise) in multiple components', async () => { function Child({prefix}) { return prefix + use(Promise.resolve('C')) + use(Promise.resolve('D')); @@ -670,7 +665,6 @@ describe('ReactFlightDOMBrowser', () => { expect(container.innerHTML).toBe('ABCD'); }); - // @gate enableUseHook it('using a rejected promise will throw', async () => { const promiseA = Promise.resolve('A'); const promiseB = Promise.reject(new Error('Oops!')); @@ -732,7 +726,6 @@ describe('ReactFlightDOMBrowser', () => { expect(reportedErrors[0].message).toBe('Oops!'); }); - // @gate enableUseHook it("use a promise that's already been instrumented and resolved", async () => { const thenable = { status: 'fulfilled', @@ -760,7 +753,6 @@ describe('ReactFlightDOMBrowser', () => { expect(container.innerHTML).toBe('Hi'); }); - // @gate enableUseHook it('unwraps thenable that fulfills synchronously without suspending', async () => { function Server() { const thenable = { diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index e090add747cea..ee110d483d711 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -54,7 +54,6 @@ describe('ReactFlightDOMEdge', () => { } } - // @gate enableUseHook it('should allow an alternative module mapping to be used for SSR', async () => { function ClientComponent() { return Client Component; diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js index 17b65bcddf786..c720b4434cdf9 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js @@ -56,7 +56,6 @@ describe('ReactFlightDOMNode', () => { }); } - // @gate enableUseHook it('should allow an alternative module mapping to be used for SSR', async () => { function ClientComponent() { return Client Component; diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js index a389c092618ed..62e4586f74590 100644 --- a/packages/react-server/src/ReactFizzHooks.js +++ b/packages/react-server/src/ReactFizzHooks.js @@ -31,7 +31,6 @@ import {makeId} from './ReactFizzConfig'; import { enableCache, - enableUseHook, enableUseEffectEventHook, enableUseMemoCacheHook, } from 'shared/ReactFeatureFlags'; @@ -610,6 +609,7 @@ function noop(): void {} export const HooksDispatcher: Dispatcher = { readContext, + use, useContext, useMemo, useReducer, @@ -641,9 +641,6 @@ if (enableUseEffectEventHook) { if (enableUseMemoCacheHook) { HooksDispatcher.useMemoCache = useMemoCache; } -if (enableUseHook) { - HooksDispatcher.use = use; -} export let currentResponseState: null | ResponseState = (null: any); export function setCurrentResponseState( diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js index 270e1f24007b2..190292515efb3 100644 --- a/packages/react-server/src/ReactFlightHooks.js +++ b/packages/react-server/src/ReactFlightHooks.js @@ -16,7 +16,6 @@ import { REACT_MEMO_CACHE_SENTINEL, } from 'shared/ReactSymbols'; import {readContext as readContextImpl} from './ReactFlightNewContext'; -import {enableUseHook} from 'shared/ReactFeatureFlags'; import {createThenableState, trackUsedThenable} from './ReactFlightThenable'; import {isClientReference} from './ReactFlightServerConfig'; @@ -100,7 +99,7 @@ export const HooksDispatcher: Dispatcher = { } return data; }, - use: enableUseHook ? use : (unsupportedHook: any), + use, }; function unsupportedHook(): void { diff --git a/packages/react/src/__tests__/ReactFetch-test.js b/packages/react/src/__tests__/ReactFetch-test.js index 2993ed564cdbd..b3f8843b8856e 100644 --- a/packages/react/src/__tests__/ReactFetch-test.js +++ b/packages/react/src/__tests__/ReactFetch-test.js @@ -135,7 +135,6 @@ describe('ReactFetch', () => { expect(fetchCount).toBe(1); }); - // @gate enableUseHook it('can opt-out of deduping fetches inside of render with custom signal', async () => { const controller = new AbortController(); function useCustomHook() { @@ -154,7 +153,6 @@ describe('ReactFetch', () => { expect(fetchCount).not.toBe(1); }); - // @gate enableUseHook it('opts out of deduping for POST requests', async () => { function useCustomHook() { return use( diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 6129bb1476f59..791ed622a0ff6 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -106,8 +106,6 @@ export const enableHostSingletons = true; export const enableFloat = true; -export const enableUseHook = true; - // Enables unstable_useMemoCache hook, intended as a compilation target for // auto-memoization. export const enableUseMemoCacheHook = __EXPERIMENTAL__; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 9345b0bb85ff3..239228901600d 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -53,7 +53,6 @@ export const disableModulePatternComponents = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = true; -export const enableUseHook = true; export const enableUseMemoCacheHook = true; export const enableUseEffectEventHook = false; export const enableClientRenderFallbackOnTextMismatch = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index c5888b2837c50..326f7d5385b46 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -39,7 +39,6 @@ export const disableModulePatternComponents = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEffectEventHook = false; export const enableClientRenderFallbackOnTextMismatch = true; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 63f3c9f6eb206..f3d296f257c92 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -39,7 +39,6 @@ export const disableModulePatternComponents = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEffectEventHook = false; export const enableClientRenderFallbackOnTextMismatch = true; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 771362d6bfecb..751695f8eb0b1 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -43,7 +43,6 @@ export const enableGetInspectorDataForInstanceInProduction = false; export const enableSuspenseAvoidThisFallback = false; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEffectEventHook = false; export const enableClientRenderFallbackOnTextMismatch = true; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 433d18d918247..31d2292dcf4e8 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -39,7 +39,6 @@ export const disableModulePatternComponents = true; export const enableSuspenseAvoidThisFallback = true; export const enableSuspenseAvoidThisFallbackFizz = false; export const enableCPUSuspense = false; -export const enableUseHook = true; export const enableUseMemoCacheHook = false; export const enableUseEffectEventHook = false; export const enableClientRenderFallbackOnTextMismatch = true; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index a4a64c0d93e81..949811e68148e 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -51,7 +51,6 @@ export const enableSuspenseAvoidThisFallbackFizz = false; export const disableSchedulerTimeoutInWorkLoop = false; export const enableCPUSuspense = true; export const enableFloat = true; -export const enableUseHook = true; export const enableUseMemoCacheHook = true; export const enableUseEffectEventHook = true; export const enableHostSingletons = true;