Member-only story
Reddit user raks99832 asked, “How do you go about identifying and building reusable components in React?” I’ll discuss my learnings and strategies for tackling this common problem space.
The easiest identifier for a re-usable component is “whenever logic is being re-used.” If I’m using component logic in one place and am needing that same component logic in another place, I make it a reusable component. Similarly, If you are using logic in one place and in another, you make a function that handles that logic for you and just call that function in two places. You can make a component that handles that component logic and just call it in two places.
I’m a firm believer in DRY (and WET) code — Don’t Repeat Yourself (and Write Everything [no more than] Twice, waiting for a third implementation to ensure extensible and accurate interfaces and algorithms). If your component logic needs to change to meet new feature requirements or to fix a bug, you don’t want to have to change it in multiple places. Your application loses consistency. If a developer forgot to change the logic in all places, you’ve opened yourself up to errors. “I see a bug on Page X,” so they fix the component on Page X, completely forgetting that that same component logic exists on Page Y and is still bugged. Why even ask developers to change the same code in multiple…
