Skip to content

Commit fa77f52

Browse files
acdliteacdlite
committed
Unify promise switch statements
There are two different switch statements that we use to unwrap a `use`-ed promise, but there really only needs to be one. This was a factoring artifact that arose because I implemented the yieldy `status` instrumentation thing before I implemented `use` (for promises that are thrown directly during render, which is the old Suspense pattern that will be superseded by `use`).
1 parent 7572e49 commit fa77f52

File tree

8 files changed

+222
-407
lines changed

8 files changed

+222
-407
lines changed

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

Lines changed: 1 addition & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,6 @@ import {now} from './Scheduler';
137137
import {
138138
prepareThenableState,
139139
trackUsedThenable,
140-
getPreviouslyUsedThenableAtIndex,
141140
} from './ReactFiberThenable.new';
142141

143142
const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@@ -776,8 +775,6 @@ if (enableUseMemoCacheHook) {
776775
};
777776
}
778777

779-
function noop(): void {}
780-
781778
function use<T>(usable: Usable<T>): T {
782779
if (usable !== null && typeof usable === 'object') {
783780
// $FlowFixMe[method-unbinding]
@@ -788,59 +785,7 @@ function use<T>(usable: Usable<T>): T {
788785
// Track the position of the thenable within this fiber.
789786
const index = thenableIndexCounter;
790787
thenableIndexCounter += 1;
791-
792-
// TODO: Unify this switch statement with the one in trackUsedThenable.
793-
switch (thenable.status) {
794-
case 'fulfilled': {
795-
const fulfilledValue: T = thenable.value;
796-
return fulfilledValue;
797-
}
798-
case 'rejected': {
799-
const rejectedError = thenable.reason;
800-
throw rejectedError;
801-
}
802-
default: {
803-
const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
804-
index,
805-
);
806-
if (prevThenableAtIndex !== null) {
807-
if (thenable !== prevThenableAtIndex) {
808-
// Avoid an unhandled rejection errors for the Promises that we'll
809-
// intentionally ignore.
810-
thenable.then(noop, noop);
811-
}
812-
switch (prevThenableAtIndex.status) {
813-
case 'fulfilled': {
814-
const fulfilledValue: T = prevThenableAtIndex.value;
815-
return fulfilledValue;
816-
}
817-
case 'rejected': {
818-
const rejectedError: mixed = prevThenableAtIndex.reason;
819-
throw rejectedError;
820-
}
821-
default: {
822-
// The thenable still hasn't resolved. Suspend with the same
823-
// thenable as last time to avoid redundant listeners.
824-
throw prevThenableAtIndex;
825-
}
826-
}
827-
} else {
828-
// This is the first time something has been used at this index.
829-
// Stash the thenable at the current index so we can reuse it during
830-
// the next attempt.
831-
trackUsedThenable(thenable, index);
832-
833-
// Suspend.
834-
// TODO: Throwing here is an implementation detail that allows us to
835-
// unwind the call stack. But we shouldn't allow it to leak into
836-
// userspace. Throw an opaque placeholder value instead of the
837-
// actual thenable. If it doesn't get captured by the work loop, log
838-
// a warning, because that means something in userspace must have
839-
// caught it.
840-
throw thenable;
841-
}
842-
}
843-
}
788+
return trackUsedThenable(thenable, index);
844789
} else if (
845790
usable.$$typeof === REACT_CONTEXT_TYPE ||
846791
usable.$$typeof === REACT_SERVER_CONTEXT_TYPE

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

Lines changed: 1 addition & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,6 @@ import {now} from './Scheduler';
137137
import {
138138
prepareThenableState,
139139
trackUsedThenable,
140-
getPreviouslyUsedThenableAtIndex,
141140
} from './ReactFiberThenable.old';
142141

143142
const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@@ -776,8 +775,6 @@ if (enableUseMemoCacheHook) {
776775
};
777776
}
778777

779-
function noop(): void {}
780-
781778
function use<T>(usable: Usable<T>): T {
782779
if (usable !== null && typeof usable === 'object') {
783780
// $FlowFixMe[method-unbinding]
@@ -788,59 +785,7 @@ function use<T>(usable: Usable<T>): T {
788785
// Track the position of the thenable within this fiber.
789786
const index = thenableIndexCounter;
790787
thenableIndexCounter += 1;
791-
792-
// TODO: Unify this switch statement with the one in trackUsedThenable.
793-
switch (thenable.status) {
794-
case 'fulfilled': {
795-
const fulfilledValue: T = thenable.value;
796-
return fulfilledValue;
797-
}
798-
case 'rejected': {
799-
const rejectedError = thenable.reason;
800-
throw rejectedError;
801-
}
802-
default: {
803-
const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
804-
index,
805-
);
806-
if (prevThenableAtIndex !== null) {
807-
if (thenable !== prevThenableAtIndex) {
808-
// Avoid an unhandled rejection errors for the Promises that we'll
809-
// intentionally ignore.
810-
thenable.then(noop, noop);
811-
}
812-
switch (prevThenableAtIndex.status) {
813-
case 'fulfilled': {
814-
const fulfilledValue: T = prevThenableAtIndex.value;
815-
return fulfilledValue;
816-
}
817-
case 'rejected': {
818-
const rejectedError: mixed = prevThenableAtIndex.reason;
819-
throw rejectedError;
820-
}
821-
default: {
822-
// The thenable still hasn't resolved. Suspend with the same
823-
// thenable as last time to avoid redundant listeners.
824-
throw prevThenableAtIndex;
825-
}
826-
}
827-
} else {
828-
// This is the first time something has been used at this index.
829-
// Stash the thenable at the current index so we can reuse it during
830-
// the next attempt.
831-
trackUsedThenable(thenable, index);
832-
833-
// Suspend.
834-
// TODO: Throwing here is an implementation detail that allows us to
835-
// unwind the call stack. But we shouldn't allow it to leak into
836-
// userspace. Throw an opaque placeholder value instead of the
837-
// actual thenable. If it doesn't get captured by the work loop, log
838-
// a warning, because that means something in userspace must have
839-
// caught it.
840-
throw thenable;
841-
}
842-
}
843-
}
788+
return trackUsedThenable(thenable, index);
844789
} else if (
845790
usable.$$typeof === REACT_CONTEXT_TYPE ||
846791
usable.$$typeof === REACT_SERVER_CONTEXT_TYPE

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

Lines changed: 53 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ import type {
1717
import ReactSharedInternals from 'shared/ReactSharedInternals';
1818
const {ReactCurrentActQueue} = ReactSharedInternals;
1919

20-
// TODO: Sparse arrays are bad for performance.
21-
export opaque type ThenableState = Array<Thenable<any> | void>;
20+
export opaque type ThenableState = Array<Thenable<any>>;
2221

2322
let thenableState: ThenableState | null = null;
2423

@@ -62,15 +61,30 @@ export function isThenableStateResolved(thenables: ThenableState): boolean {
6261
return true;
6362
}
6463

65-
export function trackUsedThenable<T>(thenable: Thenable<T>, index: number) {
64+
function noop(): void {}
65+
66+
export function trackUsedThenable<T>(thenable: Thenable<T>, index: number): T {
6667
if (__DEV__ && ReactCurrentActQueue.current !== null) {
6768
ReactCurrentActQueue.didUsePromise = true;
6869
}
6970

7071
if (thenableState === null) {
7172
thenableState = [thenable];
7273
} else {
73-
thenableState[index] = thenable;
74+
const previous = thenableState[index];
75+
if (previous === undefined) {
76+
thenableState.push(thenable);
77+
} else {
78+
if (previous !== thenable) {
79+
// Reuse the previous thenable, and drop the new one. We can assume
80+
// they represent the same value, because components are idempotent.
81+
82+
// Avoid an unhandled rejection errors for the Promises that we'll
83+
// intentionally ignore.
84+
thenable.then(noop, noop);
85+
thenable = previous;
86+
}
87+
}
7488
}
7589

7690
// We use an expando to track the status and result of a thenable so that we
@@ -80,52 +94,48 @@ export function trackUsedThenable<T>(thenable: Thenable<T>, index: number) {
8094
// If the thenable doesn't have a status, set it to "pending" and attach
8195
// a listener that will update its status and result when it resolves.
8296
switch (thenable.status) {
83-
case 'fulfilled':
84-
case 'rejected':
85-
// A thenable that already resolved shouldn't have been thrown, so this is
86-
// unexpected. Suggests a mistake in a userspace data library. Don't track
87-
// this thenable, because if we keep trying it will likely infinite loop
88-
// without ever resolving.
89-
// TODO: Log a warning?
90-
break;
97+
case 'fulfilled': {
98+
const fulfilledValue: T = thenable.value;
99+
return fulfilledValue;
100+
}
101+
case 'rejected': {
102+
const rejectedError = thenable.reason;
103+
throw rejectedError;
104+
}
91105
default: {
92106
if (typeof thenable.status === 'string') {
93107
// Only instrument the thenable if the status if not defined. If
94108
// it's defined, but an unknown value, assume it's been instrumented by
95109
// some custom userspace implementation. We treat it as "pending".
96-
break;
110+
} else {
111+
const pendingThenable: PendingThenable<mixed> = (thenable: any);
112+
pendingThenable.status = 'pending';
113+
pendingThenable.then(
114+
fulfilledValue => {
115+
if (thenable.status === 'pending') {
116+
const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
117+
fulfilledThenable.status = 'fulfilled';
118+
fulfilledThenable.value = fulfilledValue;
119+
}
120+
},
121+
(error: mixed) => {
122+
if (thenable.status === 'pending') {
123+
const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
124+
rejectedThenable.status = 'rejected';
125+
rejectedThenable.reason = error;
126+
}
127+
},
128+
);
97129
}
98-
const pendingThenable: PendingThenable<mixed> = (thenable: any);
99-
pendingThenable.status = 'pending';
100-
pendingThenable.then(
101-
fulfilledValue => {
102-
if (thenable.status === 'pending') {
103-
const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
104-
fulfilledThenable.status = 'fulfilled';
105-
fulfilledThenable.value = fulfilledValue;
106-
}
107-
},
108-
(error: mixed) => {
109-
if (thenable.status === 'pending') {
110-
const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
111-
rejectedThenable.status = 'rejected';
112-
rejectedThenable.reason = error;
113-
}
114-
},
115-
);
116-
break;
117-
}
118-
}
119-
}
120130

121-
export function getPreviouslyUsedThenableAtIndex<T>(
122-
index: number,
123-
): Thenable<T> | null {
124-
if (thenableState !== null) {
125-
const thenable = thenableState[index];
126-
if (thenable !== undefined) {
127-
return thenable;
131+
// Suspend.
132+
// TODO: Throwing here is an implementation detail that allows us to
133+
// unwind the call stack. But we shouldn't allow it to leak into
134+
// userspace. Throw an opaque placeholder value instead of the
135+
// actual thenable. If it doesn't get captured by the work loop, log
136+
// a warning, because that means something in userspace must have
137+
// caught it.
138+
throw thenable;
128139
}
129140
}
130-
return null;
131141
}

0 commit comments

Comments
 (0)