@material-ui/core 4.0.0-beta.1 Warning: Function components cannot be given refs.

When using @material-ui/core 4.0.0-beta.1 & mui-datatables 2.0.0 I get the following warning:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Tooltip`.
    in ViewColumnIcon (created by Tooltip)
    in Tooltip (created by WithStyles(Tooltip))
    in WithStyles(Tooltip) (created by l)
    in span (created by ForwardRef(IconButton))
    in button (created by ButtonBase)
    in ButtonBase (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(IconButton))
    in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))
    in WithStyles(ForwardRef(IconButton)) (created by l)
    in l (created by l)
    in div (created by l)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by l)
    in l (created by t)
    in t (created by WithStyles(t))
    in WithStyles(t) (created by t)
    in t (created by t)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by t)
    in t (created by WithStyles(t))

I suspect it has something to do with the fact that the MUI team has changed their components to be functional and use Hooks.

[gabrielliwerant]

@pfarnach Yes, support for v4 is part of the plan. That’s not a bad idea about milestones and/or issues around upgrade necessities. Trying to review some PRs and fix some bugs at the moment, but when I get some time, I can start work on an upgrade roadmap.

[dandrei]

I’ve recently had to add material-ui tooltips to functional components and looks like this does the trick:

• wrapping the exported component in React.forwardRef(/* ... */)
• adding a second parameter after the props (e.g. ref: React.Ref<HTMLButtonElement>)
• passing the ref above to the component included in the functional one

The components that trigger the warning are the mui-datatables toolbar icons (Search, etc.).