From 1e5396fe98a149fca46b86bfb7399155aaefb7bb Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Wed, 3 May 2023 14:10:28 -0400 Subject: [PATCH] useOptimisticState -> useOptimistic Drop the "state". Just "useOptimistic". It's cleaner. This is still an experimental API. May not be the final name. --- .../src/__tests__/ReactDOMFizzForm-test.js | 8 +- .../react-reconciler/src/ReactFiberHooks.js | 78 +++++++++---------- .../src/ReactInternalTypes.js | 4 +- .../src/__tests__/ReactAsyncActions-test.js | 24 +++--- packages/react-server/src/ReactFizzHooks.js | 4 +- packages/react/index.classic.fb.js | 2 +- packages/react/index.experimental.js | 2 +- packages/react/index.js | 2 +- packages/react/index.modern.fb.js | 2 +- packages/react/src/React.js | 4 +- packages/react/src/ReactHooks.js | 4 +- 11 files changed, 65 insertions(+), 69 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js index eef64720985dd..6487b48d03ef0 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js @@ -22,7 +22,7 @@ let React; let ReactDOMServer; let ReactDOMClient; let useFormStatus; -let useOptimisticState; +let useOptimistic; describe('ReactDOMFizzForm', () => { beforeEach(() => { @@ -31,7 +31,7 @@ describe('ReactDOMFizzForm', () => { ReactDOMServer = require('react-dom/server.browser'); ReactDOMClient = require('react-dom/client'); useFormStatus = require('react-dom').experimental_useFormStatus; - useOptimisticState = require('react').experimental_useOptimisticState; + useOptimistic = require('react').experimental_useOptimistic; act = require('internal-test-utils').act; container = document.createElement('div'); document.body.appendChild(container); @@ -454,9 +454,9 @@ describe('ReactDOMFizzForm', () => { }); // @gate enableAsyncActions - it('useOptimisticState returns passthrough value', async () => { + it('useOptimistic returns passthrough value', async () => { function App() { - const [optimisticState] = useOptimisticState('hi'); + const [optimisticState] = useOptimistic('hi'); return optimisticState; } diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js index 63ce2a8e655b5..30440c8b69a60 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.js +++ b/packages/react-reconciler/src/ReactFiberHooks.js @@ -1987,7 +1987,7 @@ function rerenderState( return rerenderReducer(basicStateReducer, initialState); } -function mountOptimisticState( +function mountOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { @@ -2013,7 +2013,7 @@ function mountOptimisticState( return [passthrough, dispatch]; } -function updateOptimisticState( +function updateOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { @@ -2034,11 +2034,11 @@ function updateOptimisticState( return updateReducerImpl(hook, ((currentHook: any): Hook), resolvedReducer); } -function rerenderOptimisticState( +function rerenderOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { - // Unlike useState, useOptimisticState doesn't support render phase updates. + // Unlike useState, useOptimistic doesn't support render phase updates. // Also unlike useState, we need to replay all pending updates again in case // the passthrough value changed. // @@ -2048,7 +2048,7 @@ function rerenderOptimisticState( if (currentHook !== null) { // This is an update. Process the update queue. - return updateOptimisticState(passthrough, reducer); + return updateOptimistic(passthrough, reducer); } // This is a mount. No updates to process. @@ -3207,8 +3207,7 @@ if (enableFormActions && enableAsyncActions) { throwInvalidHookError; } if (enableAsyncActions) { - (ContextOnlyDispatcher: Dispatcher).useOptimisticState = - throwInvalidHookError; + (ContextOnlyDispatcher: Dispatcher).useOptimistic = throwInvalidHookError; } const HooksDispatcherOnMount: Dispatcher = { @@ -3246,8 +3245,7 @@ if (enableFormActions && enableAsyncActions) { useHostTransitionStatus; } if (enableAsyncActions) { - (HooksDispatcherOnMount: Dispatcher).useOptimisticState = - mountOptimisticState; + (HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic; } const HooksDispatcherOnUpdate: Dispatcher = { @@ -3285,8 +3283,7 @@ if (enableFormActions && enableAsyncActions) { useHostTransitionStatus; } if (enableAsyncActions) { - (HooksDispatcherOnUpdate: Dispatcher).useOptimisticState = - updateOptimisticState; + (HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic; } const HooksDispatcherOnRerender: Dispatcher = { @@ -3324,8 +3321,7 @@ if (enableFormActions && enableAsyncActions) { useHostTransitionStatus; } if (enableAsyncActions) { - (HooksDispatcherOnRerender: Dispatcher).useOptimisticState = - rerenderOptimisticState; + (HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic; } let HooksDispatcherOnMountInDEV: Dispatcher | null = null; @@ -3518,14 +3514,14 @@ if (__DEV__) { useHostTransitionStatus; } if (enableAsyncActions) { - (HooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState = - function useOptimisticState( + (HooksDispatcherOnMountInDEV: Dispatcher).useOptimistic = + function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { - currentHookNameInDev = 'useOptimisticState'; + currentHookNameInDev = 'useOptimistic'; mountHookTypesDev(); - return mountOptimisticState(passthrough, reducer); + return mountOptimistic(passthrough, reducer); }; } @@ -3687,14 +3683,14 @@ if (__DEV__) { useHostTransitionStatus; } if (enableAsyncActions) { - (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimisticState = - function useOptimisticState( + (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimistic = + function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { - currentHookNameInDev = 'useOptimisticState'; + currentHookNameInDev = 'useOptimistic'; updateHookTypesDev(); - return mountOptimisticState(passthrough, reducer); + return mountOptimistic(passthrough, reducer); }; } @@ -3858,14 +3854,14 @@ if (__DEV__) { useHostTransitionStatus; } if (enableAsyncActions) { - (HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState = - function useOptimisticState( + (HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic = + function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { - currentHookNameInDev = 'useOptimisticState'; + currentHookNameInDev = 'useOptimistic'; updateHookTypesDev(); - return updateOptimisticState(passthrough, reducer); + return updateOptimistic(passthrough, reducer); }; } @@ -4029,14 +4025,14 @@ if (__DEV__) { useHostTransitionStatus; } if (enableAsyncActions) { - (HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState = - function useOptimisticState( + (HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic = + function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { - currentHookNameInDev = 'useOptimisticState'; + currentHookNameInDev = 'useOptimistic'; updateHookTypesDev(); - return rerenderOptimisticState(passthrough, reducer); + return rerenderOptimistic(passthrough, reducer); }; } @@ -4222,15 +4218,15 @@ if (__DEV__) { useHostTransitionStatus; } if (enableAsyncActions) { - (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState = - function useOptimisticState( + (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimistic = + function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { - currentHookNameInDev = 'useOptimisticState'; + currentHookNameInDev = 'useOptimistic'; warnInvalidHookAccess(); mountHookTypesDev(); - return mountOptimisticState(passthrough, reducer); + return mountOptimistic(passthrough, reducer); }; } @@ -4419,15 +4415,15 @@ if (__DEV__) { useHostTransitionStatus; } if (enableAsyncActions) { - (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState = - function useOptimisticState( + (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic = + function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { - currentHookNameInDev = 'useOptimisticState'; + currentHookNameInDev = 'useOptimistic'; warnInvalidHookAccess(); updateHookTypesDev(); - return updateOptimisticState(passthrough, reducer); + return updateOptimistic(passthrough, reducer); }; } @@ -4616,15 +4612,15 @@ if (__DEV__) { useHostTransitionStatus; } if (enableAsyncActions) { - (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState = - function useOptimisticState( + (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic = + function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { - currentHookNameInDev = 'useOptimisticState'; + currentHookNameInDev = 'useOptimistic'; warnInvalidHookAccess(); updateHookTypesDev(); - return rerenderOptimisticState(passthrough, reducer); + return rerenderOptimistic(passthrough, reducer); }; } } diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js index c70ea5a1a5640..fd08c6f85c795 100644 --- a/packages/react-reconciler/src/ReactInternalTypes.js +++ b/packages/react-reconciler/src/ReactInternalTypes.js @@ -58,7 +58,7 @@ export type HookType = | 'useSyncExternalStore' | 'useId' | 'useCacheRefresh' - | 'useOptimisticState'; + | 'useOptimistic'; export type ContextDependency = { context: ReactContext, @@ -424,7 +424,7 @@ export type Dispatcher = { useCacheRefresh?: () => (?() => T, ?T) => void, useMemoCache?: (size: number) => Array, useHostTransitionStatus?: () => TransitionStatus, - useOptimisticState?: ( + useOptimistic?: ( passthrough: S, reducer: ?(S, A) => S, ) => [S, (A) => void], diff --git a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js index 7937067d1b2ec..65b14b87f569c 100644 --- a/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js +++ b/packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js @@ -5,7 +5,7 @@ let act; let assertLog; let useTransition; let useState; -let useOptimisticState; +let useOptimistic; let textCache; describe('ReactAsyncActions', () => { @@ -19,7 +19,7 @@ describe('ReactAsyncActions', () => { assertLog = require('internal-test-utils').assertLog; useTransition = React.useTransition; useState = React.useState; - useOptimisticState = React.experimental_useOptimisticState; + useOptimistic = React.experimental_useOptimistic; textCache = new Map(); }); @@ -648,12 +648,12 @@ describe('ReactAsyncActions', () => { }); // @gate enableAsyncActions - test('useOptimisticState can be used to implement a pending state', async () => { + test('useOptimistic can be used to implement a pending state', async () => { const startTransition = React.startTransition; let setIsPending; function App({text}) { - const [isPending, _setIsPending] = useOptimisticState(false); + const [isPending, _setIsPending] = useOptimistic(false); setIsPending = _setIsPending; return ( <> @@ -698,7 +698,7 @@ describe('ReactAsyncActions', () => { }); // @gate enableAsyncActions - test('useOptimisticState rebases pending updates on top of passthrough value', async () => { + test('useOptimistic rebases pending updates on top of passthrough value', async () => { let serverCart = ['A']; async function submitNewItem(item) { @@ -715,7 +715,7 @@ describe('ReactAsyncActions', () => { const savedCartSize = cart.length; const [optimisticCartSize, setOptimisticCartSize] = - useOptimisticState(savedCartSize); + useOptimistic(savedCartSize); addItemToCart = item => { startTransition(async () => { @@ -819,7 +819,7 @@ describe('ReactAsyncActions', () => { }); // @gate enableAsyncActions - test('useOptimisticState accepts a custom reducer', async () => { + test('useOptimistic accepts a custom reducer', async () => { let serverCart = ['A']; async function submitNewItem(item) { @@ -835,7 +835,7 @@ describe('ReactAsyncActions', () => { const [isPending, startTransition] = useTransition(); const savedCartSize = cart.length; - const [optimisticCartSize, addToOptimisticCart] = useOptimisticState( + const [optimisticCartSize, addToOptimisticCart] = useOptimistic( savedCartSize, (prevSize, newItem) => { Scheduler.log('Increment optimistic cart size for ' + newItem); @@ -951,7 +951,7 @@ describe('ReactAsyncActions', () => { }); // @gate enableAsyncActions - test('useOptimisticState rebases if the passthrough is updated during a render phase update', async () => { + test('useOptimistic rebases if the passthrough is updated during a render phase update', async () => { // This is kind of an esoteric case where it's hard to come up with a // realistic real-world scenario but it should still work. let increment; @@ -961,7 +961,7 @@ describe('ReactAsyncActions', () => { const [count, _setCount] = useState(0); setCount = _setCount; - const [optimisticCount, setOptimisticCount] = useOptimisticState( + const [optimisticCount, setOptimisticCount] = useOptimistic( count, prev => { Scheduler.log('Increment optimistic count'); @@ -1036,12 +1036,12 @@ describe('ReactAsyncActions', () => { }); // @gate enableAsyncActions - test('useOptimisticState rebases if the passthrough is updated during a render phase update (initial mount)', async () => { + test('useOptimistic rebases if the passthrough is updated during a render phase update (initial mount)', async () => { // This is kind of an esoteric case where it's hard to come up with a // realistic real-world scenario but it should still work. function App() { const [count, setCount] = useState(0); - const [optimisticCount] = useOptimisticState(count); + const [optimisticCount] = useOptimistic(count); if (count === 0) { Scheduler.log('Render phase update count from 1 to 2'); diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js index b42a5e469320e..78f68c917f272 100644 --- a/packages/react-server/src/ReactFizzHooks.js +++ b/packages/react-server/src/ReactFizzHooks.js @@ -557,7 +557,7 @@ function unsupportedSetOptimisticState() { throw new Error('Cannot update optimistic state while rendering.'); } -function useOptimisticState( +function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { @@ -665,7 +665,7 @@ if (enableFormActions && enableAsyncActions) { HooksDispatcher.useHostTransitionStatus = useHostTransitionStatus; } if (enableAsyncActions) { - HooksDispatcher.useOptimisticState = useOptimisticState; + HooksDispatcher.useOptimistic = useOptimistic; } export let currentResponseState: null | ResponseState = (null: any); diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js index 274602af47f4b..3afbd455e9936 100644 --- a/packages/react/index.classic.fb.js +++ b/packages/react/index.classic.fb.js @@ -59,7 +59,7 @@ export { useMemo, useMutableSource, useMutableSource as unstable_useMutableSource, - experimental_useOptimisticState, + experimental_useOptimistic, useReducer, useRef, useState, diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js index 1b9937e682aa9..1115946e61ca9 100644 --- a/packages/react/index.experimental.js +++ b/packages/react/index.experimental.js @@ -49,7 +49,7 @@ export { useInsertionEffect, useLayoutEffect, useMemo, - experimental_useOptimisticState, + experimental_useOptimistic, useReducer, useRef, useState, diff --git a/packages/react/index.js b/packages/react/index.js index f7a190f13694a..d6eb4a5e14e1a 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -77,7 +77,7 @@ export { useLayoutEffect, useMemo, useMutableSource, - experimental_useOptimisticState, + experimental_useOptimistic, useSyncExternalStore, useReducer, useRef, diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js index 166d19b77daef..aadda20638642 100644 --- a/packages/react/index.modern.fb.js +++ b/packages/react/index.modern.fb.js @@ -57,7 +57,7 @@ export { useMemo, useMutableSource, useMutableSource as unstable_useMutableSource, - experimental_useOptimisticState, + experimental_useOptimistic, useReducer, useRef, useState, diff --git a/packages/react/src/React.js b/packages/react/src/React.js index 9605916fcb214..0e20df516b266 100644 --- a/packages/react/src/React.js +++ b/packages/react/src/React.js @@ -59,7 +59,7 @@ import { useCacheRefresh, use, useMemoCache, - useOptimisticState, + useOptimistic, } from './ReactHooks'; import { createElementWithValidation, @@ -113,7 +113,7 @@ export { useLayoutEffect, useMemo, useMutableSource, - useOptimisticState as experimental_useOptimisticState, + useOptimistic as experimental_useOptimistic, useSyncExternalStore, useReducer, useRef, diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js index 2323bdbc29c20..81fa626b5ab3b 100644 --- a/packages/react/src/ReactHooks.js +++ b/packages/react/src/ReactHooks.js @@ -242,11 +242,11 @@ export function useEffectEvent) => mixed>( return dispatcher.useEffectEvent(callback); } -export function useOptimisticState( +export function useOptimistic( passthrough: S, reducer: ?(S, A) => S, ): [S, (A) => void] { const dispatcher = resolveDispatcher(); // $FlowFixMe[not-a-function] This is unstable, thus optional - return dispatcher.useOptimisticState(passthrough, reducer); + return dispatcher.useOptimistic(passthrough, reducer); }