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

[KyleAsaff]

I'm getting a warning in my console output since changing my class based React component to a functional component (with React hooks).

index.js:1446 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 `ReactTimeout`.
    in Tile (created by ReactTimeout)
    in ReactTimeout (created by Context.Consumer)
    in WithTheme(ReactTimeout) (at LiveDisplay.js:163)
    in div (created by Context.Consumer)
    in StyledComponent (created by LiveDisplay__LiveDisplayGrid)
    in LiveDisplay__LiveDisplayGrid (at LiveDisplay.js:198)
    in div (created by Context.Consumer)
    in StyledComponent (created by LiveDisplay__LiveDisplayWrapper)
    in LiveDisplay__LiveDisplayWrapper (at LiveDisplay.js:197)
    in ThemeProvider (at LiveDisplay.js:196)
    in LiveDisplay (at requireContent.js:63)
    in ComposedComponent (created by ConnectFunction)
    in ConnectFunction (created by ConnectFunction)
    in ConnectFunction (at App.js:11)
    in div (at App.js:10)
    in Provider (at App.js:9)
    in App (at src/index.js:7)

This only occurs when I wrap my functional component in React with ReactTimeout

export default ReactTimeout(Tile);

The warning does not seem to break anything so I am wondering what is causing it and if it's non-breaking how to suppress it? I am not using Refs in my component.

[plougsgaard]

Thanks for bringing this up.

I haven't yet tested the library with React Hooks so I'm not sure how/if it works. Thinking it would be better to have the timeout API exposed as hooks.

This is a good article on it by Dan Abramov:

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

[darklightblue]

I am encountering the same issue using this - tho it seems to not do any harm - side note on that Dan Abramov article - I was using https://overreacted.io/making-setinterval-declarative-with-react-hooks/ hooks before using react-timeout instead as that hook got some weird race condition if used multiple times on different component at the same time.

[plougsgaard]

This is the same as #119 - tracking changes there instead.