This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

PMG Digital Made for Humans

Common React Mistakes Part 2: Connecting too many Components

3 MINUTE READ | August 3, 2017

Common React Mistakes Part 2: Connecting too many Components

In part one we talked about Monolithic Components and a Lack of Abstraction. In this post, we will continue talking about best practices we’ve found working with React/Redux over the past year.

Connecting too many components is an issue that should be avoided when working in React and Redux. Having too many components connected to the state can cause things to go wrong with updating the data and how it gets displayed on the screen. Read on to see how these issues are avoided.

Manipulation of the state and any rendering of data should be kept separate in order to prevent re-rendering issues which can cause incorrect data to be displayed. Rendering data is solely presenting information to the screen, so changing the state involves accessing and updating the store. If too many components get connected to the store, components may get updated at different (and incorrect) times. This follows the idea of having separate presentational and container components which we will talk about next.

Effective usage of React and Redux relies on the principle of separating presentational and container components. A presentational (or pure) component is one that is solely focused on how things look on the page and therefore does not mutate data, does not have its own state from the store and can only rely on data via incoming props. A container component is concerned with how the data is manipulated and thus makes changes to the state by calling actions, and accesses the store via connect(). A container component can hold both types of components within it, passing props and callbacks down, but it’s not good practice to chain too many together as this can make it hard to track the data flow and maintain. (This is discussed more in the next section.) This separation of logic and design is important because it allows us to write easily reusable components while embracing the React/Redux foundations.

When an overabundance of components are connected, it becomes more difficult to figure out what is causing changes to occur in the page. Unrelated components should not be able to affect one another in order to keep clear what exactly is changing and why. The challenge is finding the sweet spot where connecting components makes sense to the project but doesn’t inhibit another developer from being able to understand the logic behind the data flow and presentation. In addition to adding this additional complication, having too many connected components can cause unnecessary page rendering which can make an app less performant.

Insights meet inbox

Sign up for weekly articles & resources.

Although these issues are avoidable, they can be hard to prevent when jumping into your first React/Redux project. For our team, these concepts were encountered through trial and error and lots of refactoring. Now that we’re aware of best practices though, we’ve been able to maintain our React projects much more efficiently.


Posted by Jamie Barbosa

Related Content

thumbnail image

Get Informed

PMG Innovation Challenge Inspires New Alli Technology Solutions

4 MINUTES READ | November 2, 2021

Get Informed

Applying Function Options to Domain Entities in Go

11 MINUTES READ | October 21, 2019

thumbnail image

Get Informed

My Experience Teaching Through Jupyter Notebooks

4 MINUTES READ | September 21, 2019

Get Informed

Trading Symfony’s Form Component for Data Transfer Objects

8 MINUTES READ | September 3, 2019

Get Inspired

Working with an Automation Mindset

5 MINUTES READ | August 22, 2019

Get Informed

Parsing Redshift Logs to Understand Data Usage

7 MINUTES READ | May 6, 2019

Get Inspired

3 Tips for Showing Value in the Tech You Build

5 MINUTES READ | April 24, 2019

thumbnail image

Get Informed

Testing React

13 MINUTES READ | March 12, 2019

Get Inspired

Tips for Designing & Testing Software Without a UX Specialist

4 MINUTES READ | March 6, 2019

Get Informed

A Beginner’s Experience with Terraform

4 MINUTES READ | December 20, 2018

All POST