Image for post
Image for post

Techniques for decomposing React components

David Tang
Jun 18, 2017 · 4 min read
Image for post
Image for post

Split the render() method

This is the most obvious technique to apply: when a component renders too many elements, splitting those elements into logical sub-components is an easy way to simplify.

Templatize components by passing React elements as props

If a component is becoming too complex due to multiple variations or configurations, consider turning the component into a simple “template” component with one or more open “slots”. This allows a dedicated parent component to focus on configuration only.

Extract common aspects into higher-order components

Components can often become polluted by cross-cutting concerns that aren’t directly related to its main purpose.

  1. If the component has additional logic in those lifecycle methods, the analytics code also becomes obscured.
  2. The analytics code is not reusable.
  3. Refactoring the component is made harder, as you’d have to work around the analytics code.
Image for post
Image for post

Closing thoughts

React components are highly composable by design. Use this to your advantage by readily decomposing and composing them.

DailyJS

JavaScript news and opinion.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store