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

Add withSuspenseConfig API #15593

Merged
merged 14 commits into from
May 16, 2019
Merged

Add withSuspenseConfig API #15593

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
dae328f
Add suspendIfNeeded API and a global scope to track it
sebmarkbage May 8, 2019
53f94f9
Add the suspenseConfig to all updates created during this scope
sebmarkbage May 8, 2019
58671af
Compute expiration time based on the timeout of the suspense config
sebmarkbage May 8, 2019
aee7a4a
Track if there was a processed suspenseConfig this render pass
sebmarkbage May 8, 2019
f80e403
Mark suspended states that should be avoided as a separate flag
sebmarkbage May 8, 2019
b9e467a
Suspend until the full expiration time if something asked to suspend
sebmarkbage May 8, 2019
df782f6
Reenable an old test that we can now repro again
sebmarkbage May 9, 2019
8660f24
Suspend the commit even if it is complete if there is a minimum delay
sebmarkbage May 9, 2019
044af3c
Default timeoutMs to low pri expiration if not provided
sebmarkbage May 9, 2019
0c902e4
Rename to withSuspenseConfig and drop the default config
sebmarkbage May 16, 2019
367354d
Track the largest suspense config expiration separately
sebmarkbage May 16, 2019
1f889b6
Add basic tests for functionality using each update mechanism
sebmarkbage May 16, 2019
d937e45
Fix issue when newly created avoided boundary doesn't suspend with delay
sebmarkbage May 16, 2019
4347de6
Add test for loading indicator with minLoadingDurationMs option
sebmarkbage May 16, 2019
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
Prev Previous commit
Next Next commit
Track the largest suspense config expiration separately 
This ensures that if we've scheduled lower pri work that doesn't have a
suspenseConfig, we don't consider its expiration as the timeout.
  • Loading branch information
@sebmarkbage
sebmarkbage committed May 16, 2019
commit 367354d64d7ca136b272fe4736bfad4ab092d0c5
27 changes: 15 additions & 12 deletions packages/react-reconciler/src/ReactFiberScheduler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,7 @@ let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
// because we deal mostly with expiration times in the hot path, so this avoids
// the conversion happening in the hot path.
let workInProgressRootLatestProcessedExpirationTime: ExpirationTime = Sync;
let workInProgressRootLatestSuspenseTimeout: ExpirationTime = Sync;
let workInProgressRootCanSuspendUsingConfig: null | SuspenseConfig = null;

let nextEffect: Fiber | null = null;
Expand Down Expand Up @@ -734,6 +735,7 @@ function prepareFreshStack(root, expirationTime) {
renderExpirationTime = expirationTime;
workInProgressRootExitStatus = RootIncomplete;
workInProgressRootLatestProcessedExpirationTime = Sync;
workInProgressRootLatestSuspenseTimeout = Sync;
workInProgressRootCanSuspendUsingConfig = null;

if (__DEV__) {
Expand Down Expand Up @@ -949,6 +951,7 @@ function renderRoot(
workInProgressRootExitStatus === RootSuspendedWithDelay;
let msUntilTimeout = computeMsUntilTimeout(
workInProgressRootLatestProcessedExpirationTime,
workInProgressRootLatestSuspenseTimeout,
expirationTime,
workInProgressRootCanSuspendUsingConfig,
shouldDelay,
Expand Down Expand Up @@ -1011,15 +1014,12 @@ export function markRenderEventTimeAndConfig(
workInProgressRootLatestProcessedExpirationTime = expirationTime;
}
if (suspenseConfig !== null) {
// Most of the time we only have one config and getting wrong is not bad.
// We pick the config with the lowest timeout because we'll use it to
// reverse engineer the event time if we end up using JND and we want to
// error on the side of suspending less time.
if (
workInProgressRootCanSuspendUsingConfig === null ||
workInProgressRootCanSuspendUsingConfig.timeoutMs <
suspenseConfig.timeoutMs
expirationTime < workInProgressRootLatestSuspenseTimeout &&
expirationTime > Never
) {
workInProgressRootLatestSuspenseTimeout = expirationTime;
// Most of the time we only have one config and getting wrong is not bad.
workInProgressRootCanSuspendUsingConfig = suspenseConfig;
}
}
Expand Down Expand Up @@ -2001,13 +2001,14 @@ function computeMsUntilSuspenseLoadingDelay(
// have to wait any additional time.
return 0;
}
const msUntilTimeout = timeElapsed - loadingDelayMs - minLoadingDurationMs;
const msUntilTimeout = loadingDelayMs + minLoadingDurationMs - timeElapsed;
// This is the value that is passed to `setTimeout`.
return msUntilTimeout;
}

function computeMsUntilTimeout(
mostRecentEventTime: ExpirationTime,
suspenseTimeout: ExpirationTime,
committedExpirationTime: ExpirationTime,
suspenseConfig: null | SuspenseConfig,
shouldDelay: boolean,
Expand All @@ -2019,17 +2020,19 @@ function computeMsUntilTimeout(

// Compute the time until this render pass would expire.
const currentTimeMs: number = now();
const timeUntilExpirationMs =
expirationTimeToMs(committedExpirationTime) - currentTimeMs;

if (suspenseConfig !== null && shouldDelay) {
return timeUntilExpirationMs;
if (suspenseTimeout !== Sync && shouldDelay) {
const timeUntilTimeoutMs =
expirationTimeToMs(suspenseTimeout) - currentTimeMs;
return timeUntilTimeoutMs;
}

const eventTimeMs: number = inferTimeFromExpirationTime(
mostRecentEventTime,
suspenseConfig,
);
const timeUntilExpirationMs =
expirationTimeToMs(committedExpirationTime) - currentTimeMs;
let timeElapsed = currentTimeMs - eventTimeMs;
if (timeElapsed < 0) {
// We get this wrong some time since we estimate the time.
Expand Down