• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
July 05, 2017

Common React Mistakes: Monolithic Components and a Lack of Abstraction

Posted by Christopher Davis, Emily Fox and Jamie Barbosa

coding photoFollowing best practices ensures your application is in the best possible position to live a long healthy life. Some frameworks come with a strong set of opinions that shape best practices. React, however, is very new and very much a library, not a framework. As such, its best practices are still taking shape.

In the past year, PMG has built several single page applications with React and Redux. We’ve learned some of our own best practices through the best (worst) way possible: messing things up.

Monolith components are large components — either class based or functional — that contain a lot of functionality. They’re generally hard to understand and maintain. The goal is to break components like this up into smaller pieces. A lack of abstraction is a similar issue: things that should be broken into pieces are not.


Monolith components are large components that contain a lot of functionality.


Here are some common code smells and some suggestions for each.

Too Much Nesting

This can originate in the typical control flow structures or because of nested JSX.

For example, a common pattern would be to map across a list and render an element for each item.

A more readable approach would be to pull the row elements into a component.

Components are Hard to Test

Say you have some conditional rendering in your component, something simple like:

To really test this in a monolithic component, you have to adjust the props and then fully render to see what actually happens. Extracting that conditional rendering into its own component means you can test it independently. This allows you to do shallow rendering in the bigger component to verify things. Functional components are great for this.

Code Duplication

We’re used to extracting common functionality into methods and functions in just about any other language. Duplication in JSX, however, can be a bit more hidden. For example, you may do something like this a lot:

A content + sidebar pattern. Spot the duplication? The magic className values scattered everywhere. Those are prime candidates to pull out into components.

This strategy is a good way to reduce nesting as well.

Inheritance

We’re fans of composition over inheritance in pretty much any programming language. It’s tempting to treat your component’s render method as a template method. Similarly, it’s tempting to use inheritance to provide common functionality to child components.

In both cases, composition is a better approach.

For template method renders, a better approach would be to use specialization of a generic component — see the example above. Providing common functionality is done better with pure functions that can be tested on their own.

—

When working with a new library or framework, some trial and error is expected. Code that isn’t easy to read, understand, or test indicates the need for modification. Hopefully, the above suggestions will help you build more sustainable React applications.

reactredux
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.