Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useOptimisticState -> useOptimistic #26772

Merged
merged 1 commit into from
May 3, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ let React;
let ReactDOMServer;
let ReactDOMClient;
let useFormStatus;
let useOptimisticState;
let useOptimistic;

describe('ReactDOMFizzForm', () => {
beforeEach(() => {
Expand All @@ -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);
Expand Down Expand Up @@ -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;
}

Expand Down
78 changes: 37 additions & 41 deletions packages/react-reconciler/src/ReactFiberHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -1987,7 +1987,7 @@ function rerenderState<S>(
return rerenderReducer(basicStateReducer, initialState);
}

function mountOptimisticState<S, A>(
function mountOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
Expand All @@ -2013,7 +2013,7 @@ function mountOptimisticState<S, A>(
return [passthrough, dispatch];
}

function updateOptimisticState<S, A>(
function updateOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
Expand All @@ -2034,11 +2034,11 @@ function updateOptimisticState<S, A>(
return updateReducerImpl(hook, ((currentHook: any): Hook), resolvedReducer);
}

function rerenderOptimisticState<S, A>(
function rerenderOptimistic<S, A>(
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.
//
Expand All @@ -2048,7 +2048,7 @@ function rerenderOptimisticState<S, A>(

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.
Expand Down Expand Up @@ -3207,8 +3207,7 @@ if (enableFormActions && enableAsyncActions) {
throwInvalidHookError;
}
if (enableAsyncActions) {
(ContextOnlyDispatcher: Dispatcher).useOptimisticState =
throwInvalidHookError;
(ContextOnlyDispatcher: Dispatcher).useOptimistic = throwInvalidHookError;
}

const HooksDispatcherOnMount: Dispatcher = {
Expand Down Expand Up @@ -3246,8 +3245,7 @@ if (enableFormActions && enableAsyncActions) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(HooksDispatcherOnMount: Dispatcher).useOptimisticState =
mountOptimisticState;
(HooksDispatcherOnMount: Dispatcher).useOptimistic = mountOptimistic;
}

const HooksDispatcherOnUpdate: Dispatcher = {
Expand Down Expand Up @@ -3285,8 +3283,7 @@ if (enableFormActions && enableAsyncActions) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(HooksDispatcherOnUpdate: Dispatcher).useOptimisticState =
updateOptimisticState;
(HooksDispatcherOnUpdate: Dispatcher).useOptimistic = updateOptimistic;
}

const HooksDispatcherOnRerender: Dispatcher = {
Expand Down Expand Up @@ -3324,8 +3321,7 @@ if (enableFormActions && enableAsyncActions) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(HooksDispatcherOnRerender: Dispatcher).useOptimisticState =
rerenderOptimisticState;
(HooksDispatcherOnRerender: Dispatcher).useOptimistic = rerenderOptimistic;
}

let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
Expand Down Expand Up @@ -3518,14 +3514,14 @@ if (__DEV__) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(HooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =
function useOptimisticState<S, A>(
(HooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =
function useOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
currentHookNameInDev = 'useOptimisticState';
currentHookNameInDev = 'useOptimistic';
mountHookTypesDev();
return mountOptimisticState(passthrough, reducer);
return mountOptimistic(passthrough, reducer);
};
}

Expand Down Expand Up @@ -3687,14 +3683,14 @@ if (__DEV__) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimisticState =
function useOptimisticState<S, A>(
(HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useOptimistic =
function useOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
currentHookNameInDev = 'useOptimisticState';
currentHookNameInDev = 'useOptimistic';
updateHookTypesDev();
return mountOptimisticState(passthrough, reducer);
return mountOptimistic(passthrough, reducer);
};
}

Expand Down Expand Up @@ -3858,14 +3854,14 @@ if (__DEV__) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =
function useOptimisticState<S, A>(
(HooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =
function useOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
currentHookNameInDev = 'useOptimisticState';
currentHookNameInDev = 'useOptimistic';
updateHookTypesDev();
return updateOptimisticState(passthrough, reducer);
return updateOptimistic(passthrough, reducer);
};
}

Expand Down Expand Up @@ -4029,14 +4025,14 @@ if (__DEV__) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =
function useOptimisticState<S, A>(
(HooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =
function useOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
currentHookNameInDev = 'useOptimisticState';
currentHookNameInDev = 'useOptimistic';
updateHookTypesDev();
return rerenderOptimisticState(passthrough, reducer);
return rerenderOptimistic(passthrough, reducer);
};
}

Expand Down Expand Up @@ -4222,15 +4218,15 @@ if (__DEV__) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimisticState =
function useOptimisticState<S, A>(
(InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useOptimistic =
function useOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
currentHookNameInDev = 'useOptimisticState';
currentHookNameInDev = 'useOptimistic';
warnInvalidHookAccess();
mountHookTypesDev();
return mountOptimisticState(passthrough, reducer);
return mountOptimistic(passthrough, reducer);
};
}

Expand Down Expand Up @@ -4419,15 +4415,15 @@ if (__DEV__) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimisticState =
function useOptimisticState<S, A>(
(InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useOptimistic =
function useOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
currentHookNameInDev = 'useOptimisticState';
currentHookNameInDev = 'useOptimistic';
warnInvalidHookAccess();
updateHookTypesDev();
return updateOptimisticState(passthrough, reducer);
return updateOptimistic(passthrough, reducer);
};
}

Expand Down Expand Up @@ -4616,15 +4612,15 @@ if (__DEV__) {
useHostTransitionStatus;
}
if (enableAsyncActions) {
(InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimisticState =
function useOptimisticState<S, A>(
(InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useOptimistic =
function useOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
currentHookNameInDev = 'useOptimisticState';
currentHookNameInDev = 'useOptimistic';
warnInvalidHookAccess();
updateHookTypesDev();
return rerenderOptimisticState(passthrough, reducer);
return rerenderOptimistic(passthrough, reducer);
};
}
}
4 changes: 2 additions & 2 deletions packages/react-reconciler/src/ReactInternalTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export type HookType =
| 'useSyncExternalStore'
| 'useId'
| 'useCacheRefresh'
| 'useOptimisticState';
| 'useOptimistic';

export type ContextDependency<T> = {
context: ReactContext<T>,
Expand Down Expand Up @@ -424,7 +424,7 @@ export type Dispatcher = {
useCacheRefresh?: () => <T>(?() => T, ?T) => void,
useMemoCache?: (size: number) => Array<any>,
useHostTransitionStatus?: () => TransitionStatus,
useOptimisticState?: <S, A>(
useOptimistic?: <S, A>(
passthrough: S,
reducer: ?(S, A) => S,
) => [S, (A) => void],
Expand Down
24 changes: 12 additions & 12 deletions packages/react-reconciler/src/__tests__/ReactAsyncActions-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ let act;
let assertLog;
let useTransition;
let useState;
let useOptimisticState;
let useOptimistic;
let textCache;

describe('ReactAsyncActions', () => {
Expand All @@ -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();
});
Expand Down Expand Up @@ -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 (
<>
Expand Down Expand Up @@ -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) {
Expand All @@ -715,7 +715,7 @@ describe('ReactAsyncActions', () => {

const savedCartSize = cart.length;
const [optimisticCartSize, setOptimisticCartSize] =
useOptimisticState(savedCartSize);
useOptimistic(savedCartSize);

addItemToCart = item => {
startTransition(async () => {
Expand Down Expand Up @@ -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) {
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand Down
4 changes: 2 additions & 2 deletions packages/react-server/src/ReactFizzHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -557,7 +557,7 @@ function unsupportedSetOptimisticState() {
throw new Error('Cannot update optimistic state while rendering.');
}

function useOptimisticState<S, A>(
function useOptimistic<S, A>(
passthrough: S,
reducer: ?(S, A) => S,
): [S, (A) => void] {
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/react/index.classic.fb.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export {
useMemo,
useMutableSource,
useMutableSource as unstable_useMutableSource,
experimental_useOptimisticState,
experimental_useOptimistic,
useReducer,
useRef,
useState,
Expand Down
Loading