Stop Writing Reusable React Components
One of the best things to happen to modern JavaScript Frameworks is the mental shift to components. Components change the way we think about our app. It allows us to break our App down to individual parts and test them in isolation, giving us the confidence to compose them together to make more complex components and apps. When I first started learning React, and about component-based frameworks, I was told all these things about components and how powerful they were, but the thing that always seemed to be emphasized the most was one thing: Code Reuse.
I was taught how React helped you write more DRY code (If you don’t already know DRY stands for Don’t Repeat Yourself) by allowing you to abstract the repeating code into a single component. The first class I took on React we did an exercise looking at a page and thinking about how to break this page up into components. Look, there is a Header component and there is a Hero section, I think we can make that a component. Check out that dropdown and accordions, those are components.
It was a good exercise to help break away from patterns that I had learned up to this point, but it started me down an incorrect way of looking at components. When I finally sat down to build my first non-trivial app in React, I was building a new landing page from scratch. I looked at the page I was trying to build and started…
