sotarules
commented
2 years ago Friends, I have what I believe is the same issue, but in my case I'm animating a slide transition from right-to-left using 3D translate affecting the X value.
The "new" component enters from the right, while the "old" component simultaneously exits to the left.
What I'm seeing a perfectly executed transition until the very end, and then you see a brief flash of the old exiting component superimposed over the newly-entered component.
In theory, it should be impossible to see the old exited component at the end of the animation because the 3D translate rules, if processed as designed, would mean the exited component X value would place the old component 100% off screen. There should be no way to "see" the brief flash of the old exited component.
I am confident that the cause of this problem is the React 18 update batching, because I've been able to ameliorate the problem by doing the safeSetState using flushSync.
IMPORTANT: It is apparently only necessary to "wrap" the nextState value of exited with flushSync; all other nextState values (entering, entered, exiting) can be done using setState in the normal manner.
I believe that state-transitions exiting and exited are being erroneously combined into a single batch update by React 18.
This cannot be permitted, or the animation will be impacted.
The updates for exiting and exited must not be batched.
It is necessary to fully process the exiting state before setting exited state.
I hope this makes sense, this stuff is very complicated and hard to get your head around. Here is my fix.
safeSetState(nextState, callback) {
// This shouldn't be necessary, but there are weird race conditions with
// setState callbacks and unmounting in testing, so always make sure that
// we can cancel any pending setState callbacks after we unmount.
callback = this.setNextCallback(callback)
this.setStateConditionalFlushSync(nextState, callback)
}
/**
* Prevent React 18 from batching updates.
*
* @param {object} nextState Next state object.
* @param {function} callback Post-set callback.
*/
setStateConditionalFlushSync(nextState, callback) {
console.log(`Transition.js setStateConditionalFlushSync nextState=${JSON.stringify(nextState)}`)
if (nextState?.status !== "exited") {
console.log(`Transition.js setStateConditionalFlushSync *imperative* nextState=${JSON.stringify(nextState)}`)
this.setState(nextState, callback)
return
}
flushSync(() => {
console.log(`Transition.js setStateConditionalFlushSync *flushSync* nextState=${JSON.stringify(nextState)}`)
this.setState(nextState, callback)
})
}
tranvansang
jcampuza
asapach
ermolaev-unlimint
sergei-startsev
What is the current behavior?
When clicking the button
What is the expected behavior?
Phase 3 shouldn't exist in react 18 renderer.
Could you provide a CodeSandbox demo reproducing the bug?
In demo's index.js, try changing
legacyReactvalue to switch react 18 behavhttps://user-images.githubusercontent.com/13043196/162848290-d2c339e7-ec75-45e3-84e0-298a6ea092e1.mp4
ior.
https://codesandbox.io/s/wonderful-glade-n0n92s?file=%2Fsrc%2Findex.js