[TextareaAutosize] Fix warnings for too many renders in React 18 #33253
Conversation
| }, [maxRows, minRows, props.placeholder]); | ||
| }, [getUpdatedState]); | ||
|
|
||
| const syncHeightWithFlushSycn = () => { |
There was a problem hiding this comment.
This is basically the same function as syncHeight, it is just using flushSync for updating the state. We cannot and shouldn't use flushSync in all other cases where we are synching the height, so we are using the same method as before.
mnajdova
added
bug 🐛
| return; | ||
| } | ||
|
|
||
| // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering |
There was a problem hiding this comment.
I know you're nerd-sniping me because I'm pretty sure this should be fixed with some experimental features 😛 On vacation now but I'll definitely take a look later because having to reach for flushSync every time you're in a ResizeObserver callback seems odd and something you often miss unless you've encountered this bug.
There was a problem hiding this comment.
Haha it's not intentional, but yes, I agree it's strange and should be fixed once someone is back from vacation 😁 Just kidding, but really looks like a strange requirement and more importanly is not easy to capture the bugs or create reliable tests.
mnajdova
changed the title
|
FYI for reproductions try to pin dependency versions. I wanted to revisit these repros but they all use |
|
Test case added in #38728 |
The issue is similar to the Masonry's flickering issue, solved in #33163 It is about using
flushSyncwhen doing state updates in resize observer.Fixes #33081
Closes #32783
facebook/react#24331
Before (v5.8.6)
React 18 💥
Codesandbox: https://codesandbox.io/s/multilinetextfields-demo-material-ui-forked-w47ngg?file=/package.json
*note that console warnings when updating the value in some of the input fields.
React 17 ✅
Codesandbox: https://codesandbox.io/s/multilinetextfields-demo-material-ui-forked-bjxcy9?file=/package.json
After
React 18 ✅
Codesandbox: https://codesandbox.io/s/multilinetextfields-demo-material-ui-forked-br9h2h?file=/demo.tsx
React 17 ✅
Codesandbox: https://codesandbox.io/s/multilinetextfields-demo-material-ui-forked-etpepf?file=/package.json