How to fix forwardRef cannot be used with connect() from react-redux in React

ReactINTERMEDIATEMEDIUMUpdated Dec 9, 2025· 86 views

When wrapping a forwardRef component with Redux connect(), refs fail to pass through correctly. This happens because connect() needs explicit configuration to handle ref forwarding through its higher-order component wrapper.

Quick fix

Fixes forwardRef cannot be used with connect() from react-redux

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <h1>{props.title}</h1>
      {/* component content */}
    </div>
  );
});

const mapStateToProps = (state) => ({
  title: state.title,
});

// Add { forwardRef: true } as the fourth argument
export default connect(
  mapStateToProps,
  null,
  null,
  { forwardRef: true }
)(MyComponent);

Add forwardRef option to connect()
Use the ref in parent components
Alternative: Wrap connect with forwardRef
Migrate from deprecated withRef pattern

react — error

$import React from 'react';
import { connect } from 'react-redux';
const MyComponent = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <h1>{props.title}</h1>
      {/* component content */}
    </div>
  );
});
const mapStateToProps = (state) => ({
  title: state.title,
});
// Add { forwardRef: true } as the fourth argument
export default connect(
  mapStateToProps,
  null,
  null,
  { forwardRef: true }
)(MyComponent);
forwardRef cannot be used with connect() from react-redux

What this error means

This error occurs when you try to use React.forwardRef() on a component that's wrapped with Redux's connect() function without proper configuration. The connect() higher-order component (HOC) creates a wrapper around your component, which intercepts the ref by default. In React-Redux v6 and later, the library changed how refs are handled - replacing the deprecated withRef option with forwardRef. When you compose connect with forwardRef incorrectly, React sees the forwardRef result (which is an object) being passed where it expects a function component, causing type errors. Additionally, the ref doesn't reach your intended component because connect() intercepts it at the wrapper level. This is a common migration issue when upgrading from React-Redux v5 (which used withRef and getWrappedInstance) to v6+ (which uses the forwardRef option). The problem affects any component that needs direct DOM access or imperative methods exposed through refs.

Typical symptoms

Ref returns the connect() wrapper instead of the actual component instance
TypeScript errors about incompatible types when combining forwardRef with connect
Cannot access component methods or DOM elements through the ref
Error messages stating forwardRef result cannot be used as a component
Previously working refs broke after upgrading React-Redux from v5 to v6+

Common causes

Using React.forwardRef() on a component before wrapping it with connect() without enabling forwardRef option
Not passing { forwardRef: true } in the fourth argument (options) of connect()
Incorrect composition order - wrapping forwardRef around connect instead of configuring connect properly
Using deprecated withRef/getWrappedInstance patterns from React-Redux v5 in v6+
Attempting to access wrapped component instance without proper ref configuration

How to fix "forwardRef cannot be used with connect() from react-redux"

1Add forwardRef option to connect()

The primary solution is to pass { forwardRef: true } as the fourth argument to connect():

jsx

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <h1>{props.title}</h1>
      {/* component content */}
    </div>
  );
});

const mapStateToProps = (state) => ({
  title: state.title,
});

// Add { forwardRef: true } as the fourth argument
export default connect(
  mapStateToProps,
  null,
  null,
  { forwardRef: true }
)(MyComponent);

Now the ref will be passed through to your component correctly.

2Use the ref in parent components

With forwardRef enabled, you can now use refs normally in parent components:

jsx

import React, { useRef, useEffect } from 'react';
import MyConnectedComponent from './MyConnectedComponent';

function ParentComponent() {
  const componentRef = useRef(null);

  useEffect(() => {
    if (componentRef.current) {
      // Access the DOM element or component instance
      console.log(componentRef.current);
      componentRef.current.focus(); // if it's a focusable element
    }
  }, []);

  return <MyConnectedComponent ref={componentRef} />;
}

The ref now points to the actual wrapped component, not the connect() wrapper.

3Alternative: Wrap connect with forwardRef

If you need to forward the ref to a specific inner element rather than the component root, wrap the connected component with forwardRef:

jsx

import React from 'react';
import { connect } from 'react-redux';

// Define component without forwardRef
const MyComponent = ({ title, innerRef }) => {
  return (
    <div>
      <input ref={innerRef} type="text" />
      <h1>{title}</h1>
    </div>
  );
};

const mapStateToProps = (state) => ({
  title: state.title,
});

// Connect first, then wrap with forwardRef
const ConnectedComponent = connect(mapStateToProps)(MyComponent);

export default React.forwardRef((props, ref) => (
  <ConnectedComponent {...props} innerRef={ref} />
));

This pattern gives you more control over where the ref is forwarded.

4Migrate from deprecated withRef pattern

If you're upgrading from React-Redux v5, replace the old withRef pattern:

Old pattern (v5):

jsx

export default connect(
  mapStateToProps,
  null,
  null,
  { withRef: true }
)(MyComponent);

// In parent:
myComponentRef.current.getWrappedInstance().someMethod();

New pattern (v6+):

jsx

export default connect(
  mapStateToProps,
  null,
  null,
  { forwardRef: true }
)(MyComponent);

// In parent - direct access, no getWrappedInstance
myComponentRef.current.someMethod();

The getWrappedInstance() call is no longer needed with the forwardRef option.

5Verify connect signature

Ensure you're using the correct connect() signature with all four parameters:

jsx

connect(
  mapStateToProps,     // 1st: map state to props
  mapDispatchToProps,  // 2nd: map dispatch to props (or null)
  mergeProps,          // 3rd: merge function (or null)
  {
    forwardRef: true,  // 4th: options object
    // other options...
  }
)(Component)

If you're only using mapStateToProps, you still need to pass null for the 2nd and 3rd parameters:

jsx

connect(mapStateToProps, null, null, { forwardRef: true })(Component)

Advanced notes

TypeScript considerations: When using forwardRef with connect() in TypeScript, you may need to explicitly type your ref:

tsx

interface MyComponentProps {
  title: string;
}

const MyComponent = React.forwardRef<HTMLDivElement, MyComponentProps>(
  (props, ref) => {
    return <div ref={ref}>{props.title}</div>;
  }
);

Performance note: The forwardRef option has minimal performance impact. The connect() HOC already creates a wrapper component; enabling forwardRef simply configures how refs are passed through.

React Hooks alternative: If you're building new components, consider using the useSelector and useDispatch hooks from React-Redux instead of connect(). Hooks work naturally with forwardRef:

jsx

const MyComponent = React.forwardRef((props, ref) => {
  const title = useSelector(state => state.title);
  const dispatch = useDispatch();

  return <div ref={ref}>{title}</div>;
});

This eliminates the connect() HOC entirely and provides cleaner ref forwarding.

Multiple refs: If you need to forward multiple refs or combine refs, use the useImperativeHandle hook:

jsx

const MyComponent = React.forwardRef((props, ref) => {
  const localRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => localRef.current?.focus(),
    getValue: () => localRef.current?.value,
  }));

  return <input ref={localRef} />;
});

Legacy codebase migration: When migrating large codebases from React-Redux v5 to v6+, search for all instances of "withRef: true" and "getWrappedInstance()" to identify components that need updating to the forwardRef pattern.

Frequently asked questions

What does "forwardRef cannot be used with connect() from react-redux" mean?: forwardRef() on a component that's wrapped with Redux's connect() function without proper configuration. The connect() higher-order component (HOC) creates a wrapper around your component, which intercepts the ref by default. In React-Redux v6 and later, the library changed how refs are handled - replacing the deprecated withRef option with forwardRef.
How do I fix "forwardRef cannot be used with connect() from react-redux"?: When wrapping a forwardRef component with Redux connect(), refs fail to pass through correctly. This happens because connect() needs explicit configuration to handle ref forwarding through its higher-order component wrapper.
What causes "forwardRef cannot be used with connect() from react-redux"?: Using React.forwardRef() on a component before wrapping it with connect() without enabling forwardRef option Not passing { forwardRef: true } in the fourth argument (options) of connect() Incorrect composition order - wrapping forwardRef around connect instead of configuring connect properly
Is the "forwardRef cannot be used with connect() from react-redux" error serious?: It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading

📚React Official Documentation