@samitouri / QOS-React / commits / 6144212a86

[Fiber] Animation priority work (#7466)

* High priority work Adds the ability to schedule and perform high priority work. In the noop renderer, this is exposed using a method `performHighPriWork(fn)` where the function is executed and all updates in that scope are given high priority. To do this, the scheduler keeps track of a default priority level. A new function `performWithPriority(priority, fn)` changes the default priority before calling the function, then resets it afterwards. * Rename overloaded priority terms "High" and "low" priority are overloaded terms. There are priority levels called HighPriority and LowPriority. Meanwhile, there are functions called {perform,schedule}HighPriWork, which corresponds to requestAnimationFrame, and {perform,schedule}LowPriWork, which corresponds to requestIdleCallback. But in fact, work that has HighPriority is meant to be scheduled with requestIdleCallback. This is super confusing. To address this, {perform,schedule}HighPriWork has been renamed to {perform,schedule}AnimationWork, and {perform,schedule}LowPriWork has been renamed to {perform,schedule}DeferredWork. HighPriority and LowPriority remain the same. * Priority levels merge fix

Andrew Clark committed Sep 13, 2016 at 16:46 UTC 6144212a8634948faf18cce8211c71e6f9d0667e
7 files changed +202 -70
src/renderers/dom/fiber/ReactDOMFiber.js
+2 -2
@@ -78,9 +78,9 @@ var DOMRenderer = ReactFiberReconciler({
78 // Noop
79 },
80
81 - scheduleHighPriCallback: window.requestAnimationFrame,
81 + scheduleAnimationCallback: window.requestAnimationFrame,
82
83 - scheduleLowPriCallback: window.requestIdleCallback,
83 + scheduleDeferredCallback: window.requestIdleCallback,
84
85 });
86
src/renderers/noop/ReactNoop.js
+21 -14
@@ -24,9 +24,12 @@ import type { UpdateQueue } from 'ReactFiberUpdateQueue';
24 import type { HostChildren } from 'ReactFiberReconciler';
25
26 var ReactFiberReconciler = require('ReactFiberReconciler');
27 +var {
28 + AnimationPriority,
29 +} = require('ReactPriorityLevel');
30
28 -var scheduledHighPriCallback = null;
29 -var scheduledLowPriCallback = null;
31 +var scheduledAnimationCallback = null;
32 +var scheduledDeferredCallback = null;
33
34 const TERMINAL_TAG = 99;
35
@@ -88,12 +91,12 @@ var NoopRenderer = ReactFiberReconciler({
91 deleteInstance(instance : Instance) : void {
92 },
93
91 - scheduleHighPriCallback(callback) {
92 - scheduledHighPriCallback = callback;
94 + scheduleAnimationCallback(callback) {
95 + scheduledAnimationCallback = callback;
96 },
97
95 - scheduleLowPriCallback(callback) {
96 - scheduledLowPriCallback = callback;
98 + scheduleDeferredCallback(callback) {
99 + scheduledDeferredCallback = callback;
100 },
101
102 });
@@ -114,21 +117,21 @@ var ReactNoop = {
117 }
118 },
119
117 - flushHighPri() {
118 - var cb = scheduledHighPriCallback;
120 + flushAnimationPri() {
121 + var cb = scheduledAnimationCallback;
122 if (cb === null) {
123 return;
124 }
122 - scheduledHighPriCallback = null;
125 + scheduledAnimationCallback = null;
126 cb();
127 },
128
126 - flushLowPri(timeout : number = Infinity) {
127 - var cb = scheduledLowPriCallback;
129 + flushDeferredPri(timeout : number = Infinity) {
130 + var cb = scheduledDeferredCallback;
131 if (cb === null) {
132 return;
133 }
131 - scheduledLowPriCallback = null;
134 + scheduledDeferredCallback = null;
135 var timeRemaining = timeout;
136 cb({
137 timeRemaining() {
@@ -143,8 +146,12 @@ var ReactNoop = {
146 },
147
148 flush() {
146 - ReactNoop.flushHighPri();
147 - ReactNoop.flushLowPri();
149 + ReactNoop.flushAnimationPri();
150 + ReactNoop.flushDeferredPri();
151 + },
152 +
153 + performAnimationWork(fn: Function) {
154 + NoopRenderer.performWithPriority(AnimationPriority, fn);
155 },
156
157 // Logs the current state of the tree.
src/renderers/shared/fiber/ReactFiberBeginWork.js
+2 -2
@@ -117,7 +117,7 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>, getSchedu
117 }
118
119 function scheduleUpdate(fiber: Fiber, updateQueue: UpdateQueue, priorityLevel : PriorityLevel): void {
120 - const { scheduleLowPriWork } = getScheduler();
120 + const { scheduleDeferredWork } = getScheduler();
121 fiber.updateQueue = updateQueue;
122 // Schedule update on the alternate as well, since we don't know which tree
123 // is current.
@@ -138,7 +138,7 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>, getSchedu
138 // Duck type root
139 if (fiber.stateNode && fiber.stateNode.containerInfo) {
140 const root : FiberRoot = (fiber.stateNode : any);
141 - scheduleLowPriWork(root, priorityLevel);
141 + scheduleDeferredWork(root, priorityLevel);
142 return;
143 }
144 if (!fiber.return) {
src/renderers/shared/fiber/ReactFiberReconciler.js
+10 -13
@@ -15,14 +15,11 @@
15 import type { Fiber } from 'ReactFiber';
16 import type { FiberRoot } from 'ReactFiberRoot';
17 import type { TypeOfWork } from 'ReactTypeOfWork';
18 +import type { PriorityLevel } from 'ReactPriorityLevel';
19
20 var { createFiberRoot } = require('ReactFiberRoot');
21 var ReactFiberScheduler = require('ReactFiberScheduler');
22
22 -var {
23 - LowPriority,
24 -} = require('ReactPriorityLevel');
25 -
23 type Deadline = {
24 timeRemaining : () => number
25 };
@@ -44,8 +41,8 @@ export type HostConfig<T, P, I, C> = {
41 commitUpdate(instance : I, oldProps : P, newProps : P, children : HostChildren<I>) : void,
42 deleteInstance(instance : I) : void,
43
47 - scheduleHighPriCallback(callback : () => void) : void,
48 - scheduleLowPriCallback(callback : (deadline : Deadline) => void) : void
44 + scheduleAnimationCallback(callback : () => void) : void,
45 + scheduleDeferredCallback(callback : (deadline : Deadline) => void) : void
46
47 };
48
@@ -55,6 +52,7 @@ export type Reconciler<C> = {
52 mountContainer(element : ReactElement<any>, containerInfo : C) : OpaqueNode,
53 updateContainer(element : ReactElement<any>, container : OpaqueNode) : void,
54 unmountContainer(container : OpaqueNode) : void,
55 + performWithPriority(priorityLevel : PriorityLevel, fn : Function) : void,
56
57 // Used to extract the return value from the initial render. Legacy API.
58 getPublicRootInstance(container : OpaqueNode) : (C | null),
@@ -62,7 +60,7 @@ export type Reconciler<C> = {
60
61 module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) : Reconciler<C> {
62
65 - var { scheduleLowPriWork } = ReactFiberScheduler(config);
63 + var { scheduleWork, performWithPriority } = ReactFiberScheduler(config);
64
65 return {
66
@@ -73,9 +71,8 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) : Reconci
71 // TODO: This should not override the pendingWorkPriority if there is
72 // higher priority work in the subtree.
73 container.pendingProps = element;
76 - container.pendingWorkPriority = LowPriority;
74
78 - scheduleLowPriWork(root, LowPriority);
75 + scheduleWork(root);
76
77 // It may seem strange that we don't return the root here, but that will
78 // allow us to have containers that are in the middle of the tree instead
@@ -88,9 +85,8 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) : Reconci
85 const root : FiberRoot = (container.stateNode : any);
86 // TODO: Use pending work/state instead of props.
87 root.current.pendingProps = element;
91 - root.current.pendingWorkPriority = LowPriority;
88
93 - scheduleLowPriWork(root, LowPriority);
89 + scheduleWork(root);
90 },
91
92 unmountContainer(container : OpaqueNode) : void {
@@ -98,11 +94,12 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) : Reconci
94 const root : FiberRoot = (container.stateNode : any);
95 // TODO: Use pending work/state instead of props.
96 root.current.pendingProps = [];
101 - root.current.pendingWorkPriority = LowPriority;
97
103 - scheduleLowPriWork(root, LowPriority);
98 + scheduleWork(root);
99 },
100
101 + performWithPriority,
102 +
103 getPublicRootInstance(container : OpaqueNode) : (C | null) {
104 return null;
105 },
src/renderers/shared/fiber/ReactFiberScheduler.js
+85 -14
@@ -25,12 +25,15 @@ var { cloneFiber } = require('ReactFiber');
25
26 var {
27 NoWork,
28 + LowPriority,
29 + AnimationPriority,
30 + SynchronousPriority,
31 } = require('ReactPriorityLevel');
32
33 var timeHeuristicForUnitOfWork = 1;
34
35 export type Scheduler = {
33 - scheduleLowPriWork: (root : FiberRoot, priority : PriorityLevel) => void
36 + scheduleDeferredWork: (root : FiberRoot, priority : PriorityLevel) => void
37 };
38
39 module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
@@ -45,8 +48,11 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
48 const { completeWork } = ReactFiberCompleteWork(config);
49 const { commitWork } = ReactFiberCommitWork(config);
50
48 - // const scheduleHighPriCallback = config.scheduleHighPriCallback;
49 - const scheduleLowPriCallback = config.scheduleLowPriCallback;
51 + const scheduleAnimationCallback = config.scheduleAnimationCallback;
52 + const scheduleDeferredCallback = config.scheduleDeferredCallback;
53 +
54 + // The default priority to use for updates.
55 + let defaultPriority : PriorityLevel = LowPriority;
56
57 // The next work in progress fiber that we're currently working on.
58 let nextUnitOfWork : ?Fiber = null;
@@ -217,7 +223,7 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
223 }
224 }
225
220 - function performLowPriWork(deadline) {
226 + function performDeferredWork(deadline) {
227 if (!nextUnitOfWork) {
228 nextUnitOfWork = findNextUnitOfWork();
229 }
@@ -229,13 +235,13 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
235 nextUnitOfWork = findNextUnitOfWork();
236 }
237 } else {
232 - scheduleLowPriCallback(performLowPriWork);
238 + scheduleDeferredCallback(performDeferredWork);
239 return;
240 }
241 }
242 }
243
238 - function scheduleLowPriWork(root : FiberRoot, priority : PriorityLevel) {
244 + function scheduleDeferredWork(root : FiberRoot, priority : PriorityLevel) {
245 // We must reset the current unit of work pointer so that we restart the
246 // search from the root during the next tick, in case there is now higher
247 // priority work somewhere earlier than before.
@@ -243,6 +249,54 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
249 nextUnitOfWork = null;
250 }
251
252 + // Set the priority on the root, without deprioritizing
253 + if (root.current.pendingWorkPriority === NoWork ||
254 + priority <= root.current.pendingWorkPriority) {
255 + root.current.pendingWorkPriority = priority;
256 + }
257 +
258 + if (root.isScheduled) {
259 + // If we're already scheduled, we can bail out.
260 + return;
261 + }
262 + root.isScheduled = true;
263 + if (lastScheduledRoot) {
264 + // Schedule ourselves to the end.
265 + lastScheduledRoot.nextScheduledRoot = root;
266 + lastScheduledRoot = root;
267 + } else {
268 + // We're the only work scheduled.
269 + nextScheduledRoot = root;
270 + lastScheduledRoot = root;
271 + scheduleDeferredCallback(performDeferredWork);
272 + }
273 + }
274 +
275 + function performAnimationWork() {
276 + // Always start from the root
277 + nextUnitOfWork = findNextUnitOfWork();
278 + while (nextUnitOfWork &&
279 + nextPriorityLevel !== NoWork) {
280 + nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
281 + if (!nextUnitOfWork) {
282 + // Keep searching for animation work until there's no more left
283 + nextUnitOfWork = findNextUnitOfWork();
284 + }
285 + // Stop if the next unit of work is low priority
286 + if (nextPriorityLevel > AnimationPriority) {
287 + scheduleDeferredCallback(performDeferredWork);
288 + return;
289 + }
290 + }
291 + }
292 +
293 + function scheduleAnimationWork(root: FiberRoot, priorityLevel : PriorityLevel) {
294 + // Set the priority on the root, without deprioritizing
295 + if (root.current.pendingWorkPriority === NoWork ||
296 + priorityLevel <= root.current.pendingWorkPriority) {
297 + root.current.pendingWorkPriority = priorityLevel;
298 + }
299 +
300 if (root.isScheduled) {
301 // If we're already scheduled, we can bail out.
302 return;
@@ -256,22 +310,39 @@ module.exports = function<T, P, I, C>(config : HostConfig<T, P, I, C>) {
310 // We're the only work scheduled.
311 nextScheduledRoot = root;
312 lastScheduledRoot = root;
259 - scheduleLowPriCallback(performLowPriWork);
313 + scheduleAnimationCallback(performAnimationWork);
314 }
315 }
316
263 - /*
264 - function performHighPriWork() {
265 - // There is no such thing as high pri work yet.
317 + function scheduleWork(root : FiberRoot) {
318 + if (defaultPriority === SynchronousPriority) {
319 + throw new Error('Not implemented yet');
320 + }
321 +
322 + if (defaultPriority === NoWork) {
323 + return;
324 + }
325 + if (defaultPriority > AnimationPriority) {
326 + scheduleDeferredWork(root, defaultPriority);
327 + return;
328 + }
329 + scheduleAnimationWork(root, defaultPriority);
330 }
331
268 - function ensureHighPriIsScheduled() {
269 - scheduleHighPriCallback(performHighPriWork);
332 + function performWithPriority(priorityLevel : PriorityLevel, fn : Function) {
333 + const previousDefaultPriority = defaultPriority;
334 + defaultPriority = priorityLevel;
335 + try {
336 + fn();
337 + } finally {
338 + defaultPriority = previousDefaultPriority;
339 + }
340 }
271 - */
341
342 scheduler = {
274 - scheduleLowPriWork: scheduleLowPriWork,
343 + scheduleWork: scheduleWork,
344 + scheduleDeferredWork: scheduleDeferredWork,
345 + performWithPriority: performWithPriority,
346 };
347 return scheduler;
348 };
src/renderers/shared/fiber/__tests__/ReactIncremental-test.js
+73 -16
@@ -56,11 +56,11 @@ describe('ReactIncremental', () => {
56 expect(fooCalled).toBe(false);
57 expect(barCalled).toBe(false);
58 // Do one step of work.
59 - ReactNoop.flushLowPri(7);
59 + ReactNoop.flushDeferredPri(7);
60 expect(fooCalled).toBe(true);
61 expect(barCalled).toBe(false);
62 // Do the rest of the work.
63 - ReactNoop.flushLowPri(50);
63 + ReactNoop.flushDeferredPri(50);
64 expect(fooCalled).toBe(true);
65 expect(barCalled).toBe(true);
66 });
@@ -143,7 +143,7 @@ describe('ReactIncremental', () => {
143
144 ReactNoop.render(<Foo text="bar" />);
145 // Flush part of the work
146 - ReactNoop.flushLowPri(20);
146 + ReactNoop.flushDeferredPri(20);
147
148 expect(ops).toEqual(['Foo', 'Bar']);
149
@@ -153,7 +153,7 @@ describe('ReactIncremental', () => {
153 ReactNoop.render(<Foo text="baz" />);
154
155 // Flush part of the new work
156 - ReactNoop.flushLowPri(20);
156 + ReactNoop.flushDeferredPri(20);
157
158 expect(ops).toEqual(['Foo', 'Bar']);
159
@@ -205,7 +205,7 @@ describe('ReactIncremental', () => {
205 // Render part of the work. This should be enough to flush everything except
206 // the middle which has lower priority.
207 ReactNoop.render(<Foo text="bar" />);
208 - ReactNoop.flushLowPri(40);
208 + ReactNoop.flushDeferredPri(40);
209
210 expect(ops).toEqual(['Foo', 'Bar', 'Bar']);
211
@@ -218,6 +218,63 @@ describe('ReactIncremental', () => {
218
219 });
220
221 + it('can deprioritize a tree from without dropping work', () => {
222 + var ops = [];
223 +
224 + function Bar(props) {
225 + ops.push('Bar');
226 + return <div>{props.children}</div>;
227 + }
228 +
229 + function Middle(props) {
230 + ops.push('Middle');
231 + return <span>{props.children}</span>;
232 + }
233 +
234 + function Foo(props) {
235 + ops.push('Foo');
236 + return (
237 + <div>
238 + <Bar>{props.text}</Bar>
239 + <section hidden={true}>
240 + <Middle>{props.text}</Middle>
241 + </section>
242 + <Bar>{props.text}</Bar>
243 + <footer hidden={true}>
244 + <Middle>Footer</Middle>
245 + </footer>
246 + </div>
247 + );
248 + }
249 +
250 + // Init
251 + ReactNoop.performAnimationWork(() => {
252 + ReactNoop.render(<Foo text="foo" />);
253 + });
254 + ReactNoop.flush();
255 +
256 + expect(ops).toEqual(['Foo', 'Bar', 'Bar', 'Middle', 'Middle']);
257 +
258 + ops = [];
259 +
260 + // Render the high priority work (everying except the hidden trees).
261 + ReactNoop.performAnimationWork(() => {
262 + ReactNoop.render(<Foo text="foo" />);
263 + });
264 + ReactNoop.render(<Foo text="bar" />);
265 + ReactNoop.flushAnimationPri();
266 +
267 + expect(ops).toEqual(['Foo', 'Bar', 'Bar']);
268 +
269 + ops = [];
270 +
271 + // The hidden content was deprioritized from high to low priority. A low
272 + // priority callback should have been scheduled. Flush it now.
273 + ReactNoop.flushDeferredPri();
274 +
275 + expect(ops).toEqual(['Middle', 'Middle']);
276 + });
277 +
278 it('can resume work in a subtree even when a parent bails out', () => {
279
280 var ops = [];
@@ -263,7 +320,7 @@ describe('ReactIncremental', () => {
320
321 // Init
322 ReactNoop.render(<Foo text="foo" />);
266 - ReactNoop.flushLowPri(52);
323 + ReactNoop.flushDeferredPri(52);
324
325 expect(ops).toEqual(['Foo', 'Bar', 'Tester', 'Bar']);
326
@@ -271,7 +328,7 @@ describe('ReactIncremental', () => {
328
329 // We're now rendering an update that will bail out on updating middle.
330 ReactNoop.render(<Foo text="bar" />);
274 - ReactNoop.flushLowPri(45);
331 + ReactNoop.flushDeferredPri(45);
332
333 expect(ops).toEqual(['Foo', 'Bar', 'Bar']);
334
@@ -338,7 +395,7 @@ describe('ReactIncremental', () => {
395
396 // Init
397 ReactNoop.render(<Foo text="foo" />);
341 - ReactNoop.flushLowPri(52);
398 + ReactNoop.flushDeferredPri(52);
399
400 expect(ops).toEqual(['Foo', 'Bar', 'Tester', 'Bar']);
401
@@ -347,7 +404,7 @@ describe('ReactIncremental', () => {
404 // Make a quick update which will create a low pri tree on top of the
405 // already low pri tree.
406 ReactNoop.render(<Foo text="bar" />);
350 - ReactNoop.flushLowPri(15);
407 + ReactNoop.flushDeferredPri(15);
408
409 expect(ops).toEqual(['Foo']);
410
@@ -410,7 +467,7 @@ describe('ReactIncremental', () => {
467
468 // Init
469 ReactNoop.render(<Foo text="foo" text2="foo" step={0} />);
413 - ReactNoop.flushLowPri(55 + 25);
470 + ReactNoop.flushDeferredPri(55 + 25);
471
472 // We only finish the higher priority work. So the low pri content
473 // has not yet finished mounting.
@@ -432,14 +489,14 @@ describe('ReactIncremental', () => {
489 // Make a quick update which will schedule low priority work to
490 // update the middle content.
491 ReactNoop.render(<Foo text="bar" text2="bar" step={1} />);
435 - ReactNoop.flushLowPri(30 + 25);
492 + ReactNoop.flushDeferredPri(30 + 25);
493
494 expect(ops).toEqual(['Foo', 'Bar']);
495
496 ops = [];
497
498 // The middle content is now pending rendering...
442 - ReactNoop.flushLowPri(30);
499 + ReactNoop.flushDeferredPri(30);
500 expect(ops).toEqual(['Middle', 'Bar']);
501
502 ops = [];
@@ -447,7 +504,7 @@ describe('ReactIncremental', () => {
504 // but we'll interupt it to render some higher priority work.
505 // The middle content will bailout so it remains untouched.
506 ReactNoop.render(<Foo text="foo" text2="bar" step={1} />);
450 - ReactNoop.flushLowPri(30);
507 + ReactNoop.flushDeferredPri(30);
508
509 expect(ops).toEqual(['Foo', 'Bar']);
510
@@ -519,14 +576,14 @@ describe('ReactIncremental', () => {
576 // Make a quick update which will schedule low priority work to
577 // update the middle content.
578 ReactNoop.render(<Foo text="bar" step={1} />);
522 - ReactNoop.flushLowPri(30);
579 + ReactNoop.flushDeferredPri(30);
580
581 expect(ops).toEqual(['Foo', 'Bar']);
582
583 ops = [];
584
585 // The middle content is now pending rendering...
529 - ReactNoop.flushLowPri(30 + 25);
586 + ReactNoop.flushDeferredPri(30 + 25);
587 expect(ops).toEqual(['Content', 'Middle', 'Bar']); // One more Middle left.
588
589 ops = [];
@@ -534,7 +591,7 @@ describe('ReactIncremental', () => {
591 // but we'll interupt it to render some higher priority work.
592 // The middle content will bailout so it remains untouched.
593 ReactNoop.render(<Foo text="foo" step={1} />);
537 - ReactNoop.flushLowPri(30);
594 + ReactNoop.flushDeferredPri(30);
595
596 expect(ops).toEqual(['Foo', 'Bar']);
597
src/renderers/shared/fiber/__tests__/ReactIncrementalSideEffects-test.js
+9 -9
@@ -82,7 +82,7 @@ describe('ReactIncrementalSideEffects', () => {
82 ]);
83
84 ReactNoop.render(<Foo text="World" />);
85 - ReactNoop.flushLowPri(35);
85 + ReactNoop.flushDeferredPri(35);
86 expect(ReactNoop.root.children).toEqual([
87 div(div(span('Hello'), span('Hello')), span('Yo')),
88 ]);
@@ -113,7 +113,7 @@ describe('ReactIncrementalSideEffects', () => {
113 ]);
114
115 ReactNoop.render(<Foo text="bar" />);
116 - ReactNoop.flushLowPri(20);
116 + ReactNoop.flushDeferredPri(20);
117
118 expect(ReactNoop.root.children).toEqual([
119 div(div(span('foo'))),
@@ -166,7 +166,7 @@ describe('ReactIncrementalSideEffects', () => {
166 // Make a quick update which will schedule low priority work to
167 // update the middle content.
168 ReactNoop.render(<Foo text="bar" step={1} />);
169 - ReactNoop.flushLowPri(30);
169 + ReactNoop.flushDeferredPri(30);
170
171 // The tree remains unchanged.
172 expect(ReactNoop.root.children).toEqual([
@@ -232,7 +232,7 @@ describe('ReactIncrementalSideEffects', () => {
232 // Make a quick update which will schedule low priority work to
233 // update the middle content.
234 ReactNoop.render(<Foo text="bar" step={1} />);
235 - ReactNoop.flushLowPri(35);
235 + ReactNoop.flushDeferredPri(35);
236
237 // The tree remains unchanged.
238 expect(ReactNoop.root.children).toEqual([
@@ -291,7 +291,7 @@ describe('ReactIncrementalSideEffects', () => {
291 );
292 }
293 ReactNoop.render(<Foo tick={0} idx={0} />);
294 - ReactNoop.flushLowPri(40 + 25);
294 + ReactNoop.flushDeferredPri(40 + 25);
295 expect(ReactNoop.root.children).toEqual([
296 div(
297 span(0),
@@ -299,14 +299,14 @@ describe('ReactIncrementalSideEffects', () => {
299 ),
300 ]);
301 ReactNoop.render(<Foo tick={1} idx={0} />);
302 - ReactNoop.flushLowPri(35 + 25);
302 + ReactNoop.flushDeferredPri(35 + 25);
303 expect(ReactNoop.root.children).toEqual([
304 div(
305 span(1),
306 div(/*still not rendered yet*/)
307 ),
308 ]);
309 - ReactNoop.flushLowPri(30 + 25);
309 + ReactNoop.flushDeferredPri(30 + 25);
310 expect(ReactNoop.root.children).toEqual([
311 div(
312 span(1),
@@ -319,7 +319,7 @@ describe('ReactIncrementalSideEffects', () => {
319 ]);
320 var innerSpanA = ReactNoop.root.children[0].children[1].children[1];
321 ReactNoop.render(<Foo tick={2} idx={1} />);
322 - ReactNoop.flushLowPri(30 + 25);
322 + ReactNoop.flushDeferredPri(30 + 25);
323 expect(ReactNoop.root.children).toEqual([
324 div(
325 span(2),
@@ -330,7 +330,7 @@ describe('ReactIncrementalSideEffects', () => {
330 )
331 ),
332 ]);
333 - ReactNoop.flushLowPri(30);
333 + ReactNoop.flushDeferredPri(30);
334 expect(ReactNoop.root.children).toEqual([
335 div(
336 span(2),