dillon1000/react
Commit
Browse files Don't flush synchronous work if we're in the middle of a ViewTransition async sequence (#32760)
Starting a View Transition is an async sequence. Since React can get a sync update in the middle of sequence we sometimes interrupt that sequence. Currently, we don't actually cancel the View Transition so it can just run as a partial. This ensures that we fully skip it when that happens, as well as warn. However, it's very easy to trigger this with just a setState in useLayoutEffect right now. Therefore if we're inside the preparing sequence of a startViewTransition, this delays work that would've normally flushed in a microtask. ~Maybe we want to do the same for Default work already scheduled through a scheduler Task.~ Edit: This was already done. `flushSync` currently will still lead to an interrupted View Transition (with a warning). There's a tradeoff here whether we want to try our best to preserve the guarantees of `flushSync` or favor the animation. It's already possible to suspend at the root with `flushSync` which means it's not always 100% guaranteed to commit anyway. We could treat it as suspended. But let's see how much this is a problem in practice.
Changed paths11 files
First-parent comparisonfixtures/view-transition/src/components/Page.js ModifiedM packages/react-art/src/ReactFiberConfigART.js ModifiedM packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js ModifiedM packages/react-native-renderer/src/ReactFiberConfigNative.js ModifiedM packages/react-noop-renderer/src/createReactNoop.js ModifiedM packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js ModifiedM packages/react-reconciler/src/ReactFiberGestureScheduler.js ModifiedM packages/react-reconciler/src/ReactFiberRootScheduler.js ModifiedM packages/react-reconciler/src/ReactFiberWorkLoop.js ModifiedM packages/react-reconciler/src/forks/ReactFiberConfig.custom.js ModifiedM packages/react-test-renderer/src/ReactFiberConfigTestHost.js ModifiedPatch
Files changed
Rendering syntax-highlighted changes…