react-redux v.7 doesn't allow refs on connected components

[jeremygottfried]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When I updated to the latest version of react-redux, I started seeing the following warning on many of my connected components.

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

React doesn't allow refs on functional components, so any components that were accessed with a ref in past react-redux versions are now broken.

What is the expected behavior?
My connected components that were previously exposed with refs would still be able to have a ref.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux? react v.16.8.6, react-dom v.16.8.6, react-redux v.7.0.3

[markerikson]

First, function components cannot have refs.

With React-Redux specifically:

• in v5 and earlier, you have to add the withRef: true option to connect(), put a ref on the Connect(MyComponent) wrapper, and then call wrapperComponent.getWrappedInstance()
• in v6 and v7, you have to add the forwardRef : true option to connect(), and the ref that you put on the Connect(MyComponent) wrapper will actually be the instance of MyComponent

If you are not supplying the forwardRef option in v6/7, then I would expect the ref to be applied to the internal wrapper component, which is now a function component, and thus you're getting that error message.

So, make sure you're passing {forwardRef : true} to connect(), and things should work okay.

[jeremygottfried]

Yes. I intended to access the internal wrapper component, and I was previously on v5.

If you are not supplying the forwardRef option in v6/7, then I would expect the ref to be applied to the internal wrapper component, which is now a function component, and thus you're getting that error message.

I guess I will have to refactor some code to get it to work the same way.

[markerikson]

Basically, change withRef to forwardRef, and then delete the .getWrappedInstance() part of componentRef.getWrappedInstance(). componentRef is your own component now.

[sktguha]

@markerikson I am curious to know why forwardRef: true option in not enabled by default when doing react- redux connect or maybe even a warning can be shown by react-redux that unless forwardRef: true is given the ref won't connect. If it is ok to do so, then I would love to work on this

[timdorr]

There is a performance penalty and most folks don't need it.

[markerikson]

Yep. It's an extra layer of wrapping, and refs are very rarely used.

[sktguha]

ok In that case, if the connected component detects that a ref is being passed, then atleast it should show a warning that unless forwardRef: true option is given the ref won't be connected. I am saying this because yesterday I lost around 3 hours of work, wondering why my refs are not getting a value.
If ok, then I would love to work on this .

[timdorr]

Refs are never sent as props to the component, so it's not possible to know if your caller has used them or not.

[sktguha]

Oh interesting. But in that case how does the forwardRef: true option works ?

[markerikson]

By adding that extra wrapping layer I talked about, through use of React.forwardRef.

[jeremygottfried]

Oh interesting. But in that case how does the forwardRef: true option works ?

@sktguha forwardRef: true is an option passed in the 4th argument of the connect function.

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

[sktguha]

@markerikson In that case in dev mode , we can always use the extra wrapping layer and can read the ref argument's current value to detect if a ref is passed. I have got a basic working example here https://codesandbox.io/s/react-playground-kmv1c?file=/index.js

[timdorr]

If you're using refs, you want them to work in both dev and prod. You don't want it to work automatically in development and then have it break when you go to production. That would be extremely frustrating behavior.