Material-UI/CORE [4.11.4] ReactVirtualizedTable

[bagleyspot]

Hello, if i use the simple code for the ReactVirtualizedTable, without change, i recive this problem:

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Grid which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node div Grid@http://localhost:3000/static/js/vendors~main.chunk.js:85612:81 div Table@http://localhost:3000/static/js/vendors~main.chunk.js:91182:81 div AutoSizer@http://localhost:3000/static/js/vendors~main.chunk.js:83276:81 MuiVirtualizedTable@http://localhost:3000/static/js/main.chunk.js:1351:5 WithStyles@http://localhost:3000/static/js/vendors~main.chunk.js:40032:25 div Paper@http://localhost:3000/static/js/vendors~main.chunk.js:20505:17 WithStyles@http://localhost:3000/static/js/vendors~main.chunk.js:40032:25 ReactVirtualizedTable div Grid@http://localhost:3000/static/js/vendors~main.chunk.js:12460:29 WithStyles@http://localhost:3000/static/js/vendors~main.chunk.js:40032:25 div Grid@http://localhost:3000/static/js/vendors~main.chunk.js:12460:29 WithStyles@http://localhost:3000/static/js/vendors~main.chunk.js:40032:25 div Grid@http://localhost:3000/static/js/vendors~main.chunk.js:12460:29 WithStyles@http://localhost:3000/static/js/vendors~main.chunk.js:40032:25 div Grid@http://localhost:3000/static/js/vendors~main.chunk.js:12460:29 WithStyles@http://localhost:3000/static/js/vendors~main.chunk.js:40032:25 div App@http://localhost:3000/static/js/main.chunk.js:180:19 index.js:1 e index.js:1 React 4 getScrollbarWidth Table.js:163 _setScrollbarWidth Table.js:561 componentDidMount Table.js:175 React 6 unstable_runWithPriority scheduler.development.js:468 React 9 js index.js:7 js main.chunk.js:1858 Webpack 7

[Izhaki]

From the React docs:

findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode.

As more and more frameworks (like next.js) have strict mode enabled by default, you are going to see this error more and more until library maintainers decommission findDOMNode.

React Transition Group is one example, and that error surfaces through MUI's Collapse component:

react_devtools_backend.js:2560 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at div
    at Transition (webpack-internal:///./node_modules/react-transition-group/esm/Transition.js:131:30)
    at Collapse (webpack-internal:///./node_modules/@material-ui/core/esm/Collapse/Collapse.js:70:24)

Your specific case (as the log shows) is not an issue with the MUI library, but with ReactVirtualizedTable instead.

For more details see #13394 and the related card on the roadmap.

[eps1lon]

We've fixed most of our issues in v5. However, react-virtualized is also missing StrictMode compatibility (bvaughn/react-virtualized#1353). I would suggest you subscribe to bvaughn/react-virtualized#1353 if you want to wait for other people to fix it.