Material-UI: too many re-renders. The layout is unstable.

[aryzing]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When typing a large input into a <TextField>, eventually the following error pops up in the console

Material-UI: too many re-renders. The layout is unstable.
TextareaAutosize limits the number of renders to prevent an infinite loop.

Expected Behavior 🤔

For this to not happen

Steps to Reproduce 🕹

Just type a lot into the <TextField>.

Context 🔦

Just trying to write a long input into <TextField>.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.5
React	16.13.0
Browser	Firefox 74
TypeScript	3.8.3

[oliviertassinari]

Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[Sharealikelicence]

For anyone else that comes across this issue while searching for a solution to the above error, it could be that you are passing in event handlers like this:
<TextField onInput={handleOnInput} value={someValue} />
Try changing them to this:
<TextField onInput={(e) => handleOnInput(e)} value={someValue} />

[oliviertassinari]

It's to be noted that there is a regression in React 18 compared to React 17. Compare:

React 17.0.2: https://codesandbox.io/s/multilinetextfields-demo-material-ui-forked-nux4ft?file=/index.tsx
React 18.1.0: https://codesandbox.io/s/multilinetextfields-demo-material-ui-forked-2q078p?file=/index.tsx

Something prevents the height to be correct. I have locked this issue so we don't mix two different problems (having the same warning symptoms). This #20106 issue is about finding CSS/DOM cases that lead to a wrong layout computation, not a React 18 regression. Opening a new issue for the latter problem would be great.