useOptimisticState -> useOptimistic (#26772)
Drop the "state". Just "useOptimistic". It's cleaner. This is still an experimental API. May not be the final name.
Andrew Clark committed
May 3, 2023 at 14:26 UTC
b7972822b5887d05ae772ef757a453265b4b7aec
11 files changed
+65
-69
packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
+4
-4
@@ -22,7 +22,7 @@ let React;
22
let ReactDOMServer;
23
let ReactDOMClient;
24
let useFormStatus;
25
-let useOptimisticState;
25
+let useOptimistic;
26
27
describe('ReactDOMFizzForm', () => {
28
beforeEach(() => {
@@ -31,7 +31,7 @@ describe('ReactDOMFizzForm', () => {
31
ReactDOMServer = require('react-dom/server.browser');
32
ReactDOMClient = require('react-dom/client');
33
useFormStatus = require('react-dom').experimental_useFormStatus;
34
- useOptimisticState = require('react').experimental_useOptimisticState;
34
+ useOptimistic = require('react').experimental_useOptimistic;
35
act = require('internal-test-utils').act;
36
container = document.createElement('div');
37
document.body.appendChild(container);
@@ -454,9 +454,9 @@ describe('ReactDOMFizzForm', () => {
454
});
455
456
// @gate enableAsyncActions
457
- it('useOptimisticState returns passthrough value', async () => {
457
+ it('useOptimistic returns passthrough value', async () => {
458
function App() {
459
- const [optimisticState] = useOptimisticState('hi');
459
+ const [optimisticState] = useOptimistic('hi');
460
return optimisticState;
461
}
462
packages/react-reconciler/src/ReactFiberHooks.js
+37
-41
@@ -1987,7 +1987,7 @@ function rerenderState<S>(
1987
return rerenderReducer(basicStateReducer, initialState);
1988
}
1989
1990
-function mountOptimisticState<S, A>(
1990
+function mountOptimistic<S, A>(
1991
passthrough: S,
1992
reducer: ?(S, A) => S,
1993
): [S, (A) => void] {
@@ -2013,7 +2013,7 @@ function mountOptimisticState<S, A>(
2013
return [passthrough, dispatch];
2014
}
2015
2016
-function updateOptimisticState<S, A>(
2016
+function updateOptimistic<S, A>(
2017
passthrough: S,
2018
reducer: ?(S, A) => S,
2019
): [S, (A) => void] {
@@ -2034,11 +2034,11 @@ function updateOptimisticState<S, A>(
2034
return updateReducerImpl(hook, ((currentHook: any): Hook), resolvedReducer);
2035
}
2036
2037
-function rerenderOptimisticState<S, A>(
2037
+function rerenderOptimistic<S, A>(
2038
passthrough: S,
2039
reducer: ?(S, A) => S,
2040
): [S, (A) => void] {
2041
- // Unlike useState, useOptimisticState doesn't support render phase updates.
2041
+ // Unlike useState, useOptimistic doesn't support render phase updates.
2042
// Also unlike useState, we need to replay all pending updates again in case
2043
// the passthrough value changed.
2044
//
@@ -2048,7 +2048,7 @@ function rerenderOptimisticState<S, A>(
2048
2049
if (currentHook !== null) {
2050
// This is an update. Process the update queue.
2051
- return updateOptimisticState(passthrough, reducer);
2051
+ return updateOptimistic(passthrough, reducer);
2052
}
2053
2054
// This is a mount. No updates to process.
@@ -3207,8 +3207,7 @@ if (enableFormActions && enableAsyncActions) {
3207
throwInvalidHookError;
3208
}
3209
if (enableAsyncActions) {
3210
- (ContextOnlyDispatcher: Dispatcher).useOptimisticState =
3211
- throwInvalidHookError;
3210
+ (ContextOnlyDispatcher: Dispatcher).useOptimistic = throwInvalidHookError;
3211
}
3212
3213
const HooksDispatcherOnMount: Dispatcher = {
@@ -3246,8 +3245,7 @@ if (enableFormActions && enableAsyncActions) {
3245
useHostTransitionStatus;
3246
}
3247
if (enableAsyncActions) {
3249
- (HooksDispatcherOnMount: Dispatcher).useOptimisticState =
3250
- mountOptimisticState;
3248
+ (HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic;
3249
}
3250
3251
const HooksDispatcherOnUpdate: Dispatcher = {
@@ -3285,8 +3283,7 @@ if (enableFormActions && enableAsyncActions) {
3283
useHostTransitionStatus;
3284
}
3285
if (enableAsyncActions) {
3288
- (HooksDispatcherOnUpdate: Dispatcher).useOptimisticState =
3289
- updateOptimisticState;
3286
+ (HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic;
3287
}
3288
3289
const HooksDispatcherOnRerender: Dispatcher = {
@@ -3324,8 +3321,7 @@ if (enableFormActions && enableAsyncActions) {
3321
useHostTransitionStatus;
3322
}
3323
if (enableAsyncActions) {
3327
- (HooksDispatcherOnRerender: Dispatcher).useOptimisticState =
3328
- rerenderOptimisticState;
3324
+ (HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic;
3325
}
3326
3327
let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
@@ -3518,14 +3514,14 @@ if (__DEV__) {
3514
useHostTransitionStatus;
3515
}
3516
if (enableAsyncActions) {
3521
- (HooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =
3522
- function useOptimisticState<S, A>(
3517
+ (HooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =
3518
+ function useOptimistic<S, A>(
3519
passthrough: S,
3520
reducer: ?(S, A) => S,
3521
): [S, (A) => void] {
3526
- currentHookNameInDev = 'useOptimisticState';
3522
+ currentHookNameInDev = 'useOptimistic';
3523
mountHookTypesDev();
3528
- return mountOptimisticState(passthrough, reducer);
3524
+ return mountOptimistic(passthrough, reducer);
3525
};
3526
}
3527
@@ -3687,14 +3683,14 @@ if (__DEV__) {
3683
useHostTransitionStatus;
3684
}
3685
if (enableAsyncActions) {
3690
- (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimisticState =
3691
- function useOptimisticState<S, A>(
3686
+ (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimistic =
3687
+ function useOptimistic<S, A>(
3688
passthrough: S,
3689
reducer: ?(S, A) => S,
3690
): [S, (A) => void] {
3695
- currentHookNameInDev = 'useOptimisticState';
3691
+ currentHookNameInDev = 'useOptimistic';
3692
updateHookTypesDev();
3697
- return mountOptimisticState(passthrough, reducer);
3693
+ return mountOptimistic(passthrough, reducer);
3694
};
3695
}
3696
@@ -3858,14 +3854,14 @@ if (__DEV__) {
3854
useHostTransitionStatus;
3855
}
3856
if (enableAsyncActions) {
3861
- (HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =
3862
- function useOptimisticState<S, A>(
3857
+ (HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =
3858
+ function useOptimistic<S, A>(
3859
passthrough: S,
3860
reducer: ?(S, A) => S,
3861
): [S, (A) => void] {
3866
- currentHookNameInDev = 'useOptimisticState';
3862
+ currentHookNameInDev = 'useOptimistic';
3863
updateHookTypesDev();
3868
- return updateOptimisticState(passthrough, reducer);
3864
+ return updateOptimistic(passthrough, reducer);
3865
};
3866
}
3867
@@ -4029,14 +4025,14 @@ if (__DEV__) {
4025
useHostTransitionStatus;
4026
}
4027
if (enableAsyncActions) {
4032
- (HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =
4033
- function useOptimisticState<S, A>(
4028
+ (HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =
4029
+ function useOptimistic<S, A>(
4030
passthrough: S,
4031
reducer: ?(S, A) => S,
4032
): [S, (A) => void] {
4037
- currentHookNameInDev = 'useOptimisticState';
4033
+ currentHookNameInDev = 'useOptimistic';
4034
updateHookTypesDev();
4039
- return rerenderOptimisticState(passthrough, reducer);
4035
+ return rerenderOptimistic(passthrough, reducer);
4036
};
4037
}
4038
@@ -4222,15 +4218,15 @@ if (__DEV__) {
4218
useHostTransitionStatus;
4219
}
4220
if (enableAsyncActions) {
4225
- (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =
4226
- function useOptimisticState<S, A>(
4221
+ (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =
4222
+ function useOptimistic<S, A>(
4223
passthrough: S,
4224
reducer: ?(S, A) => S,
4225
): [S, (A) => void] {
4230
- currentHookNameInDev = 'useOptimisticState';
4226
+ currentHookNameInDev = 'useOptimistic';
4227
warnInvalidHookAccess();
4228
mountHookTypesDev();
4233
- return mountOptimisticState(passthrough, reducer);
4229
+ return mountOptimistic(passthrough, reducer);
4230
};
4231
}
4232
@@ -4419,15 +4415,15 @@ if (__DEV__) {
4415
useHostTransitionStatus;
4416
}
4417
if (enableAsyncActions) {
4422
- (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =
4423
- function useOptimisticState<S, A>(
4418
+ (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =
4419
+ function useOptimistic<S, A>(
4420
passthrough: S,
4421
reducer: ?(S, A) => S,
4422
): [S, (A) => void] {
4427
- currentHookNameInDev = 'useOptimisticState';
4423
+ currentHookNameInDev = 'useOptimistic';
4424
warnInvalidHookAccess();
4425
updateHookTypesDev();
4430
- return updateOptimisticState(passthrough, reducer);
4426
+ return updateOptimistic(passthrough, reducer);
4427
};
4428
}
4429
@@ -4616,15 +4612,15 @@ if (__DEV__) {
4612
useHostTransitionStatus;
4613
}
4614
if (enableAsyncActions) {
4619
- (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =
4620
- function useOptimisticState<S, A>(
4615
+ (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =
4616
+ function useOptimistic<S, A>(
4617
passthrough: S,
4618
reducer: ?(S, A) => S,
4619
): [S, (A) => void] {
4624
- currentHookNameInDev = 'useOptimisticState';
4620
+ currentHookNameInDev = 'useOptimistic';
4621
warnInvalidHookAccess();
4622
updateHookTypesDev();
4627
- return rerenderOptimisticState(passthrough, reducer);
4623
+ return rerenderOptimistic(passthrough, reducer);
4624
};
4625
}
4626
}
packages/react-reconciler/src/ReactInternalTypes.js
+2
-2
@@ -58,7 +58,7 @@ export type HookType =
58
| 'useSyncExternalStore'
59
| 'useId'
60
| 'useCacheRefresh'
61
- | 'useOptimisticState';
61
+ | 'useOptimistic';
62
63
export type ContextDependency<T> = {
64
context: ReactContext<T>,
@@ -424,7 +424,7 @@ export type Dispatcher = {
424
useCacheRefresh?: () => <T>(?() => T, ?T) => void,
425
useMemoCache?: (size: number) => Array<any>,
426
useHostTransitionStatus?: () => TransitionStatus,
427
- useOptimisticState?: <S, A>(
427
+ useOptimistic?: <S, A>(
428
passthrough: S,
429
reducer: ?(S, A) => S,
430
) => [S, (A) => void],
packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
+12
-12
@@ -5,7 +5,7 @@ let act;
5
let assertLog;
6
let useTransition;
7
let useState;
8
-let useOptimisticState;
8
+let useOptimistic;
9
let textCache;
10
11
describe('ReactAsyncActions', () => {
@@ -19,7 +19,7 @@ describe('ReactAsyncActions', () => {
19
assertLog = require('internal-test-utils').assertLog;
20
useTransition = React.useTransition;
21
useState = React.useState;
22
- useOptimisticState = React.experimental_useOptimisticState;
22
+ useOptimistic = React.experimental_useOptimistic;
23
24
textCache = new Map();
25
});
@@ -648,12 +648,12 @@ describe('ReactAsyncActions', () => {
648
});
649
650
// @gate enableAsyncActions
651
- test('useOptimisticState can be used to implement a pending state', async () => {
651
+ test('useOptimistic can be used to implement a pending state', async () => {
652
const startTransition = React.startTransition;
653
654
let setIsPending;
655
function App({text}) {
656
- const [isPending, _setIsPending] = useOptimisticState(false);
656
+ const [isPending, _setIsPending] = useOptimistic(false);
657
setIsPending = _setIsPending;
658
return (
659
<>
@@ -698,7 +698,7 @@ describe('ReactAsyncActions', () => {
698
});
699
700
// @gate enableAsyncActions
701
- test('useOptimisticState rebases pending updates on top of passthrough value', async () => {
701
+ test('useOptimistic rebases pending updates on top of passthrough value', async () => {
702
let serverCart = ['A'];
703
704
async function submitNewItem(item) {
@@ -715,7 +715,7 @@ describe('ReactAsyncActions', () => {
715
716
const savedCartSize = cart.length;
717
const [optimisticCartSize, setOptimisticCartSize] =
718
- useOptimisticState(savedCartSize);
718
+ useOptimistic(savedCartSize);
719
720
addItemToCart = item => {
721
startTransition(async () => {
@@ -819,7 +819,7 @@ describe('ReactAsyncActions', () => {
819
});
820
821
// @gate enableAsyncActions
822
- test('useOptimisticState accepts a custom reducer', async () => {
822
+ test('useOptimistic accepts a custom reducer', async () => {
823
let serverCart = ['A'];
824
825
async function submitNewItem(item) {
@@ -835,7 +835,7 @@ describe('ReactAsyncActions', () => {
835
const [isPending, startTransition] = useTransition();
836
837
const savedCartSize = cart.length;
838
- const [optimisticCartSize, addToOptimisticCart] = useOptimisticState(
838
+ const [optimisticCartSize, addToOptimisticCart] = useOptimistic(
839
savedCartSize,
840
(prevSize, newItem) => {
841
Scheduler.log('Increment optimistic cart size for ' + newItem);
@@ -951,7 +951,7 @@ describe('ReactAsyncActions', () => {
951
});
952
953
// @gate enableAsyncActions
954
- test('useOptimisticState rebases if the passthrough is updated during a render phase update', async () => {
954
+ test('useOptimistic rebases if the passthrough is updated during a render phase update', async () => {
955
// This is kind of an esoteric case where it's hard to come up with a
956
// realistic real-world scenario but it should still work.
957
let increment;
@@ -961,7 +961,7 @@ describe('ReactAsyncActions', () => {
961
const [count, _setCount] = useState(0);
962
setCount = _setCount;
963
964
- const [optimisticCount, setOptimisticCount] = useOptimisticState(
964
+ const [optimisticCount, setOptimisticCount] = useOptimistic(
965
count,
966
prev => {
967
Scheduler.log('Increment optimistic count');
@@ -1036,12 +1036,12 @@ describe('ReactAsyncActions', () => {
1036
});
1037
1038
// @gate enableAsyncActions
1039
- test('useOptimisticState rebases if the passthrough is updated during a render phase update (initial mount)', async () => {
1039
+ test('useOptimistic rebases if the passthrough is updated during a render phase update (initial mount)', async () => {
1040
// This is kind of an esoteric case where it's hard to come up with a
1041
// realistic real-world scenario but it should still work.
1042
function App() {
1043
const [count, setCount] = useState(0);
1044
- const [optimisticCount] = useOptimisticState(count);
1044
+ const [optimisticCount] = useOptimistic(count);
1045
1046
if (count === 0) {
1047
Scheduler.log('Render phase update count from 1 to 2');
packages/react-server/src/ReactFizzHooks.js
+2
-2
@@ -557,7 +557,7 @@ function unsupportedSetOptimisticState() {
557
throw new Error('Cannot update optimistic state while rendering.');
558
}
559
560
-function useOptimisticState<S, A>(
560
+function useOptimistic<S, A>(
561
passthrough: S,
562
reducer: ?(S, A) => S,
563
): [S, (A) => void] {
@@ -665,7 +665,7 @@ if (enableFormActions && enableAsyncActions) {
665
HooksDispatcher.useHostTransitionStatus = useHostTransitionStatus;
666
}
667
if (enableAsyncActions) {
668
- HooksDispatcher.useOptimisticState = useOptimisticState;
668
+ HooksDispatcher.useOptimistic = useOptimistic;
669
}
670
671
export let currentResponseState: null | ResponseState = (null: any);
packages/react/index.classic.fb.js
+1
-1
@@ -59,7 +59,7 @@ export {
59
useMemo,
60
useMutableSource,
61
useMutableSource as unstable_useMutableSource,
62
- experimental_useOptimisticState,
62
+ experimental_useOptimistic,
63
useReducer,
64
useRef,
65
useState,
packages/react/index.experimental.js
+1
-1
@@ -49,7 +49,7 @@ export {
49
useInsertionEffect,
50
useLayoutEffect,
51
useMemo,
52
- experimental_useOptimisticState,
52
+ experimental_useOptimistic,
53
useReducer,
54
useRef,
55
useState,
packages/react/index.js
+1
-1
@@ -77,7 +77,7 @@ export {
77
useLayoutEffect,
78
useMemo,
79
useMutableSource,
80
- experimental_useOptimisticState,
80
+ experimental_useOptimistic,
81
useSyncExternalStore,
82
useReducer,
83
useRef,
packages/react/index.modern.fb.js
+1
-1
@@ -57,7 +57,7 @@ export {
57
useMemo,
58
useMutableSource,
59
useMutableSource as unstable_useMutableSource,
60
- experimental_useOptimisticState,
60
+ experimental_useOptimistic,
61
useReducer,
62
useRef,
63
useState,
packages/react/src/React.js
+2
-2
@@ -59,7 +59,7 @@ import {
59
useCacheRefresh,
60
use,
61
useMemoCache,
62
- useOptimisticState,
62
+ useOptimistic,
63
} from './ReactHooks';
64
import {
65
createElementWithValidation,
@@ -113,7 +113,7 @@ export {
113
useLayoutEffect,
114
useMemo,
115
useMutableSource,
116
- useOptimisticState as experimental_useOptimisticState,
116
+ useOptimistic as experimental_useOptimistic,
117
useSyncExternalStore,
118
useReducer,
119
useRef,
packages/react/src/ReactHooks.js
+2
-2
@@ -242,11 +242,11 @@ export function useEffectEvent<Args, F: (...Array<Args>) => mixed>(
242
return dispatcher.useEffectEvent(callback);
243
}
244
245
-export function useOptimisticState<S, A>(
245
+export function useOptimistic<S, A>(
246
passthrough: S,
247
reducer: ?(S, A) => S,
248
): [S, (A) => void] {
249
const dispatcher = resolveDispatcher();
250
// $FlowFixMe[not-a-function] This is unstable, thus optional
251
- return dispatcher.useOptimisticState(passthrough, reducer);
251
+ return dispatcher.useOptimistic(passthrough, reducer);
252
}