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!

--

--

--

Senior Mobile Application Developer at Cubix Inc with more than 6 years of experience in React Native/Android/iOS

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mehran Khan

Mehran Khan

Senior Mobile Application Developer at Cubix Inc with more than 6 years of experience in React Native/Android/iOS

More from Medium

React 18 : whats new ?

How to implement React Table Project Setup and useTable

Sync local and remote Zustand store in ReactJS

Material UI