Skip to content

Commit

Permalink
Remove config argument from useTransition (facebook#19719)
Browse files Browse the repository at this point in the history 
And `useDeferredValue`.

The options were already disabled in previous commits, so this doesn't
change any behavior. I upated type signatures and cleaned up the hook
implementation a bit — no longer have to wrap the `start` method with
`useCallback`, because its only remaining dependency is a `setState`
method, which never changes. Instead, we can store the `start` method
on a ref.
  • Loading branch information
@acdlite @koto
acdlite authored and koto committed Jun 15, 2021
1 parent f3ddfe3 commit 07bad98
Show file tree
Hide file tree
Showing 10 changed files with 118 additions and 223 deletions.
13 changes: 3 additions & 10 deletions packages/react-debug-tools/src/ReactDebugHooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import type {
} from 'react-reconciler/src/ReactInternalTypes';
import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';

import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberTransition';
import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';

import ErrorStackParser from 'error-stack-parser';
Expand Down Expand Up @@ -62,10 +61,6 @@ type Hook = {
next: Hook | null,
};

type TimeoutConfig = {|
timeoutMs: number,
|};

function getPrimitiveStackCache(): Map<string, Array<any>> {
// This initializes a cache of all primitive hooks so that the top
// most stack frames added by calling the primitive hook can be removed.
Expand Down Expand Up @@ -258,9 +253,7 @@ function useMutableSource<Source, Snapshot>(
return value;
}

function useTransition(
config: SuspenseConfig | null | void,
): [(() => void) => void, boolean] {
function useTransition(): [(() => void) => void, boolean] {
// useTransition() composes multiple hooks internally.
// Advance the current hook index the same number of times
// so that subsequent hooks have the right memoized state.
Expand All @@ -269,12 +262,12 @@ function useTransition(
hookLog.push({
primitive: 'Transition',
stackError: new Error(),
value: config,
value: undefined,
});
return [callback => {}, false];
}

function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
function useDeferredValue<T>(value: T): T {
// useDeferredValue() composes multiple hooks internally.
// Advance the current hook index the same number of times
// so that subsequent hooks have the right memoized state.
Expand Down
11 changes: 2 additions & 9 deletions packages/react-dom/src/server/ReactPartialRendererHooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import type {
MutableSourceSubscribeFn,
ReactContext,
} from 'shared/ReactTypes';
import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberTransition';
import type PartialRenderer from './ReactPartialRenderer';

import {validateContextBounds} from './ReactPartialRendererContext';
Expand All @@ -42,10 +41,6 @@ type Hook = {|
next: Hook | null,
|};

type TimeoutConfig = {|
timeoutMs: number,
|};

type OpaqueIDType = string;

let currentlyRenderingComponent: Object | null = null;
Expand Down Expand Up @@ -468,14 +463,12 @@ function useMutableSource<Source, Snapshot>(
return getSnapshot(source._source);
}

function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
function useDeferredValue<T>(value: T): T {
resolveCurrentlyRenderingComponent();
return value;
}

function useTransition(
config: SuspenseConfig | null | void,
): [(callback: () => void) => void, boolean] {
function useTransition(): [(callback: () => void) => void, boolean] {
resolveCurrentlyRenderingComponent();
const startTransition = callback => {
callback();
Expand Down
138 changes: 51 additions & 87 deletions packages/react-reconciler/src/ReactFiberHooks.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import type {
import type {Fiber, Dispatcher} from './ReactInternalTypes';
import type {Lanes, Lane} from './ReactFiberLane';
import type {HookEffectTag} from './ReactHookEffectTags';
import type {SuspenseConfig} from './ReactFiberTransition';
import type {ReactPriorityLevel} from './ReactInternalTypes';
import type {FiberRoot} from './ReactInternalTypes';
import type {OpaqueIDType} from './ReactFiberHostConfig';
Expand Down Expand Up @@ -151,10 +150,6 @@ export type Effect = {|

export type FunctionComponentUpdateQueue = {|lastEffect: Effect | null|};

type TimeoutConfig = {|
timeoutMs: number,
|};

type BasicStateAction<S> = (S => S) | S;

type Dispatch<A> = A => void;
Expand Down Expand Up @@ -1432,10 +1427,7 @@ function updateMemo<T>(
return nextValue;
}

function mountDeferredValue<T>(
value: T,
config: TimeoutConfig | void | null,
): T {
function mountDeferredValue<T>(value: T): T {
const [prevValue, setValue] = mountState(value);
mountEffect(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
Expand All @@ -1445,14 +1437,11 @@ function mountDeferredValue<T>(
} finally {
ReactCurrentBatchConfig.transition = prevTransition;
}
}, [value, config]);
}, [value]);
return prevValue;
}

function updateDeferredValue<T>(
value: T,
config: TimeoutConfig | void | null,
): T {
function updateDeferredValue<T>(value: T): T {
const [prevValue, setValue] = updateState(value);
updateEffect(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
Expand All @@ -1462,14 +1451,11 @@ function updateDeferredValue<T>(
} finally {
ReactCurrentBatchConfig.transition = prevTransition;
}
}, [value, config]);
}, [value]);
return prevValue;
}

function rerenderDeferredValue<T>(
value: T,
config: TimeoutConfig | void | null,
): T {
function rerenderDeferredValue<T>(value: T): T {
const [prevValue, setValue] = rerenderState(value);
updateEffect(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
Expand All @@ -1479,11 +1465,11 @@ function rerenderDeferredValue<T>(
} finally {
ReactCurrentBatchConfig.transition = prevTransition;
}
}, [value, config]);
}, [value]);
return prevValue;
}

function startTransition(setPending, config, callback) {
function startTransition(setPending, callback) {
const priorityLevel = getCurrentPriorityLevel();
if (decoupleUpdatePriorityFromScheduler) {
const previousLanePriority = getCurrentUpdateLanePriority();
Expand All @@ -1500,7 +1486,9 @@ function startTransition(setPending, config, callback) {
},
);

// If there's no SuspenseConfig set, we'll use the DefaultLanePriority for this transition.
// TODO: Can remove this. Was only necessary because we used to give
// different behavior to transitions without a config object. Now they are
// all treated the same.
setCurrentUpdateLanePriority(DefaultLanePriority);

runWithPriority(
Expand Down Expand Up @@ -1545,36 +1533,26 @@ function startTransition(setPending, config, callback) {
}
}

function mountTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
function mountTransition(): [(() => void) => void, boolean] {
const [isPending, setPending] = mountState(false);
const start = mountCallback(startTransition.bind(null, setPending, config), [
setPending,
config,
]);
// The `start` method can be stored on a ref, since `setPending`
// never changes.
const start = startTransition.bind(null, setPending);
mountRef(start);
return [start, isPending];
}

function updateTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
const [isPending, setPending] = updateState(false);
const start = updateCallback(startTransition.bind(null, setPending, config), [
setPending,
config,
]);
function updateTransition(): [(() => void) => void, boolean] {
const [isPending] = updateState(false);
const startRef = updateRef();
const start: (() => void) => void = (startRef.current: any);
return [start, isPending];
}

function rerenderTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
const [isPending, setPending] = rerenderState(false);
const start = updateCallback(startTransition.bind(null, setPending, config), [
setPending,
config,
]);
function rerenderTransition(): [(() => void) => void, boolean] {
const [isPending] = rerenderState(false);
const startRef = updateRef();
const start: (() => void) => void = (startRef.current: any);
return [start, isPending];
}

Expand Down Expand Up @@ -1986,17 +1964,15 @@ if (__DEV__) {
mountHookTypesDev();
return mountDebugValue(value, formatterFn);
},
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
useDeferredValue<T>(value: T): T {
currentHookNameInDev = 'useDeferredValue';
mountHookTypesDev();
return mountDeferredValue(value, config);
return mountDeferredValue(value);
},
useTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
useTransition(): [(() => void) => void, boolean] {
currentHookNameInDev = 'useTransition';
mountHookTypesDev();
return mountTransition(config);
return mountTransition();
},
useMutableSource<Source, Snapshot>(
source: MutableSource<Source>,
Expand Down Expand Up @@ -2110,17 +2086,15 @@ if (__DEV__) {
updateHookTypesDev();
return mountDebugValue(value, formatterFn);
},
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
useDeferredValue<T>(value: T): T {
currentHookNameInDev = 'useDeferredValue';
updateHookTypesDev();
return mountDeferredValue(value, config);
return mountDeferredValue(value);
},
useTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
useTransition(): [(() => void) => void, boolean] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return mountTransition(config);
return mountTransition();
},
useMutableSource<Source, Snapshot>(
source: MutableSource<Source>,
Expand Down Expand Up @@ -2234,17 +2208,15 @@ if (__DEV__) {
updateHookTypesDev();
return updateDebugValue(value, formatterFn);
},
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
useDeferredValue<T>(value: T): T {
currentHookNameInDev = 'useDeferredValue';
updateHookTypesDev();
return updateDeferredValue(value, config);
return updateDeferredValue(value);
},
useTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
useTransition(): [(() => void) => void, boolean] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return updateTransition(config);
return updateTransition();
},
useMutableSource<Source, Snapshot>(
source: MutableSource<Source>,
Expand Down Expand Up @@ -2359,17 +2331,15 @@ if (__DEV__) {
updateHookTypesDev();
return updateDebugValue(value, formatterFn);
},
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
useDeferredValue<T>(value: T): T {
currentHookNameInDev = 'useDeferredValue';
updateHookTypesDev();
return rerenderDeferredValue(value, config);
return rerenderDeferredValue(value);
},
useTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
useTransition(): [(() => void) => void, boolean] {
currentHookNameInDev = 'useTransition';
updateHookTypesDev();
return rerenderTransition(config);
return rerenderTransition();
},
useMutableSource<Source, Snapshot>(
source: MutableSource<Source>,
Expand Down Expand Up @@ -2494,19 +2464,17 @@ if (__DEV__) {
mountHookTypesDev();
return mountDebugValue(value, formatterFn);
},
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
useDeferredValue<T>(value: T): T {
currentHookNameInDev = 'useDeferredValue';
warnInvalidHookAccess();
mountHookTypesDev();
return mountDeferredValue(value, config);
return mountDeferredValue(value);
},
useTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
useTransition(): [(() => void) => void, boolean] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
mountHookTypesDev();
return mountTransition(config);
return mountTransition();
},
useMutableSource<Source, Snapshot>(
source: MutableSource<Source>,
Expand Down Expand Up @@ -2633,19 +2601,17 @@ if (__DEV__) {
updateHookTypesDev();
return updateDebugValue(value, formatterFn);
},
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
useDeferredValue<T>(value: T): T {
currentHookNameInDev = 'useDeferredValue';
warnInvalidHookAccess();
updateHookTypesDev();
return updateDeferredValue(value, config);
return updateDeferredValue(value);
},
useTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
useTransition(): [(() => void) => void, boolean] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
updateHookTypesDev();
return updateTransition(config);
return updateTransition();
},
useMutableSource<Source, Snapshot>(
source: MutableSource<Source>,
Expand Down Expand Up @@ -2773,19 +2739,17 @@ if (__DEV__) {
updateHookTypesDev();
return updateDebugValue(value, formatterFn);
},
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
useDeferredValue<T>(value: T): T {
currentHookNameInDev = 'useDeferredValue';
warnInvalidHookAccess();
updateHookTypesDev();
return rerenderDeferredValue(value, config);
return rerenderDeferredValue(value);
},
useTransition(
config: SuspenseConfig | void | null,
): [(() => void) => void, boolean] {
useTransition(): [(() => void) => void, boolean] {
currentHookNameInDev = 'useTransition';
warnInvalidHookAccess();
updateHookTypesDev();
return rerenderTransition(config);
return rerenderTransition();
},
useMutableSource<Source, Snapshot>(
source: MutableSource<Source>,
Expand Down
Loading

0 comments on commit 07bad98

Please sign in to comment.