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

• 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

[azouaoui-med]

having the same issue when using <TextField multiline ...

so when the size changes vertically (from adding content to the input) i get this error i also noticed that it happens when controlled

MUI: Too many re-renders. The layout is unstable. 
TextareaAutosize limits the number of renders to prevent an infinite loop.  at TextareaAutosize

codesandbox demo

using @mui/material@5.16.1 and react@18.1.0

[marckornberger]

I just now found a fix for this issue: It wasn’t caused by MUI but by my incorrect usage of react-hook-form.

I assumed using the register method like with native HTML <input /> elements would work fine. With UI Libraries like MUI you should acutally use a Controller to wrap you form fields:

<Controller
  name='name'
  control={control}
  rules={{ required: 'Please enter a name!' }}
  render={({ field }) => (
    <TextField
      label='Name'
      multiline
      rows={3}
      variant='filled'
      {...field}
      disabled={loading}
      error={errors.name!== undefined}
      helperText={errors.name?.message}
    />
  )}
/>