Skip to content

Commit b797282

Browse files
acdliteacdlite
authored
useOptimisticState -> useOptimistic (#26772)
Drop the "state". Just "useOptimistic". It's cleaner. This is still an experimental API. May not be the final name.
1 parent 388686f commit b797282

File tree

11 files changed

+65
-69
lines changed

11 files changed

+65
-69
lines changed

‎packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ let React;
2222
let ReactDOMServer;
2323
let ReactDOMClient;
2424
let useFormStatus;
25-
let useOptimisticState;
25+
let useOptimistic;
2626

2727
describe('ReactDOMFizzForm', () => {
2828
beforeEach(() => {
@@ -31,7 +31,7 @@ describe('ReactDOMFizzForm', () => {
3131
ReactDOMServer = require('react-dom/server.browser');
3232
ReactDOMClient = require('react-dom/client');
3333
useFormStatus = require('react-dom').experimental_useFormStatus;
34-
useOptimisticState = require('react').experimental_useOptimisticState;
34+
useOptimistic = require('react').experimental_useOptimistic;
3535
act = require('internal-test-utils').act;
3636
container = document.createElement('div');
3737
document.body.appendChild(container);
@@ -454,9 +454,9 @@ describe('ReactDOMFizzForm', () => {
454454
});
455455

456456
// @gate enableAsyncActions
457-
it('useOptimisticState returns passthrough value', async () => {
457+
it('useOptimistic returns passthrough value', async () => {
458458
function App() {
459-
const [optimisticState] = useOptimisticState('hi');
459+
const [optimisticState] = useOptimistic('hi');
460460
return optimisticState;
461461
}
462462

‎packages/react-reconciler/src/ReactFiberHooks.js‎

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1987,7 +1987,7 @@ function rerenderState<S>(
19871987
return rerenderReducer(basicStateReducer, initialState);
19881988
}
19891989

1990-
function mountOptimisticState<S, A>(
1990+
function mountOptimistic<S, A>(
19911991
passthrough: S,
19921992
reducer: ?(S, A) => S,
19931993
): [S, (A) => void] {
@@ -2013,7 +2013,7 @@ function mountOptimisticState<S, A>(
20132013
return [passthrough, dispatch];
20142014
}
20152015

2016-
function updateOptimisticState<S, A>(
2016+
function updateOptimistic<S, A>(
20172017
passthrough: S,
20182018
reducer: ?(S, A) => S,
20192019
): [S, (A) => void] {
@@ -2034,11 +2034,11 @@ function updateOptimisticState<S, A>(
20342034
return updateReducerImpl(hook, ((currentHook: any): Hook), resolvedReducer);
20352035
}
20362036

2037-
function rerenderOptimisticState<S, A>(
2037+
function rerenderOptimistic<S, A>(
20382038
passthrough: S,
20392039
reducer: ?(S, A) => S,
20402040
): [S, (A) => void] {
2041-
// Unlike useState, useOptimisticState doesn't support render phase updates.
2041+
// Unlike useState, useOptimistic doesn't support render phase updates.
20422042
// Also unlike useState, we need to replay all pending updates again in case
20432043
// the passthrough value changed.
20442044
//
@@ -2048,7 +2048,7 @@ function rerenderOptimisticState<S, A>(
20482048

20492049
if (currentHook !== null) {
20502050
// This is an update. Process the update queue.
2051-
return updateOptimisticState(passthrough, reducer);
2051+
return updateOptimistic(passthrough, reducer);
20522052
}
20532053

20542054
// This is a mount. No updates to process.
@@ -3207,8 +3207,7 @@ if (enableFormActions && enableAsyncActions) {
32073207
throwInvalidHookError;
32083208
}
32093209
if (enableAsyncActions) {
3210-
(ContextOnlyDispatcher: Dispatcher).useOptimisticState =
3211-
throwInvalidHookError;
3210+
(ContextOnlyDispatcher: Dispatcher).useOptimistic = throwInvalidHookError;
32123211
}
32133212

32143213
const HooksDispatcherOnMount: Dispatcher = {
@@ -3246,8 +3245,7 @@ if (enableFormActions && enableAsyncActions) {
32463245
useHostTransitionStatus;
32473246
}
32483247
if (enableAsyncActions) {
3249-
(HooksDispatcherOnMount: Dispatcher).useOptimisticState =
3250-
mountOptimisticState;
3248+
(HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic;
32513249
}
32523250

32533251
const HooksDispatcherOnUpdate: Dispatcher = {
@@ -3285,8 +3283,7 @@ if (enableFormActions && enableAsyncActions) {
32853283
useHostTransitionStatus;
32863284
}
32873285
if (enableAsyncActions) {
3288-
(HooksDispatcherOnUpdate: Dispatcher).useOptimisticState =
3289-
updateOptimisticState;
3286+
(HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic;
32903287
}
32913288

32923289
const HooksDispatcherOnRerender: Dispatcher = {
@@ -3324,8 +3321,7 @@ if (enableFormActions && enableAsyncActions) {
33243321
useHostTransitionStatus;
33253322
}
33263323
if (enableAsyncActions) {
3327-
(HooksDispatcherOnRerender: Dispatcher).useOptimisticState =
3328-
rerenderOptimisticState;
3324+
(HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic;
33293325
}
33303326

33313327
let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
@@ -3518,14 +3514,14 @@ if (__DEV__) {
35183514
useHostTransitionStatus;
35193515
}
35203516
if (enableAsyncActions) {
3521-
(HooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =
3522-
function useOptimisticState<S, A>(
3517+
(HooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =
3518+
function useOptimistic<S, A>(
35233519
passthrough: S,
35243520
reducer: ?(S, A) => S,
35253521
): [S, (A) => void] {
3526-
currentHookNameInDev = 'useOptimisticState';
3522+
currentHookNameInDev = 'useOptimistic';
35273523
mountHookTypesDev();
3528-
return mountOptimisticState(passthrough, reducer);
3524+
return mountOptimistic(passthrough, reducer);
35293525
};
35303526
}
35313527

@@ -3687,14 +3683,14 @@ if (__DEV__) {
36873683
useHostTransitionStatus;
36883684
}
36893685
if (enableAsyncActions) {
3690-
(HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimisticState =
3691-
function useOptimisticState<S, A>(
3686+
(HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimistic =
3687+
function useOptimistic<S, A>(
36923688
passthrough: S,
36933689
reducer: ?(S, A) => S,
36943690
): [S, (A) => void] {
3695-
currentHookNameInDev = 'useOptimisticState';
3691+
currentHookNameInDev = 'useOptimistic';
36963692
updateHookTypesDev();
3697-
return mountOptimisticState(passthrough, reducer);
3693+
return mountOptimistic(passthrough, reducer);
36983694
};
36993695
}
37003696

@@ -3858,14 +3854,14 @@ if (__DEV__) {
38583854
useHostTransitionStatus;
38593855
}
38603856
if (enableAsyncActions) {
3861-
(HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =
3862-
function useOptimisticState<S, A>(
3857+
(HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =
3858+
function useOptimistic<S, A>(
38633859
passthrough: S,
38643860
reducer: ?(S, A) => S,
38653861
): [S, (A) => void] {
3866-
currentHookNameInDev = 'useOptimisticState';
3862+
currentHookNameInDev = 'useOptimistic';
38673863
updateHookTypesDev();
3868-
return updateOptimisticState(passthrough, reducer);
3864+
return updateOptimistic(passthrough, reducer);
38693865
};
38703866
}
38713867

@@ -4029,14 +4025,14 @@ if (__DEV__) {
40294025
useHostTransitionStatus;
40304026
}
40314027
if (enableAsyncActions) {
4032-
(HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =
4033-
function useOptimisticState<S, A>(
4028+
(HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =
4029+
function useOptimistic<S, A>(
40344030
passthrough: S,
40354031
reducer: ?(S, A) => S,
40364032
): [S, (A) => void] {
4037-
currentHookNameInDev = 'useOptimisticState';
4033+
currentHookNameInDev = 'useOptimistic';
40384034
updateHookTypesDev();
4039-
return rerenderOptimisticState(passthrough, reducer);
4035+
return rerenderOptimistic(passthrough, reducer);
40404036
};
40414037
}
40424038

@@ -4222,15 +4218,15 @@ if (__DEV__) {
42224218
useHostTransitionStatus;
42234219
}
42244220
if (enableAsyncActions) {
4225-
(InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =
4226-
function useOptimisticState<S, A>(
4221+
(InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =
4222+
function useOptimistic<S, A>(
42274223
passthrough: S,
42284224
reducer: ?(S, A) => S,
42294225
): [S, (A) => void] {
4230-
currentHookNameInDev = 'useOptimisticState';
4226+
currentHookNameInDev = 'useOptimistic';
42314227
warnInvalidHookAccess();
42324228
mountHookTypesDev();
4233-
return mountOptimisticState(passthrough, reducer);
4229+
return mountOptimistic(passthrough, reducer);
42344230
};
42354231
}
42364232

@@ -4419,15 +4415,15 @@ if (__DEV__) {
44194415
useHostTransitionStatus;
44204416
}
44214417
if (enableAsyncActions) {
4422-
(InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =
4423-
function useOptimisticState<S, A>(
4418+
(InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =
4419+
function useOptimistic<S, A>(
44244420
passthrough: S,
44254421
reducer: ?(S, A) => S,
44264422
): [S, (A) => void] {
4427-
currentHookNameInDev = 'useOptimisticState';
4423+
currentHookNameInDev = 'useOptimistic';
44284424
warnInvalidHookAccess();
44294425
updateHookTypesDev();
4430-
return updateOptimisticState(passthrough, reducer);
4426+
return updateOptimistic(passthrough, reducer);
44314427
};
44324428
}
44334429

@@ -4616,15 +4612,15 @@ if (__DEV__) {
46164612
useHostTransitionStatus;
46174613
}
46184614
if (enableAsyncActions) {
4619-
(InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =
4620-
function useOptimisticState<S, A>(
4615+
(InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =
4616+
function useOptimistic<S, A>(
46214617
passthrough: S,
46224618
reducer: ?(S, A) => S,
46234619
): [S, (A) => void] {
4624-
currentHookNameInDev = 'useOptimisticState';
4620+
currentHookNameInDev = 'useOptimistic';
46254621
warnInvalidHookAccess();
46264622
updateHookTypesDev();
4627-
return rerenderOptimisticState(passthrough, reducer);
4623+
return rerenderOptimistic(passthrough, reducer);
46284624
};
46294625
}
46304626
}

‎packages/react-reconciler/src/ReactInternalTypes.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export type HookType =
5858
| 'useSyncExternalStore'
5959
| 'useId'
6060
| 'useCacheRefresh'
61-
| 'useOptimisticState';
61+
| 'useOptimistic';
6262

6363
export type ContextDependency<T> = {
6464
context: ReactContext<T>,
@@ -424,7 +424,7 @@ export type Dispatcher = {
424424
useCacheRefresh?: () => <T>(?() => T, ?T) => void,
425425
useMemoCache?: (size: number) => Array<any>,
426426
useHostTransitionStatus?: () => TransitionStatus,
427-
useOptimisticState?: <S, A>(
427+
useOptimistic?: <S, A>(
428428
passthrough: S,
429429
reducer: ?(S, A) => S,
430430
) => [S, (A) => void],

‎packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ let act;
55
let assertLog;
66
let useTransition;
77
let useState;
8-
let useOptimisticState;
8+
let useOptimistic;
99
let textCache;
1010

1111
describe('ReactAsyncActions', () => {
@@ -19,7 +19,7 @@ describe('ReactAsyncActions', () => {
1919
assertLog = require('internal-test-utils').assertLog;
2020
useTransition = React.useTransition;
2121
useState = React.useState;
22-
useOptimisticState = React.experimental_useOptimisticState;
22+
useOptimistic = React.experimental_useOptimistic;
2323

2424
textCache = new Map();
2525
});
@@ -648,12 +648,12 @@ describe('ReactAsyncActions', () => {
648648
});
649649

650650
// @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 () => {
652652
const startTransition = React.startTransition;
653653

654654
let setIsPending;
655655
function App({text}) {
656-
const [isPending, _setIsPending] = useOptimisticState(false);
656+
const [isPending, _setIsPending] = useOptimistic(false);
657657
setIsPending = _setIsPending;
658658
return (
659659
<>
@@ -698,7 +698,7 @@ describe('ReactAsyncActions', () => {
698698
});
699699

700700
// @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 () => {
702702
let serverCart = ['A'];
703703

704704
async function submitNewItem(item) {
@@ -715,7 +715,7 @@ describe('ReactAsyncActions', () => {
715715

716716
const savedCartSize = cart.length;
717717
const [optimisticCartSize, setOptimisticCartSize] =
718-
useOptimisticState(savedCartSize);
718+
useOptimistic(savedCartSize);
719719

720720
addItemToCart = item => {
721721
startTransition(async () => {
@@ -819,7 +819,7 @@ describe('ReactAsyncActions', () => {
819819
});
820820

821821
// @gate enableAsyncActions
822-
test('useOptimisticState accepts a custom reducer', async () => {
822+
test('useOptimistic accepts a custom reducer', async () => {
823823
let serverCart = ['A'];
824824

825825
async function submitNewItem(item) {
@@ -835,7 +835,7 @@ describe('ReactAsyncActions', () => {
835835
const [isPending, startTransition] = useTransition();
836836

837837
const savedCartSize = cart.length;
838-
const [optimisticCartSize, addToOptimisticCart] = useOptimisticState(
838+
const [optimisticCartSize, addToOptimisticCart] = useOptimistic(
839839
savedCartSize,
840840
(prevSize, newItem) => {
841841
Scheduler.log('Increment optimistic cart size for ' + newItem);
@@ -951,7 +951,7 @@ describe('ReactAsyncActions', () => {
951951
});
952952

953953
// @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 () => {
955955
// This is kind of an esoteric case where it's hard to come up with a
956956
// realistic real-world scenario but it should still work.
957957
let increment;
@@ -961,7 +961,7 @@ describe('ReactAsyncActions', () => {
961961
const [count, _setCount] = useState(0);
962962
setCount = _setCount;
963963

964-
const [optimisticCount, setOptimisticCount] = useOptimisticState(
964+
const [optimisticCount, setOptimisticCount] = useOptimistic(
965965
count,
966966
prev => {
967967
Scheduler.log('Increment optimistic count');
@@ -1036,12 +1036,12 @@ describe('ReactAsyncActions', () => {
10361036
});
10371037

10381038
// @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 () => {
10401040
// This is kind of an esoteric case where it's hard to come up with a
10411041
// realistic real-world scenario but it should still work.
10421042
function App() {
10431043
const [count, setCount] = useState(0);
1044-
const [optimisticCount] = useOptimisticState(count);
1044+
const [optimisticCount] = useOptimistic(count);
10451045

10461046
if (count === 0) {
10471047
Scheduler.log('Render phase update count from 1 to 2');

‎packages/react-server/src/ReactFizzHooks.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -557,7 +557,7 @@ function unsupportedSetOptimisticState() {
557557
throw new Error('Cannot update optimistic state while rendering.');
558558
}
559559

560-
function useOptimisticState<S, A>(
560+
function useOptimistic<S, A>(
561561
passthrough: S,
562562
reducer: ?(S, A) => S,
563563
): [S, (A) => void] {
@@ -665,7 +665,7 @@ if (enableFormActions && enableAsyncActions) {
665665
HooksDispatcher.useHostTransitionStatus = useHostTransitionStatus;
666666
}
667667
if (enableAsyncActions) {
668-
HooksDispatcher.useOptimisticState = useOptimisticState;
668+
HooksDispatcher.useOptimistic = useOptimistic;
669669
}
670670

671671
export let currentResponseState: null | ResponseState = (null: any);

‎packages/react/index.classic.fb.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export {
5959
useMemo,
6060
useMutableSource,
6161
useMutableSource as unstable_useMutableSource,
62-
experimental_useOptimisticState,
62+
experimental_useOptimistic,
6363
useReducer,
6464
useRef,
6565
useState,

0 commit comments

Comments
 (0)