How to Nest Smart Components in Redux

Nov 15, 2019 • 4 Minute Read

Introduction

Nesting smart components is a popular design pattern for building React-Redux applications. Often you'll find yourself in a situation where you have to decide whether to connect all the components to the redux store or just connect the wrapper component and pass down the props to the child components. In this guide, we are going to learn how to nest containers, that is, smart components to build high-performing applications.

The Problem

While working with React and Redux libraries, you may come across a situation where you want to connect a child component of an already connected component, and the first questions that pops into your mind are, "Will this cause any re-renders in the UI?" or "Will this affect the performance of my app?"

Looking for an answer? It's a big fat NO! If anything, this boosts the performance of your application.

When you have a container (connected component) with 100 presentational components nested down its component tree, you will have to extract all the props required by those components and pass them down the component tree. This may affect the performance of the application, as providing props and extracting back the updated prop can be a huge task.

The Solution

Instead of passing down the props from a container, each component can be connected to the store using the connect() method and secure its props using mapStateToProps(). That way, there is less of a burden on the parent container.

The connect() method is highly optimized, and it checks for different cases to decide whether the container needs to be re-rendered. This way, it avoids unnecessary re-renders that would otherwise profoundly affect performance.

Let's begin with the code!

Wrap the Root Component with

In order to access the global store object, we must wrap the root component with the <Provider /> component from the React-Redux library.

index.js

          // ...
import { createStore } from "redux";
import { Provider } from "react-redux";

import MainContainer from "./MainContainer";

import reducer from "./reducer";

const store = createStore(reducer);

function App() {
  return (
    <Provider store={store}>
      <MainContainer />
    </Provider>
  );
}

// ...
    

Finishing Up the Containers

Next, we will create two components nested in the main component and connect them all to the redux store.

MainContainer.js

          import { connect } from "react-redux";

const MainContainer = props => {
    return (
        <div>
            <p>MainContainer Data {props.data}</p>
            <ChildContainer>
        </div>
    );
};

const mapStateToProps = state => ({
  data: state.mainContainerData
});

export default connect(mapStateToProps)(MainContainer);
    

ChildContainer.js

          import { connect } from "react-redux";

const ChildContainer = props => {
    return (
    <div>
        <p>ChildContainer Data {props.data}</p>
        <GrandChildContainer>
    </div>
    );
};

const mapStateToProps = state => ({
  data: state.childContainerData
});

export default connect(mapStateToProps)(ChildContainer);
    

GrandChildContainer.js

          import { connect } from "react-redux";

const GrandChildContainer = props => {
  return (
    <div>
      <p>GrandChildContainer Data {props.data}</p>
    </div>
  );
};

const mapStateToProps = state => ({
  data: state.grandChildContainerData
});

export default connect(mapStateToProps)(GrandChildContainer);
    

That is how we connect each of the components to the redux store. We did not pass any props from one component to another.

Conclusion

I hope you liked this guide on nesting smart components in React-Redux. A quick recap: Nesting smart components can help you build high-performaning applications, as there is no overhead from passing props down the component tree. This design pattern is great for large-scale applications that have a high number of components in their application.