Get class based components REF with lazy import

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

• Feature request

What is the current behavior?

• Can’t get components REF.

Issue is:

I have ComplexGrid that extends React.PureComponent. I want to load this component dynamically.

React version = 16.8.5 Eg:

const ComplexGrid = React.lazy(() => import('@cc/grid/ComplexGrid'));

Then inside constructor I create this.gridRef = React.createRef();

Then JSX part:

<React.Suspense fallback={<div>Loading</div>}> <ComplexGrid ref={this.gridRef} {...some props here} /> </React.Suspense>

And then I get warning about React.forwardRef. The problem:

• My ComplexGrid component has some methods (UpdateColumnMetrics, …etc)
• I need ref to call these methods.
• I don’t need to forward ref to ‘div’ element (or others), I need component’s instance
• I need normal ref behavior, like with static imports

Is here any solution?

codesandbox example:

https://codesandbox.io/embed/ojkk2z5335

[igoriok1994]

Try react-hot-loader@4.8.3

It’s working 😃

[theKashey]

Try react-hot-loader@4.8.3