-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[core] Add React 18 to peer dependencies #4332
Conversation
These are the results for the performance tests:
|
fcab9c8
to
850295a
Compare
updateRenderContext(nextRenderContext); | ||
// Prevents batching render context changes | ||
ReactDOM.flushSync(() => { | ||
updateRenderContext(nextRenderContext); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixes the following glitch:
From what I found, React 18 doesn't commit some renders if they take too much time. But, no matter the case, we update the render zone position so the position ends not matching the context rendered. Flushing the tree ensures that no render will be skipped. facebook/react#18402 (comment)
Updating the position inside React.useLayoutEffect
also didn't work quite well. Here's the result:
I would like to see how other virtualization libraries will solve this problem. Until there we have to use this workaround. If you have suggestions to improve this please comment.
// To prevent flickering, the inner position can only be updated after the new context has | ||
// been rendered. ReactDOM.flushSync ensures that the state changes will happen before | ||
// updating the position. | ||
ReactDOM.flushSync(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could not find any issues, I guess we will have better feedbacks once the community start using it
Should we start using React 18 in our docs? This may help to discover issues sooner. What do you think? |
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
@cherniavskii I'm waiting for the core to update first. Keeping two versions of React may not work correctly. Once the core updates we can merge #4155. |
Thank you and i'm glad to see these amazing changes. Thanks |
@jeveloper No, the latest version of |
CodeSandbox: https://codesandbox.io/s/datagridprodemo-material-demo-forked-qvr2t0?file=/demo.tsx
In the comments, I explain the changes I had to make. I updated the peer deps of the date picker components but I don't know if they are compatible, are they? We didn't really test it in React 18 so one way to review this PR could be to open the example above and check if all features still work as expected. The tests are passing in React 18. #4155