Using refs with react-redux 6 | How to Use Refs on Connected Components

Some time we want to use ref on react-redux connected components . Before react-redux 6 this is how we use it .

ref={ref => this.chartsComponent = ref.getWrappedInstance()}

we had to use {withRef: true } in connected component

connect(null, null, null, { withRef: true })(ChartsComponent);

{withRef: true} is removed in react redux 6 and {forwardRef : true} is added

this is how we accomplish in react redux 6

ref={ref => this.chartsComponent = ref }

now we need to use {forwardRef : true} in connected component

connect(null, null, null, { forwardRef: true })(ChartsComponent);

Note : We do not use getWrappedInstance() now

The withRef option to connect has been replaced with forwardRef. If {forwardRef : true}has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.

Thanks for reading my article . Please clap if you liked it!