How to avoid premature abstractions in React applications

It's all too easy to fall into the habit of premature abstraction. For one, it can be a lot of fun to think about perfect solutions to a problem and try to bring them to life. But components that are created too early in the development process can come back to bite you, and the more layers of abstraction you commit to, the less disposable these components become.

Before mentally committing to a component-first approach, try starting with only the markup. Get all of the markup on the page, no javascript, no components, just HTML and CSS. Work from the designs and get it looking approximately right. By going through the motions, you give yourself a chance to focus on what you're really building.

This can be a cathartic experience - it gives your brain a break from abstract implementation details and lets the product explain itself to you. You need to write this markup at some point anyways, and chances are you'll get it right the first time - so you're still working towards your end goal.

And the best part is that the components and other necessary abstractions will reveal themselves to you organically. Repetitive templates and their variations will surface without you having to think about them. Props and interfaces will be clearly defined, and you'll be left with a better idea of what your app actually needs to do.

At the end of the day, everything is a box, an image, some styled text, padding, margin, etc. Start with the primitives of your craft and work upwards to your masterpiece!

Cheers!


Kent C Dodds and others have some great material on "hasty" abstractions

One library I've really enjoyed for this kind of workflow is Tailwind. It provides just the right amount of flexibility without having to commit to your own (premature) CSS abstractions.

For examples of this sort of workflow, I highly recommend Adam Wathan's youtube videos, he publishes frequently and they are full of excellent advice