[TextareaAutosize] prevent redundant state updates

[Yama-Tomo]

fixes: #20106

Fixed an infinite loop caused by the interaction of useEnhancedEffect(useLayoutEffect) and useState by skipping unnecessary state updates.

I have confirmed that this patch works in the following reproduction codes.
#20106 (comment)

NOTE: Applying this change may make it unnecessary to limit the number of renderings in the future 😎
#19743

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 99cef6d

[Yama-Tomo]

@oliviertassinari To reproduce the infinite loop, useEnhancedEffect(useLayoutEffect) would have to be emulated on unit tests(node.js), which would increase the complexity of the test.
Also, the test that counts the number of calls setState, which is the main topic of this changes, knows too many implementation details and is not an ideal test.
I'm just reducing the number of calls setState, so I'm thinking that passing the existing test is sufficient. what test is needed?

[oliviertassinari]

I personally don't understand how the changes make things different from the current state of things (we already have a piece of logic to prune rerenders), nor what problem we are trying to solve, please expand on both.

By "needs test" the minimum required is a way to reproduce the bug. Note that we never merge PRs to fix a bug we didn't reproduce. Also note that our tests infrastructure support browser tests, both running end-to-end and in the browser runtime (preferred).

[Yama-Tomo]

By "needs test" the minimum required is a way to reproduce the bug.

As I mentioned in the PR description, the bug is reproducible. #20106 (comment)

[aeharding]

Found this bug in the wild and it led me here.

This can be easily repro'd on official MUI documentation for the "controlled" multiline textarea when you open in codesandbox.

Repro

1. Visit https://mui.com/material-ui/react-text-field/#multiline
2. Click "Edit in CodeSandbox"
3. Press <enter> to create a new line in the top left textbox.

I would really appreciate a fix getting merged. Thanks.

[oliviertassinari]

@aeharding Great thanks, so it seems to be React 18.1.0 specific. It works correctly on React 17.0.2, proof: #20106 (comment). To figure out what's the root problem. The current diff in the PR makes me think that we are not solving the root problem. Meaning that as soon as we hit a case where the layout is slightly unstable, we would face the same infinite rendering/height out-of-sync problem (the warning only being the tip of the iceberg).

[InumberX]

@oliviertassinari @Yama-Tomo

#32783 (comment)

I still don't know why I get this error in React v18, but it may be a problem with syncHeight() using useEnhancedEffect (useLayoutEffect?) in the following
I changed this to React.useEffect instead of useEnhancedEffect and the error no longer occurs.
Is there any inconvenience in using useEffect?

material-ui/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js

Line 143 in 7ea4c8a

useEnhancedEffect(() => {

useEnhancedEffect(() => {
  syncHeight();
});

↓

React.useEffect(() => {
  syncHeight();
});

This message is written using the translation function.
Sorry if it is difficult to understand.