useTransition improvements #17411
Closed
useTransition improvements #17411
Conversation
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
The `isPending` state managed by the `useTransition` queue can be modeled using the same queue as useState/useReducer; that's how it's implemented today. However, since there's only ever a single pending transition per `useTransition` hook, and the most recent one always wins, we don't really need to maintain an entire queue structure. This replaces the internal `useState` queue with a specialized implementation. It tracks the most recent transition expiration time on shared instance object, and the last processed expiration time on each hook copy. When the processed expiration time catches up to the pending one, we know that the transition is no longer pending. At a high level, this is also how the `useState` queue works, but without the overhead of an actual queue. The implementation is also inspired by Suspense boundaries, which also have an internal state for whether the boundary is displaying a fallback, but does not use an actual queue to manage that state.
When multiple transitions update the same queue, only the most recent one should be considered pending. Example: If I switch tabs multiple times, only the last tab I click should display a pending state (e.g. an inline spinner).
Details of bundled changes.Comparing: a7d07ff...162454b react-dom
react-native-renderer
react-test-renderer
react-art
react-reconciler
ReactDOM: size: 0.0%, gzip: 0.0% Size changes (experimental) |
Details of bundled changes.Comparing: a7d07ff...162454b react-reconciler
react-dom
react-art
react-test-renderer
react-native-renderer
ReactDOM: size: 🔺+1.2%, gzip: 🔺+1.7% Size changes (stable) |
acdlite
force-pushed
the
transitions
branch
2 times, most recently
from
ce6ac38
to
10ea752
Compare
When multiple transitions update the same queue, only the most recent one should be allowed to finish. Do not display intermediate states. For example, if you click on multiple tabs in quick succession, we should not switch to any tab that isn't the last one you clicked.
acdlite
commented
Nov 21, 2019
| @@ -1299,6 +1309,16 @@ function handleError(root, thrownValue) { | |||
| stopProfilerTimerIfRunningAndRecordDelta(workInProgress, true); | |||
| } | |||
|
|
|||
| // TODO: I think it's fine to use instanceof here because this exception | |||
| // is always thrown by the renderer? Or use a brand check. | |||
| if (thrownValue instanceof SuspendOnTask) { | |||
There was a problem hiding this comment.
@sebmarkbage I assume you won't like this but I legit don't know what the best approach is. A brand check seems unnecessary since this is always thrown by the renderer and not across realms or packages.
|
For some reason the CodeSandbox CI job didn't run? Perhaps because I opened it as a draft? I'm going to close and re-open to see if that works. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
(I closed and and re-opened this as #17418)