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

Question

I have the following piece of code:

export function MyTextField({ onChange, defaultValue }) {
  return (
    <TextField
      defaultValue={defaultValue}
      onChange={(event) => {
        if (onChange) {
          onChange(event.target.value);
        } else {
          console.log("*no onChange function added*", event.target.value);
        }
      }}
    />
  );
}

//then I use MyTextField in another component

const [recommendations, setRecommendations] = useState(
   (appointment.recommendations) || ""
)
console.log(recommendations) // logs as expected with every onChange

<MyTextField
   defaultValue={recommendations}
   onChange={setRecommendations}
/>

After some 10 or more 'onChange' happen, I get this error on the console:

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

I've read other SO questions suggesting I use a arrow function but I don't think I did this right because the error persists.

Answer 1

I faced a similar issue. In my case, multiline={true} is causing this error. And I found following two approaches would remove that warning.

1. set multiline={false}
2. if multiline={true}, then set rows={some number} to avoid re-rendering of element itself in addition to data.

Answer 2

I found the answer to this actually wasn't anything to do with your code actually doing updates. It's MUI not being able to find stable dimensions for the TextField when using the multiline parameter, as there are too many variables.

In my case it was a TextField with pretty much infinite space around it; MUI didn't know whether to make the input wide or tall!

So I fixed it by using the fullWidth parameter; so it was effectively constrained in a direction.

I hope that helps someone :)