mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.56k stars 1.33k forks source link

[data grid] autosizeOnMount renders twice causing autosize blink #15044

Open nphmuller opened 1 month ago

nphmuller commented 1 month ago

Steps to reproduce

Link to live example: (required) https://stackblitz.com/edit/react-jisqwk?file=Demo.tsx

Steps: Just open the link

Repro

Current behavior

You can see an initial render where the columns are not sized correctly, and very quickly it re-renders with the columns sizes calculated correctly.

Expected behavior

The initial render that already shows all data should ideally be auto sized already.

Context

No response

Your environment

(My current env uses MUI-X DataGrid v6, but I also tried v7 and the issue also occurs there)

npx @mui/envinfo ``` System: OS: macOS 15.0 Binaries: Node: 20.13.0 - ~/.nvm/versions/node/v20.13.0/bin/node npm: 10.8.3 - ~/.nvm/versions/node/v20.13.0/bin/npm pnpm: 9.6.0 - ~/Library/pnpm/pnpm Browsers: Chrome: 129.0.6668.101 Edge: Not Found Safari: 18.0 npmPackages: @emotion/react: ^11.10.5 => 11.13.3 @emotion/styled: ^11.10.5 => 11.13.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.14.19 => 5.16.7 @mui/lab: ^5.0.0-alpha.162 => 5.0.0-alpha.173 @mui/material: ^5.14.20 => 5.16.7 @mui/material-nextjs: ^5.15.3 => 5.16.6 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.17 @mui/utils: 5.16.6 @mui/x-data-grid: 6.20.4 @mui/x-data-grid-pro: ^6.18.4 => 6.20.4 @mui/x-date-pickers: 6.20.2 @mui/x-date-pickers-pro: ^6.18.4 => 6.20.2 @mui/x-license-pro: 6.10.2 @types/react: ^18 => 18.3.9 react: ^18 => 18.3.1 react-dom: ^18 => 18.3.1 typescript: ^5 => 5.6.2 ```

Search keywords: datagrid data grid autosizeOnMount Autosizing

KenanYusuf commented 1 month ago

This flicker is undesirable - will add this issue to the board to discuss with the team about potential solutions.