-
Notifications
You must be signed in to change notification settings - Fork 47k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Store interleaved updates on separate queue until end of render (#20615)
## Motivation An *interleaved* update is one that is scheduled while a render is already in progress, typically from a concurrent user input event. We have to take care not to process these updates during the current render, because a multiple interleaved updates may have been scheduled across many components; to avoid tearing, we cannot render some of those updates without rendering all of them. ## Old approach What we currently do when we detect an interleaved update is assign a lane that is not part of the current render. This has some unfortunate drawbacks. For example, we will eventually run out of lanes at a given priority level. When this happens, our last resort is to interrupt the current render and start over from scratch. If this happens enough, it can lead to starvation. More concerning, there are a suprising number of places that must separately account for this case, often in subtle ways. The maintenance complexity has led to a number of tearing bugs. ## New approach I added a new field to the update queue, `interleaved`. It's a linked list, just like the `pending` field. When an interleaved update is scheduled, we add it to the `interleaved` list instead of `pending`. Then we push the entire queue object onto a global array. When the current render exits, we iterate through the array of interleaved queues and transfer the `interleaved` list to the `pending` list. So, until the current render has exited (whether due to a commit or an interruption), it's impossible to process an interleaved update, because they have not yet been enqueued. In this new approach, we don't need to resort to clever lanes tricks to avoid inconsistencies. This should allow us to simplify a lot of the logic that's currently in ReactFiberWorkLoop and ReactFiberLane, especially `findUpdateLane` and `getNextLanes`. All the logic for interleaved updates is isolated to one place.
- Loading branch information
Showing
9 changed files
with
339 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /** | ||
| * 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 | ||
| */ | ||
|
|
||
| import type {UpdateQueue as HookQueue} from './ReactFiberHooks.new'; | ||
| import type {SharedQueue as ClassQueue} from './ReactUpdateQueue.new'; | ||
|
|
||
| // An array of all update queues that received updates during the current | ||
| // render. When this render exits, either because it finishes or because it is | ||
| // interrupted, the interleaved updates will be transfered onto the main part | ||
| // of the queue. | ||
| let interleavedQueues: Array< | ||
| HookQueue<any, any> | ClassQueue<any>, | ||
| > | null = null; | ||
|
|
||
| export function pushInterleavedQueue( | ||
| queue: HookQueue<any, any> | ClassQueue<any>, | ||
| ) { | ||
| if (interleavedQueues === null) { | ||
| interleavedQueues = [queue]; | ||
| } else { | ||
| interleavedQueues.push(queue); | ||
| } | ||
| } | ||
|
|
||
| export function enqueueInterleavedUpdates() { | ||
| // Transfer the interleaved updates onto the main queue. Each queue has a | ||
| // `pending` field and an `interleaved` field. When they are not null, they | ||
| // point to the last node in a circular linked list. We need to append the | ||
| // interleaved list to the end of the pending list by joining them into a | ||
| // single, circular list. | ||
| if (interleavedQueues !== null) { | ||
| for (let i = 0; i < interleavedQueues.length; i++) { | ||
| const queue = interleavedQueues[i]; | ||
| const lastInterleavedUpdate = queue.interleaved; | ||
| if (lastInterleavedUpdate !== null) { | ||
| queue.interleaved = null; | ||
| const firstInterleavedUpdate = lastInterleavedUpdate.next; | ||
| const lastPendingUpdate = queue.pending; | ||
| if (lastPendingUpdate !== null) { | ||
| const firstPendingUpdate = lastPendingUpdate.next; | ||
| lastPendingUpdate.next = (firstInterleavedUpdate: any); | ||
| lastInterleavedUpdate.next = (firstPendingUpdate: any); | ||
| } | ||
| queue.pending = (lastInterleavedUpdate: any); | ||
| } | ||
| } | ||
| interleavedQueues = null; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.