connect() does not work with React.forwardRef

Specifically, if I compose connect with another HOC that uses forwardRef, the result of forwardRef (an object) is passed as the WrappedComponent, which throws an error claiming it should only be a function.

Example

const MyComponent = React.forwardRef(() => null);
connect()(MyComponent);

[gaearon]

We chatted with @sebmarkbage and he pointed out that if you want to “redirect” ref to some inner component, forwardRef needs to be outside of connect, not inside it.

class MyComponent extends React.Component {
  render() {
    return <SomeInnerComponent ref={this.props.myForwardedRef} />;
  }
}

const ConnectedMyComponent = connect(
  mapStateToProps
)(MyComponent);

export default forwardRef((props, ref) =>
  <ConnectedMyComponent {...props} myForwardedRef={ref} />
);

There is also another scenario in which you might want to point connect()ed component’s ref to the wrapped component’s own instance (MyComponent in this example). Arguably this is what most React Redux users would want. You can’t do this in userland. It would need to be done by connect() itself because it would need to pass ref={forwardedRef} to the wrapped instance (which isn’t possible from the user code).

[JLarky]

I was confused on what that exactly means, so I can spare you the research: use { forwardRef: true } as option to connect