[TextareaAutosize] Too many re-renders error when component is mounted with a value which almost but not quite wraps to a new line

[Halvi3]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/multilinetextfields-demo-material-ui-forked-thqdzq

Steps:

1. Load the sandbox, open the console, should see it filled with the error spam from initial render
2. If the errors are not displaying, change the text in the controlled inputs until it completely fills the last line of the text area. In other words, type text until the text wraps to a new line and expands the input, then delete one character at a time until the text and input shrink back to the previous number of lines by only a single character
3. Then, with the text 'almost' wrapping like this, click the show/hide button twice to unmount and remount the multiline textfield components, at which point the errors should appear

Current behavior

When mounted and rendered for the first time in React 18 StrictMode, if the value in a multiline TextField or other multiline input component almost wraps to a new line, the TextareaAutosize handlers will cause an infinite loop and spam the console with 'too many renders' error messages. When the loop is terminated and the layout stabilizes, the TextField will be one line too tall for what the text value actually 'needs' to fit.

At this point, if the autosize calculations are run again for whatever reason (like changing the text value at all, or resizing the screen) the next iteration will complete instantly and correctly and the TextField will snap to the right size, removing the empty line and no longer generating errors

Expected behavior

multiline TextFields or other components using TextareaAutosize should be able to fit to a stable height of their initial text content when first mounted without generating errors, and the height they start at should be correct for the initial text content, even if that text content is close to but not quite wrapping to another line

Context

Our application renders a large editable form representing the profile data of an entity in a knowledge management system. Many of the fields in this form display security data which by policy cannot be truncated and must be shown in their entirety, so workarounds for this issue like setting a maximum or fixed number of rows are not possible, since the users needs to be able to see the full value regardless of it is fit on one line or multiple, without scrolling

When developing locally, hitting 'edit' to bring up this form mounts a large number of fields which generate this error all at once (depending on the data currently populating them), filling the console with the errors in abundance, causing significant performance issues and also making the console impossible to use when trying to diagnose separate issues.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.2.1
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.216
    Edge: Not Found
    Safari: 17.2.1
  npmPackages:
    @emotion/react: ^11.11.0 => 11.11.0
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.31
    @mui/core-downloads-tracker:  5.15.4
    @mui/icons-material: ^5.10.9 => 5.11.16
    @mui/material: 5.15.4 => 5.15.4
    @mui/private-theming:  5.15.4
    @mui/styled-engine:  5.15.4
    @mui/system:  5.15.4
    @mui/types:  7.2.13
    @mui/utils:  5.15.4
    @mui/x-data-grid: ^6.13.0 => 6.16.0
    @mui/x-date-pickers: ^5.0.6 => 5.0.20
    @types/react: ~18.0.2 => 18.0.38
    react: ~18.2.0 => 18.2.0
    react-dom: ~18.2.0 => 18.2.0
    typescript: ~4.5.5 => 4.5.5
    
    browser: chrome Version 120.0.6099.216
    ```
</details>


**Search keywords**: textareaautosize, too many renders

[Anubhav-Vashishtha]

Hello @Halvi3 Can you guide me i am unable to get error messages in the console with your description so please guide me

[Anubhav-Vashishtha]

I am unable to see error messages by following your description so kindly guide me so that i can resolve the issue

[Halvi3]

With some further checking, it appears the erroneous behavior only occurs on Chrome, not Firefox, so that's something to make sure you're using:

Here's a screen recording of the linked code sandbox so you can see I'm not doing any other than the described steps:

[Anubhav-Vashishtha]

Fine , Thank You

[ZeeshanTamboli]

Is this connected to #33081 or #20106? Does this solution resolve the issue?

[Halvi3]

It clearly seems related to those previous issues which were marked as fixed, I presume there were multiple other situations where the same error occurred that might have been fixed in the past, but I was able to narrow down this more specific edge case as one which could consistently reproduce the error even in the most up to date version of MUI (and the edge case that our application was specifically encountering)

The stackoverflow answer you linked does not really resolve the issue, disabling the autosize functionality because its broken doesn't make it... not broken? And in my particular use case for these components, we need the TextField to expand or contract dynamically to however many rows it takes to display the text value, we can't set a fixed number of rows which might leave empty space for short values but overflow with longer values, and disabling multiline entirely is a non-starter

[ZeeshanTamboli]

@Halvi3 You are correct. I investigated this and came up with a solution in #40789. Feel free to check it out.

[c-mella]

@ZeeshanTamboli I saw you pushed an update in #40789 but im still seeing the issue, was there a change on the user side that needed to be made?

[ZeeshanTamboli]

@c-mella Which Material UI version are you using?