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.

Sign up for GitHub

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

Jump to bottom

Remove config argument from useTransition #19719

Merged
merged 1 commit into from
Aug 28, 2020
Merged

Remove config argument from useTransition #19719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 3 additions & 10 deletions packages/react-debug-tools/src/ReactDebugHooks.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This reminds me, should we update the hooks lint to not require passing startTransition to the dependencies?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#19720

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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any downside to calling this startTransition?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's already a startTransition in this module, would have to rename that one to like startTransitionImpl or something.

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