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

Mehran Khan
1 min readMar 12, 2019

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!

Sign up to discover human stories that deepen your understanding of the world.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Mehran Khan
Mehran Khan

Written by Mehran Khan

Senior Mobile/Javascript Developer

Responses (2)

What are your thoughts?

Thanks, worked for me.

Sorry, but how can we access the ref?