[data grid] Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release #13432
Labels
component: data grid
This is the name of the generic UI component, not the React module!
external dependency
Blocked by external dependency, we can’t do anything about it
status: expected behavior
Does not imply the behavior is intended. Just that we know about it and can't work around it
Steps to reproduce
Link to live example: https://github.com/MessiDaGod/react-hydration-error
Steps to reproduce
Table rendering
![Screenshot 2024-06-09 125819](https://private-user-images.githubusercontent.com/28612032/338007172-92f9a090-6909-49f6-ae9c-4d8242b42102.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2NTM1NTYsIm5iZiI6MTcxOTY1MzI1NiwicGF0aCI6Ii8yODYxMjAzMi8zMzgwMDcxNzItOTJmOWEwOTAtNjkwOS00OWY2LWFlOWMtNGQ4MjQyYjQyMTAyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDA5MjczNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNlN2RmNzg2N2MxNGFiY2NjNDNiZGIyZTNmNDUzNzI0YTQ1N2IwYzExZmQxNDFkMWMyMGE3NmU0MGZmOTQ3Y2QmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.cRT7Wr5WFrMJ6vu_TpEZayqc0rFvEgyKa1H-opQU0YM)
Dev tools error
![Screenshot](https://private-user-images.githubusercontent.com/28612032/338007165-7eec3677-93ca-4e83-b87c-84382941ea7c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2NTM1NTYsIm5iZiI6MTcxOTY1MzI1NiwicGF0aCI6Ii8yODYxMjAzMi8zMzgwMDcxNjUtN2VlYzM2NzctOTNjYS00ZTgzLWI4N2MtODQzODI5NDFlYTdjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDA5MjczNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdiN2NjNDZiOTlhZDIxOTZjMDZjMGRjOTBkMzhhMTg0YWJjOWE5M2NiM2ZiYTlkZjg5OTE4MzhiMTNiZTRhYzImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.YLE4TzzLdEgbUXNJsoqmd388R8litWjtN1c_cyiN1w4)
Current behavior
logging error to console
Expected behavior
not logging error to console
Context
get rid of annoying error, eventually fixing the root issue of ref now being a regular prop in react 19
Your environment
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.1 - D:\repos\react-hydration-error\node_modules.bin\npm.CMD
pnpm: 8.15.7 - ~\AppData\Local\pnpm\pnpm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (125.0.2535.92)
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.19
@mui/material: ^5.15.19 => 5.15.19
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-data-grid: ^7.6.2 => 7.6.2
react: ^19.0.0-rc-cc1ec60d0d-20240607 => 19.0.0-rc-f994737d14-20240522
react-dom: ^19.0.0-rc-cc1ec60d0d-20240607 => 19.0.0-rc-f994737d14-20240522
types-react: 19.0.0-rc.0
typescript: ^5.4.5 => 5.4.5
Search keywords: element.ref React 19 React@rc react-dom@rc
The text was updated successfully, but these errors were encountered: