Skip to content

Rewrite useTransition to better handle overlapping transitions #17908

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

Closed
wants to merge 3 commits into from
Closed

Rewrite useTransition to better handle overlapping transitions #17908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
97ec5bb
Decouple expiration times and transition timeouts
acdlite Dec 19, 2019
772e7c1
Turn off isPending of intermediate transitions
acdlite Jan 24, 2020
fe9d199
Prevent intermediate transitions from finishing
acdlite Jan 24, 2020
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
122 changes: 87 additions & 35 deletions packages/react-reconciler/src/ReactFiberClassComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,15 @@ import {readContext} from './ReactFiberNewContext';
import {
requestCurrentTimeForUpdate,
computeExpirationForFiber,
scheduleWork,
scheduleUpdateOnFiber,
} from './ReactFiberWorkLoop';
import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
import {
getCurrentTransition,
getCurrentTransitionEventTime,
getCurrentTransitionResolvedTime,
setTransition,
} from './ReactFiberHooks';

const fakeInternalInstance = {};
const isArray = Array.isArray;
Expand Down Expand Up @@ -91,7 +97,7 @@ if (__DEV__) {
if (callback === null || typeof callback === 'function') {
return;
}
const key = `${callerName}_${(callback: any)}`;
const key = callerName + '_' + (callback: any);
if (!didWarnOnInvalidCallback.has(key)) {
didWarnOnInvalidCallback.add(key);
console.error(
Expand Down Expand Up @@ -178,76 +184,122 @@ export function applyDerivedStateFromProps(
}
}

const classComponentUpdater = {
export const classComponentUpdater = {
isMounted,
enqueueSetState(inst, payload, callback) {
enqueueSetState(inst: any, payload: mixed, callback: ?() => mixed) {
const fiber = getInstance(inst);
const currentTime = requestCurrentTimeForUpdate();

const suspenseConfig = requestCurrentSuspenseConfig();
const expirationTime = computeExpirationForFiber(
currentTime,
fiber,
suspenseConfig,
);
const currentTransition = getCurrentTransition();

let eventTime;
let expirationTime;
if (currentTransition !== null) {
eventTime = getCurrentTransitionEventTime();
expirationTime = getCurrentTransitionResolvedTime();
const updateQueue = fiber.updateQueue;
const sharedQueue = updateQueue !== null ? updateQueue.shared : null;
if (sharedQueue === null) {
// TODO: Fire warning for update on unmounted component
return;
}
setTransition(sharedQueue, currentTransition);
} else {
eventTime = requestCurrentTimeForUpdate();
expirationTime = computeExpirationForFiber(
eventTime,
fiber,
suspenseConfig,
);
}

const update = createUpdate(expirationTime, suspenseConfig);
const update = createUpdate(eventTime, expirationTime, suspenseConfig);
update.payload = payload;
if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'setState');
}
update.callback = callback;
}

enqueueUpdate(fiber, update);
scheduleWork(fiber, expirationTime);
scheduleUpdateOnFiber(fiber, expirationTime);
},
enqueueReplaceState(inst, payload, callback) {
enqueueReplaceState(inst: any, payload: mixed, callback: ?() => mixed) {
const fiber = getInstance(inst);
const currentTime = requestCurrentTimeForUpdate();

const suspenseConfig = requestCurrentSuspenseConfig();
const expirationTime = computeExpirationForFiber(
currentTime,
fiber,
suspenseConfig,
);
const currentTransition = getCurrentTransition();

let eventTime;
let expirationTime;
if (currentTransition !== null) {
eventTime = getCurrentTransitionEventTime();
expirationTime = getCurrentTransitionResolvedTime();
const updateQueue = fiber.updateQueue;
const sharedQueue = updateQueue !== null ? updateQueue.shared : null;
if (sharedQueue === null) {
// TODO: Fire warning for update on unmounted component
return;
}
setTransition(sharedQueue, currentTransition);
} else {
eventTime = requestCurrentTimeForUpdate();
expirationTime = computeExpirationForFiber(
eventTime,
fiber,
suspenseConfig,
);
}

const update = createUpdate(expirationTime, suspenseConfig);
const update = createUpdate(eventTime, expirationTime, suspenseConfig);
update.tag = ReplaceState;
update.payload = payload;

if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'replaceState');
}
update.callback = callback;
}

enqueueUpdate(fiber, update);
scheduleWork(fiber, expirationTime);
scheduleUpdateOnFiber(fiber, expirationTime);
},
enqueueForceUpdate(inst, callback) {
enqueueForceUpdate(inst: any, callback: ?() => mixed) {
const fiber = getInstance(inst);
const currentTime = requestCurrentTimeForUpdate();

const suspenseConfig = requestCurrentSuspenseConfig();
const expirationTime = computeExpirationForFiber(
currentTime,
fiber,
suspenseConfig,
);
const currentTransition = getCurrentTransition();

let eventTime;
let expirationTime;
if (currentTransition !== null) {
eventTime = getCurrentTransitionEventTime();
expirationTime = getCurrentTransitionResolvedTime();
const updateQueue = fiber.updateQueue;
const sharedQueue = updateQueue !== null ? updateQueue.shared : null;
if (sharedQueue === null) {
// TODO: Fire warning for update on unmounted component
return;
}
setTransition(sharedQueue, currentTransition);
} else {
eventTime = requestCurrentTimeForUpdate();
expirationTime = computeExpirationForFiber(
eventTime,
fiber,
suspenseConfig,
);
}

const update = createUpdate(expirationTime, suspenseConfig);
const update = createUpdate(eventTime, expirationTime, suspenseConfig);
update.tag = ForceUpdate;

if (callback !== undefined && callback !== null) {
if (__DEV__) {
warnOnInvalidCallback(callback, 'forceUpdate');
}
update.callback = callback;
}

enqueueUpdate(fiber, update);
scheduleWork(fiber, expirationTime);
scheduleUpdateOnFiber(fiber, expirationTime);
},
};

Expand Down
11 changes: 4 additions & 7 deletions packages/react-reconciler/src/ReactFiberExpirationTime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,16 +85,13 @@ export function computeAsyncExpiration(
);
}

export function computeSuspenseExpiration(
export function computeSuspenseTimeout(
currentTime: ExpirationTime,
timeoutMs: number,
): ExpirationTime {
// TODO: Should we warn if timeoutMs is lower than the normal pri expiration time?
return computeExpirationBucket(
currentTime,
timeoutMs,
LOW_PRIORITY_BATCH_SIZE,
);
const currentTimeMs = expirationTimeToMs(currentTime);
const deadlineMs = currentTimeMs + timeoutMs;
return msToExpirationTime(deadlineMs);
}

// We intentionally set a higher expiration time for interactive updates in
Expand Down
Loading