Keep Your React Components Dumb

by Zach Briggs

React is amazing at ensuring that the system you build is reasonable, in other words, changes you make tend to not break unrelated functionality. Thinking back to my days writing Backbone or Angular when any change seemed to be capable of breaking distant features, this reasonable aspect of React’s component tree feels miraculous.

The downside of React’s component tree is that UI change tends to be more expensive than the big ball of mud approaches from the days of yore. Since React UI components ARE the code, a UX change to your system might cause you to restructure your component boundaries. Suddenly a small sounding change can result in 300-400 line diffs across 10 components.

I’ve started to put as much state as possible inside of my Redux store in order to combat the fragile nature of isolated component trees and so far, I’m happy. The dumb component approach makes for slightly more up-front typing, but it allows you to make sweeping changes to your component tree structure much more easily.

I’m still in early days of this Redux first mindset, but so far I’m happy with it. I’ll post back here after using it for a few months.