Deprecated findDOMNode warning in StrictMode - originating from react-transition-group

What you were expecting:

Code from the tutorial at https://marmelab.com/react-admin/Tutorial.html to run cleanly.

What happened instead:

Deprecation warning is printed to the console:

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://fb.me/react-strict-mode-find-node

Steps to reproduce:

• Follow the tutorial up to and including “Mapping API Endpoints With Resources”
• Cause a CSS transition, e.g. by hovering the “Users” link in the sidebar

Other information:

The warning comes from the react-transition-group version imported by ra-ui-materialui (^2.2.1, currently resolving to 2.9.0). Until recently, react-transition-group used findDOMNode, which is deprecated from React 16.6.0.

The bug in react-transition-group was fixed recently (https://github.com/reactjs/react-transition-group/issues/429) but not yet released. It would be nice if ra-ui-materialui could depend on react-transition-group@4 so when the fix is released, it will be picked up automatically. @material-ui/core already depends on react-transition-group@4.3.0 internally so I believe there would not be any issue.

Environment

• React-admin version: 3.3.2
• Last version that did not exhibit the issue (if applicable):
• React version: 16.13.1
• Browser: Chromium 80.0.3987.149
• Stack trace (in case of a JS error):

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://fb.me/react-strict-mode-find-node
    in div (created by Transition)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by ForwardRef(Popper))
    in div (created by ForwardRef(Popper))
    in ForwardRef(Portal) (created by ForwardRef(Popper))
    in ForwardRef(Popper) (created by ForwardRef(Tooltip))
    in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
    in WithStyles(ForwardRef(Tooltip)) (created by DatagridHeaderCell)
    in th (created by ForwardRef(TableCell))
    in ForwardRef(TableCell) (created by WithStyles(ForwardRef(TableCell)))
    in WithStyles(ForwardRef(TableCell)) (created by DatagridHeaderCell)
    in DatagridHeaderCell (created by shouldUpdate(DatagridHeaderCell))
    in shouldUpdate(DatagridHeaderCell) (created by Datagrid)
    in tr (created by ForwardRef(TableRow))
    in ForwardRef(TableRow) (created by WithStyles(ForwardRef(TableRow)))
    in WithStyles(ForwardRef(TableRow)) (created by Datagrid)
    in thead (created by ForwardRef(TableHead))
    in ForwardRef(TableHead) (created by WithStyles(ForwardRef(TableHead)))
    in WithStyles(ForwardRef(TableHead)) (created by Datagrid)
    in table (created by ForwardRef(Table))
    in ForwardRef(Table) (created by WithStyles(ForwardRef(Table)))
    in WithStyles(ForwardRef(Table)) (created by Datagrid)
    in Datagrid (created by component)
    in component
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by ListView)
    in div (created by ListView)
    in div (created by ListView)
    in ListView (created by ListViewGuesser)
    in ListViewGuesser (created by ListGuesser)
    in ListGuesser (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at App.tsx:8)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Context.Consumer)
    in Route (created by CoreAdminUI)
    in Switch (created by CoreAdminUI)
    in CoreAdminUI (created by AdminUI)
    in AdminUI (created by Admin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdminContext)
    in TranslationProvider (created by CoreAdminContext)
    in Provider (created by CoreAdminContext)
    in CoreAdminContext (created by AdminContext)
    in AdminContext (created by Admin)
    in Admin (at App.tsx:7)
    in App (at src/index.tsx:9)
    in StrictMode (at src/index.tsx:8)

[herman-the-worm]

Any timeline on this issue?

We are using react-admin for an admin panel for our client and want to ensure that this would go away at some point.

Is there any workaround at the moment?

@fzaninotto

[rockallite]

I’m still having this issue with react-admin@3.12.0, ra-ui-materialui@3.12.0 and react-transition-group@4.4.1.

Console stack trace:

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 (http://example.localmachine:4000/static/js/0.chunk.js:189601:30)
    at Grow (http://example.localmachine:4000/static/js/0.chunk.js:13403:24)
    at div
    at Portal (http://example.localmachine:4000/static/js/0.chunk.js:21748:24)
    at Popper (http://example.localmachine:4000/static/js/0.chunk.js:21427:24)
    at Tooltip (http://example.localmachine:4000/static/js/0.chunk.js:32019:28)
    at WithStyles(ForwardRef(Tooltip)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at th
    at TableCell (http://example.localmachine:4000/static/js/0.chunk.js:28983:28)
    at WithStyles(ForwardRef(TableCell)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at DatagridHeaderCell (http://example.localmachine:4000/static/js/0.chunk.js:147653:25)
    at tr
    at TableRow (http://example.localmachine:4000/static/js/0.chunk.js:29944:23)
    at WithStyles(ForwardRef(TableRow)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at thead
    at TableHead (http://example.localmachine:4000/static/js/0.chunk.js:29344:23)
    at WithStyles(ForwardRef(TableHead)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at table
    at Table (http://example.localmachine:4000/static/js/0.chunk.js:28602:23)
    at WithStyles(ForwardRef(Table)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at http://example.localmachine:4000/static/js/0.chunk.js:147190:83
    at div
    at Paper (http://example.localmachine:4000/static/js/0.chunk.js:20662:23)
    at WithStyles(ForwardRef(Paper)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at Card (http://example.localmachine:4000/static/js/0.chunk.js:5518:23)
    at WithStyles(ForwardRef(Card)) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at div
    at div
    at ListView (http://example.localmachine:4000/static/js/0.chunk.js:146342:23)
    at ListContextProvider (http://example.localmachine:4000/static/js/0.chunk.js:104194:18)
    at List (http://example.localmachine:4000/static/js/0.chunk.js:145925:79)
    at UserList
    at WithPermissions (http://example.localmachine:4000/static/js/0.chunk.js:102560:23)
    at Route (http://example.localmachine:4000/static/js/0.chunk.js:188253:29)
    at Switch (http://example.localmachine:4000/static/js/0.chunk.js:188455:29)
    at ResourceContextProvider (http://example.localmachine:4000/static/js/0.chunk.js:110869:21)
    at ResourceRoutes (http://example.localmachine:4000/static/js/0.chunk.js:110735:17)
    at Resource (http://example.localmachine:4000/static/js/0.chunk.js:110807:15)
    at Route (http://example.localmachine:4000/static/js/0.chunk.js:188253:29)
    at Switch (http://example.localmachine:4000/static/js/0.chunk.js:188455:29)
    at RoutesWithLayout (http://example.localmachine:4000/static/js/0.chunk.js:110913:21)
    at div
    at main
    at div
    at div
    at LayoutWithoutTheme (http://example.localmachine:4000/static/js/0.chunk.js:143767:24)
    at WithStyles(LayoutWithoutTheme) (http://example.localmachine:4000/static/js/0.chunk.js:41857:31)
    at withRouter(WithStyles(LayoutWithoutTheme)) (http://example.localmachine:4000/static/js/0.chunk.js:188510:37)
    at Connect(withRouter(WithStyles(LayoutWithoutTheme))) (http://example.localmachine:4000/static/js/0.chunk.js:185411:75)
    at ThemeProvider (http://example.localmachine:4000/static/js/0.chunk.js:40559:24)
    at Layout (http://example.localmachine:4000/static/js/0.chunk.js:143885:26)
    at Route (http://example.localmachine:4000/static/js/0.chunk.js:188253:29)
    at Switch (http://example.localmachine:4000/static/js/0.chunk.js:188455:29)
    at div
    at CoreAdminRouter (http://example.localmachine:4000/static/js/0.chunk.js:110378:87)
    at Route (http://example.localmachine:4000/static/js/0.chunk.js:188253:29)
    at Switch (http://example.localmachine:4000/static/js/0.chunk.js:188455:29)
    at CoreAdminUI (http://example.localmachine:4000/static/js/0.chunk.js:110587:15)
    at AdminUI
    at Router (http://example.localmachine:4000/static/js/0.chunk.js:187888:30)
    at ConnectedRouter (http://example.localmachine:4000/static/js/0.chunk.js:63774:7)
    at ConnectedRouterWithContext (http://example.localmachine:4000/static/js/0.chunk.js:63879:25)
    at Connect(ConnectedRouterWithContext) (http://example.localmachine:4000/static/js/0.chunk.js:185411:75)
    at TranslationProvider (http://example.localmachine:4000/static/js/0.chunk.js:118568:28)
    at Provider (http://example.localmachine:4000/static/js/0.chunk.js:185124:20)
    at CoreAdminContext (http://example.localmachine:4000/static/js/0.chunk.js:110143:25)
    at AdminContext
    at Admin (http://example.localmachine:4000/static/js/0.chunk.js:150314:22)
    at App