Make it Modular

Did you ever play with legos as a kid? Who am I kidding, of course you did, or at the very least stepped on one once in the middle of the night. I loved legos, the creativity it allowed if I just dumped all my different sets together to construct my juvenile megaliths.

While I’m still learning React, I’m enjoying it for much of the same reason. One thing that seems to be a persistent problem for me when coding is when my files start to look like an unreadable jumble. At some point it gets difficult to pick through.

So make it modular!

React allows us to create components which can be exported and imported into other components. Using this modularization, we can have individual dedicated files for each working part. This allows us to easily separate our code, cutting down on the visual overwhelm that comes with messy, single-file endeavors.

So what’s so special about modularization anyways?

1. Modularization allows us to easily adhere to the single-responsibility principle. We can have a file with a dedicated purpose (say, a handlePost to handle a posting fetch request for a login), which we can import into a class component that handles the after-effects of the login. The fetch doesn’t need to worry about what happens once it does its job, so we can leave that to our class component.
2. It makes your code much more human-readable! Total honesty here, my first thought when I’m slammed face first into a jumble of code is “This is Greek, isn’t it?” It’s very easy to get lost in all of that information. Breaking it into smaller components makes it easier to understand and less daunting to read.
3. It also makes it much easier to debug. An error message might point you to the correct file, but imagine having to scour a hundred line file for a bug vs. a ten line file. Makes a big difference!
4. Finally, it keeps that code smelling fresh and clean! We want to repeat ourselves as little as possible and keep our code nice and DRY. By breaking down our code into modular components, we make it easier to do so.

So if you’re looking at a file and it kind of feels like your legos are all over the floor, make it modular. I promise it will help.