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.