[TextareaAutosize] Prevent "Maximum update depth exceeded"

[SofianeDjellouli]

Hi,

This is a fix for this issue. It seems that adding an empty array of dependencies to useEnhancedEffect fixes it.

• I have followed (at least) the PR section of the contributing guide.

Closes #17672

[mui-pr-bot]

Details of bundle changes.

Comparing: 08e7bf5...3224f96

bundle	Size Change	Size	Gzip Change	Gzip
TextField	▲ +116 B (+0.09% )	126 kB	▲ +42 B (+0.11% )	36.7 kB
Input	▲ +116 B (+0.16% )	73 kB	▲ +40 B (+0.18% )	22.8 kB
InputBase	▲ +116 B (+0.16% )	71.1 kB	▲ +39 B (+0.17% )	22.3 kB
TablePagination	▲ +116 B (+0.08% )	144 kB	▲ +39 B (+0.09% )	42 kB
TextareaAutosize	▲ +116 B (+2.26% )	5.24 kB	▲ +39 B (+1.82% )	2.18 kB
@material-ui/core	▲ +116 B (+0.03% )	362 kB	▲ +38 B (+0.04% )	98.9 kB
FilledInput	▲ +116 B (+0.16% )	74 kB	▲ +38 B (+0.17% )	23 kB
OutlinedInput	▲ +116 B (+0.15% )	75 kB	▲ +38 B (+0.16% )	23.4 kB
NativeSelect	▲ +116 B (+0.15% )	77.3 kB	▲ +37 B (+0.15% )	24.4 kB
Select	▲ +116 B (+0.10% )	117 kB	▲ +37 B (+0.11% )	34.7 kB
@material-ui/core[umd]	▲ +112 B (+0.04% )	318 kB	▲ +48 B (+0.05% )	92 kB
@material-ui/lab	--	194 kB	--	57.2 kB
@material-ui/styles	--	51.4 kB	--	15.4 kB
@material-ui/system	--	16.5 kB	--	4.32 kB
Alert	--	83.8 kB	--	26.3 kB
AlertTitle	--	64.5 kB	--	20.3 kB
AppBar	--	64.4 kB	--	20.2 kB
Autocomplete	--	132 kB	--	41.4 kB
Avatar	--	65.6 kB	--	20.7 kB
AvatarGroup	--	62.6 kB	--	19.7 kB
Backdrop	--	68.2 kB	--	21.1 kB
Badge	--	65.7 kB	--	20.4 kB
BottomNavigation	--	62.7 kB	--	19.7 kB
BottomNavigationAction	--	75.9 kB	--	24 kB
Box	--	72.2 kB	--	21.9 kB
Breadcrumbs	--	68.1 kB	--	21.4 kB
Button	--	80.1 kB	--	24.5 kB
ButtonBase	--	74.4 kB	--	23.3 kB
ButtonGroup	--	83.6 kB	--	25.6 kB
Card	--	63.2 kB	--	19.8 kB
CardActionArea	--	75.5 kB	--	23.8 kB
CardActions	--	62.4 kB	--	19.6 kB
CardContent	--	62.3 kB	--	19.5 kB
CardHeader	--	65.4 kB	--	20.6 kB
CardMedia	--	62.7 kB	--	19.7 kB
Checkbox	--	83.4 kB	--	26.3 kB
Chip	--	83 kB	--	25.4 kB
CircularProgress	--	64.4 kB	--	20.3 kB
ClickAwayListener	--	3.91 kB	--	1.55 kB
Collapse	--	68.4 kB	--	21.2 kB
colorManipulator	--	3.88 kB	--	1.52 kB
Container	--	63.5 kB	--	19.9 kB
CssBaseline	--	62.3 kB	--	19.6 kB
Dialog	--	83.4 kB	--	26 kB
DialogActions	--	62.4 kB	--	19.6 kB
DialogContent	--	62.6 kB	--	19.6 kB
DialogContentText	--	64.4 kB	--	20.2 kB
DialogTitle	--	64.6 kB	--	20.3 kB
Divider	--	63 kB	--	19.8 kB
docs.landing	--	56.8 kB	--	15.6 kB
docs.main	--	604 kB	--	196 kB
Drawer	--	85.2 kB	--	25.9 kB
ExpansionPanel	--	72.7 kB	--	22.7 kB
ExpansionPanelActions	--	62.4 kB	--	19.6 kB
ExpansionPanelDetails	--	62.3 kB	--	19.5 kB
ExpansionPanelSummary	--	78.5 kB	--	24.8 kB
Fab	--	77.2 kB	--	24.1 kB
Fade	--	23.6 kB	--	8.01 kB
FormControl	--	64.8 kB	--	20.2 kB
FormControlLabel	--	65.9 kB	--	20.6 kB
FormGroup	--	62.3 kB	--	19.6 kB
FormHelperText	--	63.7 kB	--	20 kB
FormLabel	--	63.8 kB	--	19.8 kB
Grid	--	65.4 kB	--	20.5 kB
GridList	--	62.8 kB	--	19.7 kB
GridListTile	--	64.1 kB	--	20.1 kB
GridListTileBar	--	63.6 kB	--	19.9 kB
Grow	--	24.2 kB	--	8.22 kB
Hidden	--	66.3 kB	--	20.8 kB
Icon	--	63.1 kB	--	19.8 kB
IconButton	--	76.5 kB	--	23.9 kB
InputAdornment	--	65.4 kB	--	20.6 kB
InputLabel	--	65.7 kB	--	20.5 kB
LinearProgress	--	65.7 kB	--	20.5 kB
Link	--	67 kB	--	21.1 kB
List	--	62.7 kB	--	19.6 kB
ListItem	--	77.5 kB	--	24.2 kB
ListItemAvatar	--	62.5 kB	--	19.5 kB
ListItemIcon	--	62.5 kB	--	19.6 kB
ListItemSecondaryAction	--	62.3 kB	--	19.5 kB
ListItemText	--	65.3 kB	--	20.5 kB
ListSubheader	--	63.1 kB	--	19.8 kB
Menu	--	89.1 kB	--	27.4 kB
MenuItem	--	78.6 kB	--	24.5 kB
MenuList	--	66.4 kB	--	20.8 kB
MobileStepper	--	68.2 kB	--	21.4 kB
Modal	--	14.5 kB	--	5.04 kB
NoSsr	--	2.19 kB	--	1.04 kB
Pagination	--	85.5 kB	--	26.3 kB
PaginationItem	--	81.2 kB	--	25 kB
Paper	--	62.7 kB	--	19.6 kB
Popover	--	83.5 kB	--	25.8 kB
Popper	--	28.8 kB	--	10.3 kB
Portal	--	2.92 kB	--	1.3 kB
Radio	--	84.4 kB	--	26.6 kB
RadioGroup	--	64.8 kB	--	20.1 kB
Rating	--	70.8 kB	--	22.8 kB
RootRef	--	4.24 kB	--	1.64 kB
ScopedCssBaseline	--	63.2 kB	--	19.9 kB
Skeleton	--	63.3 kB	--	20 kB
Slide	--	25.7 kB	--	8.74 kB
Slider	--	77 kB	--	24.2 kB
Snackbar	--	75.7 kB	--	23.7 kB
SnackbarContent	--	63.9 kB	--	20.1 kB
SpeedDial	--	86.6 kB	--	27.3 kB
SpeedDialAction	--	119 kB	--	37.6 kB
SpeedDialIcon	--	64.9 kB	--	20.3 kB
Step	--	63 kB	--	19.8 kB
StepButton	--	82.7 kB	--	26.2 kB
StepConnector	--	63.1 kB	--	19.9 kB
StepContent	--	69.5 kB	--	21.8 kB
StepIcon	--	65 kB	--	20.3 kB
StepLabel	--	69 kB	--	21.7 kB
Stepper	--	65.2 kB	--	20.6 kB
styles/createMuiTheme	--	16.6 kB	--	5.85 kB
SvgIcon	--	63.4 kB	--	19.8 kB
SwipeableDrawer	--	92.6 kB	--	28.9 kB
Switch	--	82.5 kB	--	26 kB
Tab	--	76.7 kB	--	24.3 kB
Table	--	62.9 kB	--	19.7 kB
TableBody	--	62.4 kB	--	19.5 kB
TableCell	--	64.4 kB	--	20.3 kB
TableContainer	--	62.3 kB	--	19.5 kB
TableFooter	--	62.5 kB	--	19.5 kB
TableHead	--	62.4 kB	--	19.5 kB
TableRow	--	62.8 kB	--	19.7 kB
TableSortLabel	--	77.8 kB	--	24.4 kB
Tabs	--	85.8 kB	--	27.2 kB
ToggleButton	--	76.5 kB	--	24.2 kB
ToggleButtonGroup	--	63.5 kB	--	20 kB
Toolbar	--	62.7 kB	--	19.7 kB
Tooltip	--	103 kB	--	32.4 kB
TreeItem	--	74.3 kB	--	23.5 kB
TreeView	--	67 kB	--	21.1 kB
Typography	--	64 kB	--	20 kB
useAutocomplete	--	14.7 kB	--	5.31 kB
useMediaQuery	--	2.58 kB	--	1.06 kB
Zoom	--	23.6 kB	--	8.12 kB

Generated by 🚫 dangerJS against 3224f96

[oliviertassinari]

@SofianeDjellouli The motivation of the proposed solution was to bound the number of rerendering, to void a layout instability to crash the whole application. How does the change relate to it?

[SofianeDjellouli]

@oliviertassinari By setting overflow: hidden as the state for the first line, it avoids changing from nothing to overflow: hidden when we switch to the second line. This was causing the rerenderings. Even in Chrome but there was only one rerendering. The problem may come from the way IE handles the overflow property.
The first solution I proposed worked also but it didn't pass some of the tests.

[oliviertassinari]

@SofianeDjellouli Do you have a reproduction for this problem? I really think that we should first focus on scoping the potential scale of the worth case, from crashing the app to a wrong display. Then we could look into how we can better handle IE 11. Would it work for you?

[SofianeDjellouli]

@oliviertassinari Which problem do you want to reproduce? I think that with this change, it prevents the app from crashing and it handles IE 11.

[oliviertassinari]

Which problem do you want to reproduce?

@SofianeDjellouli The problem this change fix :). Is it related to the stackblitz reproduction provided in #17672?

[oliviertassinari]

@SofianeDjellouli I have updated the pull request with the bounding approach I was proposing. Could you have a look at it :). Does it solve your problem?

[oliviertassinari]

I'm going ahead with the bounding logic. We should be able to keep iterate on it :).

[SofianeDjellouli]

This approach may solve the issue although I think it's more complicated that what I was proposing.