Skip to content

Rewrite ReactFiberScheduler for better integration with Scheduler package #15151

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.

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

Merged
merged 10 commits into from
Apr 2, 2019
7 changes: 5 additions & 2 deletions packages/react-cache/src/LRU.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@ import * as Scheduler from 'scheduler';

// Intentionally not named imports because Rollup would
// use dynamic dispatch for CommonJS interop named imports.
const {unstable_scheduleCallback: scheduleCallback} = Scheduler;
const {
unstable_scheduleCallback: scheduleCallback,
unstable_IdlePriority: IdlePriority,
} = Scheduler;

type Entry<T> = {|
value: T,
Expand All @@ -34,7 +37,7 @@ export function createLRU<T>(limit: number) {
// The cache size exceeds the limit. Schedule a callback to delete the
// least recently used entries.
cleanUpIsScheduled = true;
scheduleCallback(cleanUp);
scheduleCallback(IdlePriority, cleanUp);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

let React;
let ReactTestRenderer;
let Scheduler;
let ReactDebugTools;
let act;

Expand All @@ -20,6 +21,7 @@ describe('ReactHooksInspectionIntegration', () => {
jest.resetModules();
React = require('react');
ReactTestRenderer = require('react-test-renderer');
Scheduler = require('scheduler');
act = ReactTestRenderer.act;
ReactDebugTools = require('react-debug-tools');
});
Expand Down Expand Up @@ -618,6 +620,8 @@ describe('ReactHooksInspectionIntegration', () => {

await LazyFoo;

Scheduler.flushAll();

let childFiber = renderer.root._currentFiber();
let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
expect(tree).toEqual([
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@

'use strict';

let ReactFeatureFlags;
let enableNewScheduler;
let React;
let ReactDOM;
let Scheduler;
Expand All @@ -19,6 +21,8 @@ describe('ReactDOMHooks', () => {
beforeEach(() => {
jest.resetModules();

ReactFeatureFlags = require('shared/ReactFeatureFlags');
enableNewScheduler = ReactFeatureFlags.enableNewScheduler;
React = require('react');
ReactDOM = require('react-dom');
Scheduler = require('scheduler');
Expand Down Expand Up @@ -97,15 +101,30 @@ describe('ReactDOMHooks', () => {
}

ReactDOM.render(<Foo />, container);
ReactDOM.unstable_batchedUpdates(() => {
_set(0); // Forces the effect to be flushed
expect(otherContainer.textContent).toBe('');
ReactDOM.render(<B />, otherContainer);
expect(otherContainer.textContent).toBe('');
});
expect(otherContainer.textContent).toBe('B');
expect(calledA).toBe(false); // It was in a batch
expect(calledB).toBe(true);

if (enableNewScheduler) {
// The old behavior was accidental; in the new scheduler, flushing passive
// effects also flushes synchronous work, even inside batchedUpdates.
ReactDOM.unstable_batchedUpdates(() => {
_set(0); // Forces the effect to be flushed
expect(otherContainer.textContent).toBe('A');
ReactDOM.render(<B />, otherContainer);
expect(otherContainer.textContent).toBe('A');
});
expect(otherContainer.textContent).toBe('B');
expect(calledA).toBe(true);
expect(calledB).toBe(true);
} else {
ReactDOM.unstable_batchedUpdates(() => {
_set(0); // Forces the effect to be flushed
expect(otherContainer.textContent).toBe('');
ReactDOM.render(<B />, otherContainer);
expect(otherContainer.textContent).toBe('');
});
expect(otherContainer.textContent).toBe('B');
expect(calledA).toBe(false); // It was in a batch
expect(calledB).toBe(true);
}
});

it('should not bail out when an update is scheduled from within an event handler', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ let ReactDOM;
let Suspense;
let ReactCache;
let ReactTestUtils;
let Scheduler;
let TextResource;
let act;

Expand All @@ -26,6 +27,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
ReactDOM = require('react-dom');
ReactCache = require('react-cache');
ReactTestUtils = require('react-dom/test-utils');
Scheduler = require('scheduler');
act = ReactTestUtils.act;
Suspense = React.Suspense;
container = document.createElement('div');
Expand Down Expand Up @@ -94,6 +96,8 @@ describe('ReactDOMSuspensePlaceholder', () => {

await advanceTimers(500);

Scheduler.flushAll();

expect(divs[0].current.style.display).toEqual('');
expect(divs[1].current.style.display).toEqual('');
// This div's display was set with a prop.
Expand All @@ -115,6 +119,8 @@ describe('ReactDOMSuspensePlaceholder', () => {

await advanceTimers(500);

Scheduler.flushAll();

expect(container.textContent).toEqual('ABC');
});

Expand Down Expand Up @@ -160,6 +166,8 @@ describe('ReactDOMSuspensePlaceholder', () => {

await advanceTimers(500);

Scheduler.flushAll();

expect(container.innerHTML).toEqual(
'<span style="display: inline;">Sibling</span><span style="">Async</span>',
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
let React;
let ReactDOM;
let ReactDOMServer;
let Scheduler;

// These tests rely both on ReactDOMServer and ReactDOM.
// If a test only needs ReactDOMServer, put it in ReactServerRendering-test instead.
Expand All @@ -21,6 +22,7 @@ describe('ReactDOMServerHydration', () => {
React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
Scheduler = require('scheduler');
});

it('should have the correct mounting behavior (old hydrate API)', () => {
Expand Down Expand Up @@ -498,6 +500,7 @@ describe('ReactDOMServerHydration', () => {

jest.runAllTimers();
await Promise.resolve();
Scheduler.flushAll();
expect(element.textContent).toBe('Hello world');
});
});
16 changes: 16 additions & 0 deletions packages/react-dom/unstable-new-scheduler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

'use strict';

const ReactDOM = require('./src/client/ReactDOM');

// TODO: decide on the top-level export form.
// This is hacky but makes it work with both Rollup and Jest.
module.exports = ReactDOM.default || ReactDOM;
39 changes: 39 additions & 0 deletions packages/react-reconciler/src/ReactFiberExpirationTime.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,17 @@
* @flow
*/

import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';

import MAX_SIGNED_31_BIT_INT from './maxSigned31BitInt';

import {
ImmediatePriority,
UserBlockingPriority,
NormalPriority,
IdlePriority,
} from './SchedulerWithReactIntegration';

export type ExpirationTime = number;

export const NoWork = 0;
Expand Down Expand Up @@ -46,6 +55,8 @@ function computeExpirationBucket(
);
}

// TODO: This corresponds to Scheduler's NormalPriority, not LowPriority. Update
// the names to reflect.
export const LOW_PRIORITY_EXPIRATION = 5000;
export const LOW_PRIORITY_BATCH_SIZE = 250;

Expand Down Expand Up @@ -80,3 +91,31 @@ export function computeInteractiveExpiration(currentTime: ExpirationTime) {
HIGH_PRIORITY_BATCH_SIZE,
);
}

export function inferPriorityFromExpirationTime(
currentTime: ExpirationTime,
expirationTime: ExpirationTime,
): ReactPriorityLevel {
if (expirationTime === Sync) {
return ImmediatePriority;
}
if (expirationTime === Never) {
return IdlePriority;
}
const msUntil =
msToExpirationTime(expirationTime) - msToExpirationTime(currentTime);
if (msUntil <= 0) {
return ImmediatePriority;
}
if (msUntil <= HIGH_PRIORITY_EXPIRATION) {
return UserBlockingPriority;
}
if (msUntil <= LOW_PRIORITY_EXPIRATION) {
return NormalPriority;
}

// TODO: Handle LowPriority

// Assume anything lower has idle priority
return IdlePriority;
}
2 changes: 0 additions & 2 deletions packages/react-reconciler/src/ReactFiberReconciler.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ import {
requestCurrentTime,
computeExpirationForFiber,
scheduleWork,
requestWork,
flushRoot,
batchedUpdates,
unbatchedUpdates,
Expand Down Expand Up @@ -300,7 +299,6 @@ export function updateContainer(

export {
flushRoot,
requestWork,
computeUniqueAsyncExpiration,
batchedUpdates,
unbatchedUpdates,
Expand Down
Loading