{"body":"Drop the \"state\". Just \"useOptimistic\". It's cleaner.\r\n\r\nThis is still an experimental API. May not be the final name.","parents":["388686f291afb2362fdc813c49f75b4132bc1314"],"commit":{"authorName":"Andrew Clark","authorEmail":"git@andrewclark.io","authoredAt":"2023-05-03T14:26:00-04:00","subject":"useOptimisticState -> useOptimistic (#26772)","shortRevision":"b7972822b5","revision":"b7972822b5887d05ae772ef757a453265b4b7aec"},"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzForm-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzForm-test.js\nindex eef6472098..6487b48d03 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzForm-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzForm-test.js\n@@ -22,7 +22,7 @@ let React;\n let ReactDOMServer;\n let ReactDOMClient;\n let useFormStatus;\n-let useOptimisticState;\n+let useOptimistic;\n \n describe('ReactDOMFizzForm', () => {\n beforeEach(() => {\n@@ -31,7 +31,7 @@ describe('ReactDOMFizzForm', () => {\n ReactDOMServer = require('react-dom\/server.browser');\n ReactDOMClient = require('react-dom\/client');\n useFormStatus = require('react-dom').experimental_useFormStatus;\n- useOptimisticState = require('react').experimental_useOptimisticState;\n+ useOptimistic = require('react').experimental_useOptimistic;\n act = require('internal-test-utils').act;\n container = document.createElement('div');\n document.body.appendChild(container);\n@@ -454,9 +454,9 @@ describe('ReactDOMFizzForm', () => {\n });\n \n \/\/ @gate enableAsyncActions\n- it('useOptimisticState returns passthrough value', async () => {\n+ it('useOptimistic returns passthrough value', async () => {\n function App() {\n- const [optimisticState] = useOptimisticState('hi');\n+ const [optimisticState] = useOptimistic('hi');\n return optimisticState;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\nindex 63ce2a8e65..30440c8b69 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n@@ -1987,7 +1987,7 @@ function rerenderState(\n return rerenderReducer(basicStateReducer, initialState);\n }\n \n-function mountOptimisticState(\n+function mountOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n@@ -2013,7 +2013,7 @@ function mountOptimisticState(\n return [passthrough, dispatch];\n }\n \n-function updateOptimisticState(\n+function updateOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n@@ -2034,11 +2034,11 @@ function updateOptimisticState(\n return updateReducerImpl(hook, ((currentHook: any): Hook), resolvedReducer);\n }\n \n-function rerenderOptimisticState(\n+function rerenderOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n- \/\/ Unlike useState, useOptimisticState doesn't support render phase updates.\n+ \/\/ Unlike useState, useOptimistic doesn't support render phase updates.\n \/\/ Also unlike useState, we need to replay all pending updates again in case\n \/\/ the passthrough value changed.\n \/\/\n@@ -2048,7 +2048,7 @@ function rerenderOptimisticState(\n \n if (currentHook !== null) {\n \/\/ This is an update. Process the update queue.\n- return updateOptimisticState(passthrough, reducer);\n+ return updateOptimistic(passthrough, reducer);\n }\n \n \/\/ This is a mount. No updates to process.\n@@ -3207,8 +3207,7 @@ if (enableFormActions && enableAsyncActions) {\n throwInvalidHookError;\n }\n if (enableAsyncActions) {\n- (ContextOnlyDispatcher: Dispatcher).useOptimisticState =\n- throwInvalidHookError;\n+ (ContextOnlyDispatcher: Dispatcher).useOptimistic = throwInvalidHookError;\n }\n \n const HooksDispatcherOnMount: Dispatcher = {\n@@ -3246,8 +3245,7 @@ if (enableFormActions && enableAsyncActions) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (HooksDispatcherOnMount: Dispatcher).useOptimisticState =\n- mountOptimisticState;\n+ (HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic;\n }\n \n const HooksDispatcherOnUpdate: Dispatcher = {\n@@ -3285,8 +3283,7 @@ if (enableFormActions && enableAsyncActions) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (HooksDispatcherOnUpdate: Dispatcher).useOptimisticState =\n- updateOptimisticState;\n+ (HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic;\n }\n \n const HooksDispatcherOnRerender: Dispatcher = {\n@@ -3324,8 +3321,7 @@ if (enableFormActions && enableAsyncActions) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (HooksDispatcherOnRerender: Dispatcher).useOptimisticState =\n- rerenderOptimisticState;\n+ (HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic;\n }\n \n let HooksDispatcherOnMountInDEV: Dispatcher | null = null;\n@@ -3518,14 +3514,14 @@ if (__DEV__) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (HooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =\n- function useOptimisticState(\n+ (HooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =\n+ function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n- currentHookNameInDev = 'useOptimisticState';\n+ currentHookNameInDev = 'useOptimistic';\n mountHookTypesDev();\n- return mountOptimisticState(passthrough, reducer);\n+ return mountOptimistic(passthrough, reducer);\n };\n }\n \n@@ -3687,14 +3683,14 @@ if (__DEV__) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimisticState =\n- function useOptimisticState(\n+ (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimistic =\n+ function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n- currentHookNameInDev = 'useOptimisticState';\n+ currentHookNameInDev = 'useOptimistic';\n updateHookTypesDev();\n- return mountOptimisticState(passthrough, reducer);\n+ return mountOptimistic(passthrough, reducer);\n };\n }\n \n@@ -3858,14 +3854,14 @@ if (__DEV__) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =\n- function useOptimisticState(\n+ (HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =\n+ function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n- currentHookNameInDev = 'useOptimisticState';\n+ currentHookNameInDev = 'useOptimistic';\n updateHookTypesDev();\n- return updateOptimisticState(passthrough, reducer);\n+ return updateOptimistic(passthrough, reducer);\n };\n }\n \n@@ -4029,14 +4025,14 @@ if (__DEV__) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =\n- function useOptimisticState(\n+ (HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =\n+ function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n- currentHookNameInDev = 'useOptimisticState';\n+ currentHookNameInDev = 'useOptimistic';\n updateHookTypesDev();\n- return rerenderOptimisticState(passthrough, reducer);\n+ return rerenderOptimistic(passthrough, reducer);\n };\n }\n \n@@ -4222,15 +4218,15 @@ if (__DEV__) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =\n- function useOptimisticState(\n+ (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =\n+ function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n- currentHookNameInDev = 'useOptimisticState';\n+ currentHookNameInDev = 'useOptimistic';\n warnInvalidHookAccess();\n mountHookTypesDev();\n- return mountOptimisticState(passthrough, reducer);\n+ return mountOptimistic(passthrough, reducer);\n };\n }\n \n@@ -4419,15 +4415,15 @@ if (__DEV__) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =\n- function useOptimisticState(\n+ (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =\n+ function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n- currentHookNameInDev = 'useOptimisticState';\n+ currentHookNameInDev = 'useOptimistic';\n warnInvalidHookAccess();\n updateHookTypesDev();\n- return updateOptimisticState(passthrough, reducer);\n+ return updateOptimistic(passthrough, reducer);\n };\n }\n \n@@ -4616,15 +4612,15 @@ if (__DEV__) {\n useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =\n- function useOptimisticState(\n+ (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =\n+ function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n- currentHookNameInDev = 'useOptimisticState';\n+ currentHookNameInDev = 'useOptimistic';\n warnInvalidHookAccess();\n updateHookTypesDev();\n- return rerenderOptimisticState(passthrough, reducer);\n+ return rerenderOptimistic(passthrough, reducer);\n };\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactInternalTypes.js b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\nindex c70ea5a1a5..fd08c6f85c 100644\n--- a\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n+++ b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n@@ -58,7 +58,7 @@ export type HookType =\n | 'useSyncExternalStore'\n | 'useId'\n | 'useCacheRefresh'\n- | 'useOptimisticState';\n+ | 'useOptimistic';\n \n export type ContextDependency = {\n context: ReactContext,\n@@ -424,7 +424,7 @@ export type Dispatcher = {\n useCacheRefresh?: () => (?() => T, ?T) => void,\n useMemoCache?: (size: number) => Array,\n useHostTransitionStatus?: () => TransitionStatus,\n- useOptimisticState?: (\n+ useOptimistic?: (\n passthrough: S,\n reducer: ?(S, A) => S,\n ) => [S, (A) => void],\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactAsyncActions-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactAsyncActions-test.js\nindex 7937067d1b..65b14b87f5 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactAsyncActions-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactAsyncActions-test.js\n@@ -5,7 +5,7 @@ let act;\n let assertLog;\n let useTransition;\n let useState;\n-let useOptimisticState;\n+let useOptimistic;\n let textCache;\n \n describe('ReactAsyncActions', () => {\n@@ -19,7 +19,7 @@ describe('ReactAsyncActions', () => {\n assertLog = require('internal-test-utils').assertLog;\n useTransition = React.useTransition;\n useState = React.useState;\n- useOptimisticState = React.experimental_useOptimisticState;\n+ useOptimistic = React.experimental_useOptimistic;\n \n textCache = new Map();\n });\n@@ -648,12 +648,12 @@ describe('ReactAsyncActions', () => {\n });\n \n \/\/ @gate enableAsyncActions\n- test('useOptimisticState can be used to implement a pending state', async () => {\n+ test('useOptimistic can be used to implement a pending state', async () => {\n const startTransition = React.startTransition;\n \n let setIsPending;\n function App({text}) {\n- const [isPending, _setIsPending] = useOptimisticState(false);\n+ const [isPending, _setIsPending] = useOptimistic(false);\n setIsPending = _setIsPending;\n return (\n <>\n@@ -698,7 +698,7 @@ describe('ReactAsyncActions', () => {\n });\n \n \/\/ @gate enableAsyncActions\n- test('useOptimisticState rebases pending updates on top of passthrough value', async () => {\n+ test('useOptimistic rebases pending updates on top of passthrough value', async () => {\n let serverCart = ['A'];\n \n async function submitNewItem(item) {\n@@ -715,7 +715,7 @@ describe('ReactAsyncActions', () => {\n \n const savedCartSize = cart.length;\n const [optimisticCartSize, setOptimisticCartSize] =\n- useOptimisticState(savedCartSize);\n+ useOptimistic(savedCartSize);\n \n addItemToCart = item => {\n startTransition(async () => {\n@@ -819,7 +819,7 @@ describe('ReactAsyncActions', () => {\n });\n \n \/\/ @gate enableAsyncActions\n- test('useOptimisticState accepts a custom reducer', async () => {\n+ test('useOptimistic accepts a custom reducer', async () => {\n let serverCart = ['A'];\n \n async function submitNewItem(item) {\n@@ -835,7 +835,7 @@ describe('ReactAsyncActions', () => {\n const [isPending, startTransition] = useTransition();\n \n const savedCartSize = cart.length;\n- const [optimisticCartSize, addToOptimisticCart] = useOptimisticState(\n+ const [optimisticCartSize, addToOptimisticCart] = useOptimistic(\n savedCartSize,\n (prevSize, newItem) => {\n Scheduler.log('Increment optimistic cart size for ' + newItem);\n@@ -951,7 +951,7 @@ describe('ReactAsyncActions', () => {\n });\n \n \/\/ @gate enableAsyncActions\n- test('useOptimisticState rebases if the passthrough is updated during a render phase update', async () => {\n+ test('useOptimistic rebases if the passthrough is updated during a render phase update', async () => {\n \/\/ This is kind of an esoteric case where it's hard to come up with a\n \/\/ realistic real-world scenario but it should still work.\n let increment;\n@@ -961,7 +961,7 @@ describe('ReactAsyncActions', () => {\n const [count, _setCount] = useState(0);\n setCount = _setCount;\n \n- const [optimisticCount, setOptimisticCount] = useOptimisticState(\n+ const [optimisticCount, setOptimisticCount] = useOptimistic(\n count,\n prev => {\n Scheduler.log('Increment optimistic count');\n@@ -1036,12 +1036,12 @@ describe('ReactAsyncActions', () => {\n });\n \n \/\/ @gate enableAsyncActions\n- test('useOptimisticState rebases if the passthrough is updated during a render phase update (initial mount)', async () => {\n+ test('useOptimistic rebases if the passthrough is updated during a render phase update (initial mount)', async () => {\n \/\/ This is kind of an esoteric case where it's hard to come up with a\n \/\/ realistic real-world scenario but it should still work.\n function App() {\n const [count, setCount] = useState(0);\n- const [optimisticCount] = useOptimisticState(count);\n+ const [optimisticCount] = useOptimistic(count);\n \n if (count === 0) {\n Scheduler.log('Render phase update count from 1 to 2');\ndiff --git a\/packages\/react-server\/src\/ReactFizzHooks.js b\/packages\/react-server\/src\/ReactFizzHooks.js\nindex b42a5e4693..78f68c917f 100644\n--- a\/packages\/react-server\/src\/ReactFizzHooks.js\n+++ b\/packages\/react-server\/src\/ReactFizzHooks.js\n@@ -557,7 +557,7 @@ function unsupportedSetOptimisticState() {\n throw new Error('Cannot update optimistic state while rendering.');\n }\n \n-function useOptimisticState(\n+function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n@@ -665,7 +665,7 @@ if (enableFormActions && enableAsyncActions) {\n HooksDispatcher.useHostTransitionStatus = useHostTransitionStatus;\n }\n if (enableAsyncActions) {\n- HooksDispatcher.useOptimisticState = useOptimisticState;\n+ HooksDispatcher.useOptimistic = useOptimistic;\n }\n \n export let currentResponseState: null | ResponseState = (null: any);\ndiff --git a\/packages\/react\/index.classic.fb.js b\/packages\/react\/index.classic.fb.js\nindex 274602af47..3afbd455e9 100644\n--- a\/packages\/react\/index.classic.fb.js\n+++ b\/packages\/react\/index.classic.fb.js\n@@ -59,7 +59,7 @@ export {\n useMemo,\n useMutableSource,\n useMutableSource as unstable_useMutableSource,\n- experimental_useOptimisticState,\n+ experimental_useOptimistic,\n useReducer,\n useRef,\n useState,\ndiff --git a\/packages\/react\/index.experimental.js b\/packages\/react\/index.experimental.js\nindex 1b9937e682..1115946e61 100644\n--- a\/packages\/react\/index.experimental.js\n+++ b\/packages\/react\/index.experimental.js\n@@ -49,7 +49,7 @@ export {\n useInsertionEffect,\n useLayoutEffect,\n useMemo,\n- experimental_useOptimisticState,\n+ experimental_useOptimistic,\n useReducer,\n useRef,\n useState,\ndiff --git a\/packages\/react\/index.js b\/packages\/react\/index.js\nindex f7a190f136..d6eb4a5e14 100644\n--- a\/packages\/react\/index.js\n+++ b\/packages\/react\/index.js\n@@ -77,7 +77,7 @@ export {\n useLayoutEffect,\n useMemo,\n useMutableSource,\n- experimental_useOptimisticState,\n+ experimental_useOptimistic,\n useSyncExternalStore,\n useReducer,\n useRef,\ndiff --git a\/packages\/react\/index.modern.fb.js b\/packages\/react\/index.modern.fb.js\nindex 166d19b77d..aadda20638 100644\n--- a\/packages\/react\/index.modern.fb.js\n+++ b\/packages\/react\/index.modern.fb.js\n@@ -57,7 +57,7 @@ export {\n useMemo,\n useMutableSource,\n useMutableSource as unstable_useMutableSource,\n- experimental_useOptimisticState,\n+ experimental_useOptimistic,\n useReducer,\n useRef,\n useState,\ndiff --git a\/packages\/react\/src\/React.js b\/packages\/react\/src\/React.js\nindex 9605916fcb..0e20df516b 100644\n--- a\/packages\/react\/src\/React.js\n+++ b\/packages\/react\/src\/React.js\n@@ -59,7 +59,7 @@ import {\n useCacheRefresh,\n use,\n useMemoCache,\n- useOptimisticState,\n+ useOptimistic,\n } from '.\/ReactHooks';\n import {\n createElementWithValidation,\n@@ -113,7 +113,7 @@ export {\n useLayoutEffect,\n useMemo,\n useMutableSource,\n- useOptimisticState as experimental_useOptimisticState,\n+ useOptimistic as experimental_useOptimistic,\n useSyncExternalStore,\n useReducer,\n useRef,\ndiff --git a\/packages\/react\/src\/ReactHooks.js b\/packages\/react\/src\/ReactHooks.js\nindex 2323bdbc29..81fa626b5a 100644\n--- a\/packages\/react\/src\/ReactHooks.js\n+++ b\/packages\/react\/src\/ReactHooks.js\n@@ -242,11 +242,11 @@ export function useEffectEvent) => mixed>(\n return dispatcher.useEffectEvent(callback);\n }\n \n-export function useOptimisticState(\n+export function useOptimistic(\n passthrough: S,\n reducer: ?(S, A) => S,\n ): [S, (A) => void] {\n const dispatcher = resolveDispatcher();\n \/\/ $FlowFixMe[not-a-function] This is unstable, thus optional\n- return dispatcher.useOptimisticState(passthrough, reducer);\n+ return dispatcher.useOptimistic(passthrough, reducer);\n }\n","files":[{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzForm-test.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactInternalTypes.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactAsyncActions-test.js"},{"status":"M","path":"packages\/react-server\/src\/ReactFizzHooks.js"},{"status":"M","path":"packages\/react\/index.classic.fb.js"},{"status":"M","path":"packages\/react\/index.experimental.js"},{"status":"M","path":"packages\/react\/index.js"},{"status":"M","path":"packages\/react\/index.modern.fb.js"},{"status":"M","path":"packages\/react\/src\/React.js"},{"status":"M","path":"packages\/react\/src\/ReactHooks.js"}]}

dillon1000/react

Files changed