Skip to content

Commit ddd1faa

Browse files
acdliteacdlite
authored
Remove config argument from useTransition (#19719)
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.
1 parent 92fcd46 commit ddd1faa

File tree

10 files changed

+118
-223
lines changed

10 files changed

+118
-223
lines changed

‎packages/react-debug-tools/src/ReactDebugHooks.js‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import type {
2020
} from 'react-reconciler/src/ReactInternalTypes';
2121
import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
2222

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

2625
import ErrorStackParser from 'error-stack-parser';
@@ -62,10 +61,6 @@ type Hook = {
6261
next: Hook | null,
6362
};
6463

65-
type TimeoutConfig = {|
66-
timeoutMs: number,
67-
|};
68-
6964
function getPrimitiveStackCache(): Map<string, Array<any>> {
7065
// This initializes a cache of all primitive hooks so that the top
7166
// most stack frames added by calling the primitive hook can be removed.
@@ -258,9 +253,7 @@ function useMutableSource<Source, Snapshot>(
258253
return value;
259254
}
260255

261-
function useTransition(
262-
config: SuspenseConfig | null | void,
263-
): [(() => void) => void, boolean] {
256+
function useTransition(): [(() => void) => void, boolean] {
264257
// useTransition() composes multiple hooks internally.
265258
// Advance the current hook index the same number of times
266259
// so that subsequent hooks have the right memoized state.
@@ -269,12 +262,12 @@ function useTransition(
269262
hookLog.push({
270263
primitive: 'Transition',
271264
stackError: new Error(),
272-
value: config,
265+
value: undefined,
273266
});
274267
return [callback => {}, false];
275268
}
276269

277-
function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
270+
function useDeferredValue<T>(value: T): T {
278271
// useDeferredValue() composes multiple hooks internally.
279272
// Advance the current hook index the same number of times
280273
// so that subsequent hooks have the right memoized state.

‎packages/react-dom/src/server/ReactPartialRendererHooks.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import type {
1515
MutableSourceSubscribeFn,
1616
ReactContext,
1717
} from 'shared/ReactTypes';
18-
import type {SuspenseConfig} from 'react-reconciler/src/ReactFiberTransition';
1918
import type PartialRenderer from './ReactPartialRenderer';
2019

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

45-
type TimeoutConfig = {|
46-
timeoutMs: number,
47-
|};
48-
4944
type OpaqueIDType = string;
5045

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

471-
function useDeferredValue<T>(value: T, config: TimeoutConfig | null | void): T {
466+
function useDeferredValue<T>(value: T): T {
472467
resolveCurrentlyRenderingComponent();
473468
return value;
474469
}
475470

476-
function useTransition(
477-
config: SuspenseConfig | null | void,
478-
): [(callback: () => void) => void, boolean] {
471+
function useTransition(): [(callback: () => void) => void, boolean] {
479472
resolveCurrentlyRenderingComponent();
480473
const startTransition = callback => {
481474
callback();

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

Lines changed: 51 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import type {
1616
import type {Fiber, Dispatcher} from './ReactInternalTypes';
1717
import type {Lanes, Lane} from './ReactFiberLane';
1818
import type {HookEffectTag} from './ReactHookEffectTags';
19-
import type {SuspenseConfig} from './ReactFiberTransition';
2019
import type {ReactPriorityLevel} from './ReactInternalTypes';
2120
import type {FiberRoot} from './ReactInternalTypes';
2221
import type {OpaqueIDType} from './ReactFiberHostConfig';
@@ -151,10 +150,6 @@ export type Effect = {|
151150

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

154-
type TimeoutConfig = {|
155-
timeoutMs: number,
156-
|};
157-
158153
type BasicStateAction<S> = (S => S) | S;
159154

160155
type Dispatch<A> = A => void;
@@ -1432,10 +1427,7 @@ function updateMemo<T>(
14321427
return nextValue;
14331428
}
14341429

1435-
function mountDeferredValue<T>(
1436-
value: T,
1437-
config: TimeoutConfig | void | null,
1438-
): T {
1430+
function mountDeferredValue<T>(value: T): T {
14391431
const [prevValue, setValue] = mountState(value);
14401432
mountEffect(() => {
14411433
const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1445,14 +1437,11 @@ function mountDeferredValue<T>(
14451437
} finally {
14461438
ReactCurrentBatchConfig.transition = prevTransition;
14471439
}
1448-
}, [value, config]);
1440+
}, [value]);
14491441
return prevValue;
14501442
}
14511443

1452-
function updateDeferredValue<T>(
1453-
value: T,
1454-
config: TimeoutConfig | void | null,
1455-
): T {
1444+
function updateDeferredValue<T>(value: T): T {
14561445
const [prevValue, setValue] = updateState(value);
14571446
updateEffect(() => {
14581447
const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1462,14 +1451,11 @@ function updateDeferredValue<T>(
14621451
} finally {
14631452
ReactCurrentBatchConfig.transition = prevTransition;
14641453
}
1465-
}, [value, config]);
1454+
}, [value]);
14661455
return prevValue;
14671456
}
14681457

1469-
function rerenderDeferredValue<T>(
1470-
value: T,
1471-
config: TimeoutConfig | void | null,
1472-
): T {
1458+
function rerenderDeferredValue<T>(value: T): T {
14731459
const [prevValue, setValue] = rerenderState(value);
14741460
updateEffect(() => {
14751461
const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1479,11 +1465,11 @@ function rerenderDeferredValue<T>(
14791465
} finally {
14801466
ReactCurrentBatchConfig.transition = prevTransition;
14811467
}
1482-
}, [value, config]);
1468+
}, [value]);
14831469
return prevValue;
14841470
}
14851471

1486-
function startTransition(setPending, config, callback) {
1472+
function startTransition(setPending, callback) {
14871473
const priorityLevel = getCurrentPriorityLevel();
14881474
if (decoupleUpdatePriorityFromScheduler) {
14891475
const previousLanePriority = getCurrentUpdateLanePriority();
@@ -1500,7 +1486,9 @@ function startTransition(setPending, config, callback) {
15001486
},
15011487
);
15021488

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

15061494
runWithPriority(
@@ -1545,36 +1533,26 @@ function startTransition(setPending, config, callback) {
15451533
}
15461534
}
15471535

1548-
function mountTransition(
1549-
config: SuspenseConfig | void | null,
1550-
): [(() => void) => void, boolean] {
1536+
function mountTransition(): [(() => void) => void, boolean] {
15511537
const [isPending, setPending] = mountState(false);
1552-
const start = mountCallback(startTransition.bind(null, setPending, config), [
1553-
setPending,
1554-
config,
1555-
]);
1538+
// The `start` method can be stored on a ref, since `setPending`
1539+
// never changes.
1540+
const start = startTransition.bind(null, setPending);
1541+
mountRef(start);
15561542
return [start, isPending];
15571543
}
15581544

1559-
function updateTransition(
1560-
config: SuspenseConfig | void | null,
1561-
): [(() => void) => void, boolean] {
1562-
const [isPending, setPending] = updateState(false);
1563-
const start = updateCallback(startTransition.bind(null, setPending, config), [
1564-
setPending,
1565-
config,
1566-
]);
1545+
function updateTransition(): [(() => void) => void, boolean] {
1546+
const [isPending] = updateState(false);
1547+
const startRef = updateRef();
1548+
const start: (() => void) => void = (startRef.current: any);
15671549
return [start, isPending];
15681550
}
15691551

1570-
function rerenderTransition(
1571-
config: SuspenseConfig | void | null,
1572-
): [(() => void) => void, boolean] {
1573-
const [isPending, setPending] = rerenderState(false);
1574-
const start = updateCallback(startTransition.bind(null, setPending, config), [
1575-
setPending,
1576-
config,
1577-
]);
1552+
function rerenderTransition(): [(() => void) => void, boolean] {
1553+
const [isPending] = rerenderState(false);
1554+
const startRef = updateRef();
1555+
const start: (() => void) => void = (startRef.current: any);
15781556
return [start, isPending];
15791557
}
15801558

@@ -1986,17 +1964,15 @@ if (__DEV__) {
19861964
mountHookTypesDev();
19871965
return mountDebugValue(value, formatterFn);
19881966
},
1989-
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
1967+
useDeferredValue<T>(value: T): T {
19901968
currentHookNameInDev = 'useDeferredValue';
19911969
mountHookTypesDev();
1992-
return mountDeferredValue(value, config);
1970+
return mountDeferredValue(value);
19931971
},
1994-
useTransition(
1995-
config: SuspenseConfig | void | null,
1996-
): [(() => void) => void, boolean] {
1972+
useTransition(): [(() => void) => void, boolean] {
19971973
currentHookNameInDev = 'useTransition';
19981974
mountHookTypesDev();
1999-
return mountTransition(config);
1975+
return mountTransition();
20001976
},
20011977
useMutableSource<Source, Snapshot>(
20021978
source: MutableSource<Source>,
@@ -2110,17 +2086,15 @@ if (__DEV__) {
21102086
updateHookTypesDev();
21112087
return mountDebugValue(value, formatterFn);
21122088
},
2113-
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
2089+
useDeferredValue<T>(value: T): T {
21142090
currentHookNameInDev = 'useDeferredValue';
21152091
updateHookTypesDev();
2116-
return mountDeferredValue(value, config);
2092+
return mountDeferredValue(value);
21172093
},
2118-
useTransition(
2119-
config: SuspenseConfig | void | null,
2120-
): [(() => void) => void, boolean] {
2094+
useTransition(): [(() => void) => void, boolean] {
21212095
currentHookNameInDev = 'useTransition';
21222096
updateHookTypesDev();
2123-
return mountTransition(config);
2097+
return mountTransition();
21242098
},
21252099
useMutableSource<Source, Snapshot>(
21262100
source: MutableSource<Source>,
@@ -2234,17 +2208,15 @@ if (__DEV__) {
22342208
updateHookTypesDev();
22352209
return updateDebugValue(value, formatterFn);
22362210
},
2237-
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
2211+
useDeferredValue<T>(value: T): T {
22382212
currentHookNameInDev = 'useDeferredValue';
22392213
updateHookTypesDev();
2240-
return updateDeferredValue(value, config);
2214+
return updateDeferredValue(value);
22412215
},
2242-
useTransition(
2243-
config: SuspenseConfig | void | null,
2244-
): [(() => void) => void, boolean] {
2216+
useTransition(): [(() => void) => void, boolean] {
22452217
currentHookNameInDev = 'useTransition';
22462218
updateHookTypesDev();
2247-
return updateTransition(config);
2219+
return updateTransition();
22482220
},
22492221
useMutableSource<Source, Snapshot>(
22502222
source: MutableSource<Source>,
@@ -2359,17 +2331,15 @@ if (__DEV__) {
23592331
updateHookTypesDev();
23602332
return updateDebugValue(value, formatterFn);
23612333
},
2362-
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
2334+
useDeferredValue<T>(value: T): T {
23632335
currentHookNameInDev = 'useDeferredValue';
23642336
updateHookTypesDev();
2365-
return rerenderDeferredValue(value, config);
2337+
return rerenderDeferredValue(value);
23662338
},
2367-
useTransition(
2368-
config: SuspenseConfig | void | null,
2369-
): [(() => void) => void, boolean] {
2339+
useTransition(): [(() => void) => void, boolean] {
23702340
currentHookNameInDev = 'useTransition';
23712341
updateHookTypesDev();
2372-
return rerenderTransition(config);
2342+
return rerenderTransition();
23732343
},
23742344
useMutableSource<Source, Snapshot>(
23752345
source: MutableSource<Source>,
@@ -2494,19 +2464,17 @@ if (__DEV__) {
24942464
mountHookTypesDev();
24952465
return mountDebugValue(value, formatterFn);
24962466
},
2497-
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
2467+
useDeferredValue<T>(value: T): T {
24982468
currentHookNameInDev = 'useDeferredValue';
24992469
warnInvalidHookAccess();
25002470
mountHookTypesDev();
2501-
return mountDeferredValue(value, config);
2471+
return mountDeferredValue(value);
25022472
},
2503-
useTransition(
2504-
config: SuspenseConfig | void | null,
2505-
): [(() => void) => void, boolean] {
2473+
useTransition(): [(() => void) => void, boolean] {
25062474
currentHookNameInDev = 'useTransition';
25072475
warnInvalidHookAccess();
25082476
mountHookTypesDev();
2509-
return mountTransition(config);
2477+
return mountTransition();
25102478
},
25112479
useMutableSource<Source, Snapshot>(
25122480
source: MutableSource<Source>,
@@ -2633,19 +2601,17 @@ if (__DEV__) {
26332601
updateHookTypesDev();
26342602
return updateDebugValue(value, formatterFn);
26352603
},
2636-
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
2604+
useDeferredValue<T>(value: T): T {
26372605
currentHookNameInDev = 'useDeferredValue';
26382606
warnInvalidHookAccess();
26392607
updateHookTypesDev();
2640-
return updateDeferredValue(value, config);
2608+
return updateDeferredValue(value);
26412609
},
2642-
useTransition(
2643-
config: SuspenseConfig | void | null,
2644-
): [(() => void) => void, boolean] {
2610+
useTransition(): [(() => void) => void, boolean] {
26452611
currentHookNameInDev = 'useTransition';
26462612
warnInvalidHookAccess();
26472613
updateHookTypesDev();
2648-
return updateTransition(config);
2614+
return updateTransition();
26492615
},
26502616
useMutableSource<Source, Snapshot>(
26512617
source: MutableSource<Source>,
@@ -2773,19 +2739,17 @@ if (__DEV__) {
27732739
updateHookTypesDev();
27742740
return updateDebugValue(value, formatterFn);
27752741
},
2776-
useDeferredValue<T>(value: T, config: TimeoutConfig | void | null): T {
2742+
useDeferredValue<T>(value: T): T {
27772743
currentHookNameInDev = 'useDeferredValue';
27782744
warnInvalidHookAccess();
27792745
updateHookTypesDev();
2780-
return rerenderDeferredValue(value, config);
2746+
return rerenderDeferredValue(value);
27812747
},
2782-
useTransition(
2783-
config: SuspenseConfig | void | null,
2784-
): [(() => void) => void, boolean] {
2748+
useTransition(): [(() => void) => void, boolean] {
27852749
currentHookNameInDev = 'useTransition';
27862750
warnInvalidHookAccess();
27872751
updateHookTypesDev();
2788-
return rerenderTransition(config);
2752+
return rerenderTransition();
27892753
},
27902754
useMutableSource<Source, Snapshot>(
27912755
source: MutableSource<Source>,

0 commit comments

Comments
 (0)