How to Write Better React Code
I’ll be frank, there’s a lot of badly written React code out there. It’s really easy to slip into bad practices that make code unorganized and hard to read. In general, React is a very unopinionated framework compared to others like Angular, which can be incredibly powerful, but also makes it easier to introduce bad practices into your code. While writing a lot of React code, I’ve come up with a couple of ways to ensure that your code maintains readable and usable for not just yourself, but other devs.
1. File Organization
React doesn’t recommend a specific pattern to organize folder structure, but there are a couple of suggestions on their website. There’s quite a few Medium articles floating around out there that recommend various file structures. I personally have adopted the Atomic Design principle for all my projects. Regardless of which structure you pick, the important thing is consistency, maintainability, and readability. Ideally, a React developer should be able to look at the folder structure for a couple of minutes and have a general idea of where everything is.
2. Don’t Repeat Yourself
The DRY (Don’t Repeat Yourself) principle is pretty well-known among developers. Yet, I still see quite a few projects that have redundant components or structures that can be simplified. For React, this can mean developing shared styles, components for common things (like cards), and other generic components that are reused throughout the application. As your application grows, this can make it easier to refactor or change large amounts of code pretty quickly.
That being said, be sure to not make your code too DRY, as it can lead to abstraction hell and create a mess of unreadable abstractions upon abstractions that can actually make it harder to figure out what’s going on. For a more thorough discussion on DRY and WET code, I recommend taking a look at this article.
3. Name Your Components Well
Naming components can make a big impact on the readability of your application. A developer should be able to easily recognize the purpose of a component by reading its name. Follow common practices like using capitalization of your components.
4. Use PropTypes (or TypeScript) for Type Checking
PropTypes is a form of type checking that React can use in plain js. Without PropTypes, you can pass in the wrong data into a component which can cause unexpected and hard to debug behavior. Another great way to overcome this is by using TypeScript. This will help you reduce the number of unexpected bugs you and other devs encounter.
5. Use Linting Tools
ESLint is a popular linter tool that can be used in React. Linters are great for enforcing a consistent code pattern, reduce syntax errors, and make code more readable. I also like to use Husky to add Git hooks to ensure that code passes the linter before being pushed. This is really helpful when working with a larger team of developers to ensure code remains clean.
6. Separate Display and Business Logic
Keep your stateful data-loading logic separate from rendering logic. This simplifies components and makes it easier to debug or refactor either behavior. For example, if your application is making an API call, manage the API call in a parent component and pass data via props into the component to be rendered. This makes the code easier to understand and more readable.
7. Write Test Cases
Test cases are often overlooked in React projects. However, testing is a great way to decrease development time by catching errors before code is released in all the applications. It also reduces the time needed for developers to manually test their code and makes you feel incredibly happy when the tests are all green. There are three main types of testing:
Unit Testing
Unit testing is the most basic form of testing. It allows you to test small units in your code. I recommend using Jest, a popular testing framework, for writing these tests.
Component Testing
React components are small reusable bits of code that can be tested efficiently. At this stage, you want to be testing DOM interaction.
End to End (E2E) Testing
This means testing the application as a whole, simulating how a user will click through an application, and testing in the browser. The most popular E2E testing framework is Cypress.
I recommend starting with the unit and working your way up to E2E. It may seem like a lot of work, but makes adding features significantly easier. Plus, if you integrate it with a CI platform (like Github Actions or Travis), it’s even easier to see if someone's changes mess up your application!
I hope these tips make your future React development cleaner, easier, and more maintainable for your whole team!
Keep in Touch
There’s a lot of content out there, I appreciate you reading mine. I’m a young entrepreneur and I write about software development and my experience running and growing companies. You can signup for my newsletter here
Feel free to reach out and connect with me on Linkedin or Twitter.
