Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Receiving "Function components cannot be given refs." warning

See original GitHub issue

I’m changing a component that was being wrapped by MenuProvider to a function component, and am getting this warning.

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

It still seems to work, however.

I didn’t see an existing issue for it.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:7 (2 by maintainers)

Top GitHub Comments

7reactions

jmcacommented, Mar 16, 2020

You could use a fragment in a pinch, that’s what I’m currently doing:

<MenuProvider>
    <>
        <SomeFunctionalComp />
    </>
</MenuProvider>

6reactions

renato-bohlercommented, Mar 30, 2020

Apparently setting the storeRef prop to false also removes the warning.

// No warnings :)
<MenuProvider id={event.model.options.id} storeRef={false}>
  <Widget engine={this.engine} model={event.model} />
</MenuProvider>

// Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
<MenuProvider id={event.model.options.id}>
  <Widget engine={this.engine} model={event.model} />
</MenuProvider>