• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
August 03, 2017

Common React Mistakes Part 2: Connecting too many Components

Posted by Jamie Barbosa and Evan Wooten

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.

Re-rendering issues: The difference between updating and displaying data

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.

Violate the idea of presentational vs. container component

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.

It can be harder to maintain

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.

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.

reactreactjs
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • Hindsight 2020 & Looking Ahead to 2021
  • Preparing for Streaming’s Growth & The Future of TV Buying
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.