Why using nested connect(react-redux) components is good?

We all know how easy it is to manage the state with Redux. It keeps a single source of truth(state tree or store) at the root of the app and it can be changed only by dispatching actions and you can subscribe to those changes to reflect any changes in UI.

I mainly use Redux with React where any change in parent’s state or props makes the parent and its children to re-render unless we provide some solution to stop those unwanted re-rendering.

Now if I subscribe to changes in the store at the parent level, it will make the whole app re-render even if just one child component actually needed to re-render.

So here comes the react-redux library in picture. It’s helps us connect react and redux in an efficient way using the connect method.

Connect method lets you connect your component to redux store and extract the props you need for your component.

Here’s an example of how you use connect.

From here on whenever I’ll use the word “connect” I’ll mean connect to redux store.

While working with this library I came across a situation where I wanted to connect a child component of an already connected component. And I was like “is this a good idea?”, “what about the performance and those extra re-renderings, if any?”.

So after searching through the issues of redux and react-redux libraries on their github repo and lots of googling, I came to a conclusion that it’s perfectly fine to use connected components inside an already connected component. Also it actually boosts the performance of your app.

Connecting a child component of an already connected component has several advantages.

1. Suppose you have a connected component with 100 children components. Now the parent has to provide props to these 100 components and it has to extract and return those props from the store using mapStateToProps function. Now your app to be efficient your mapStateToProps function should be efficient and return as soon as possible and extracting props for those 100 children might be a huge task. Now to help parent you can connect a child and let it extract its own props and props for its children. That way you reduce the burden on the parent and pass some of those extracting to the child.
2. You may come across a situation where you don’t want the parent to know about the props the child will receive. You can achieve this by connecting the child component and extracting its own props using the mapStateToProps.
3. Connect method is actually heavily optimized and it checks for different conditions and decide whether the parent should update and re-render. This way it avoids those unwanted re-renders which would have otherwise impacted the performance heavily.

I’m currently working on some cool stuff with React. You can reach me on twitter.

If you liked the article please click the clap icon. Thanks.