5 Simple (Yet Effective) React Practices

Simple ways to write effective React code

Jun 23, 2021

React is one of the most popular frontend libraries used to create User Interfaces today. The code is based on JavaScript and usually, when writing React code, there is a lot of leeway in terms of how you write it. However, this freedom can also translate into a lack of standardization and poor code quality.

For starters, check this article in which Caelin Sutch offers some great tips on React best practices. In this article, I will build on these tips and explore other best practices which can help you write cleaner and more effective code.

Once again, the following are tips and suggestions accumulated from my years of programming in React. I hope they serve as good guidelines for you. Feel free to adapt and improvise where you feel like too.

So let’s get started!

Code Linting and Formatting

The first tip is to use a code linting and formatting tool in your React project. The most obvious reason to do this is that it helps maintain a standard of your code, especially with multiple contributors. Imagine a team of developers and each of them writing code in a different style — it would be a nightmare.

My favourite choice for this is to use both ESLint and Prettier.

Prettier is code formatter which takes care of how your code should look like. ESLint is a linter which does more than just formatting — it also helps find code errors which can lead to bugs.

If you are new to both ESLint and Prettier, I have written an article here on how you can get it up and running in your project in less than two minutes!

Conditional Rendering Tricks

Caelin Sutch has also covered it in his article, but this is a key tip that I wanted to explain in detail.

When it comes to conditionally render, we have two basic cases to deal with:

Render a component only when a condition is satisfied, or render nothing
Render component A when a condition is satisfied, else render Component B

The key difference between the two cases is that in one case, we render either a component or nothing at all. To write clean code that matches this situation, we can use something called short-circuiting in our code. Let’s take a look at a bad example and a good example.

Bad example

Good example

In the bad example, we are checking the showModal condition and rendering a Modal if it is true and rendering null if it is not. Instead of that, in the good example, we use a short circuit method using the && symbol. If showModal is false then nothing following the condition will be evaluated.

Use Functional Components

React Hooks were introduced in React 16.8 and this allows us to write functional components without the need for us to declare class-based components. I would strongly encourage the use of functional components essentially because they keep the code readable and simple. The main difference is of course in the syntax. As an example, let’s take a look at a simple Title React component.

Class-based component

Functional component

David Jöch provides great reasons as to why functional components should be preferred over class components in his article here. As a summary:

Easier to read and test
Less code
Easier to implement best practices
Possible performance boosts in future React versions

Creating a Layout Component

More often than not, we find ourselves repeating some of the components in our React pages. For example, almost every page requires some header attributes and meta tags. Similarly, footer is another section that is found in many components.

Instead of repeating the component composition in every page-level component, we can create a Layout component that takes care of the composition for us. This could look something like this:

In this SiteLayout component we provide a pre-defined structure for our pages by composing the page with the common components. Now, to render a page, such as an “About” page that talks about your application, we can create a page component as follows:

This structured approach to creating pages and components keeps our code modular and composable. It also prevents repetitive coding.

Boolean Props

Another tip for clean React code is to highlight boolean props implicitly when they are true. Consider the following code:

When showModal is true, we don’t need to explicitly pass the prop as showModal={true}. Instead, implicitly we can just state the name of the prop and it will be passed to the sub-component with the value of true.

Conclusion

Adding the above guidelines to your coding practice will help ensure greater standardisation of coding style and keep your codebase clean and lean. Feel free to improvise on the tips and, as always, happy coding!