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

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

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}
    />
  )}
/>