How to write clean React code: 13 tips for better readability and maintainability

Photo by James Harrison on Unsplash

Clean code

Writing clean code is generally preferable, no matter which technology we use. It is one of the best techniques to make your code easier to understand, without adding stuff like comments or documentation.

  • giving variables and functions meaningful names
  • making functions do one thing — one that is in its name
  • creating functions that have max 3 parameters (less is even better)
  • avoiding complex nested if statements
  • not adding unnecessary context

Avoid duplications

Even if it’s probably the easiest way to add some feature that is very similar to existing one by copy/paste technique, it isn’t recommended solution. Not only it will result in more code, but it creates room for potential errors later, when you have to update your feature on several places in your code. Same situation is with smaller portions of code like if-else or switch-case statements.

TypeScript

Although it has some drawbacks, TypeScript has a lot of positive stuff and it is still gaining popularity. It gives us type-checked system, which makes it easier to track types of parameters or return types. By using TypeScript we don’t have to use 3rd party libraries to validate props or state objects.

Organizing imports

I organize imports in 3 groups:

  • 3rd party libraries (React, lodash, etc) imports
  • company libraries imports (if there are any)
  • locale imports
Before grouping and sorting imports
After grouping and sorting props

Sorted variables, props, state

Sorting is an optional thing, but I find it useful when searching for variable or function to check what is its type or parameter for example. Before sorting, I do grouping props by objects and functions, which also makes it more readable and searchable.

Before grouping and sorting props
After grouping and sorting props

Directly updating props or state

Many will say this is even weird to mention, but it happens a lot. This is probably because it works in some situations, but it is generally anti-pattern and it is advised by React dev team not to do it. Props should be updated from parent component and state should be updated using setState or set functions.

Functions defined before use

When creating a new function I prefer to place it before function(s) where it’s used. Reason for that is when I’m going through code later I will check this function and be familiar with it before I even come to the place where it’s used, which prevents me from jumping back and forth in the code.

Arrow functions

One of the greatest features of ES6 are definitely arrow functions. Not only they solve problem with binding class components functions, they are simple to write and understand.

Standard function
Arrow function

Small and reusable components

Components, similar to functions, should represent one element and its logic. On the contrary, everything is more complex when dealing with large components.

Functional vs Class components

With React v16.8 we have functional components with hooks, which covers most of general usage of React components. Functional components have less code, which is always better. Although, in some situations class components are preferable, for example components with complex state object which needs to be updated on multiple places in our component.

Class-based component
Functional component

async/await

Except from making our code cleaner, async/await give us several more benefits: error handling of both synchronous and asynchronous code with same try/catch, easier working with conditionals, debugging and chained async operations.

classnames

Another package that will make our code cleaner when we need to combine multiple CSS classes, where some of them are conditional.

Code refactor

From time to time we need to go through our code and see if there is something we can simplify, decouple or refactor. When we add new functionality there is a great possibility that some of our components will need refactor: moving to shared folder, adding new props etc.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amel Halilovic

Amel Halilovic

Senior Software Engineer and Writing Enthusiast.