To ensure that your React projects are maintainable, efficient, and easy to understand, it is important to follow best practices when developing with React.

React is one of the most famous front-end frameworks for JavaScript. It is also one of the most-picked libraries for building web applications and creating excellent user interfaces.

As a React developer, it takes more than knowing how the library functions to create user-friendly, easily scalable, and maintainable applications. Understanding React conventions is equally important to create unique React code.

Even though ReactJS is simple to use and comprehend, project growth increases the complexity of the code. In this blog, we will discuss React best practices that will help React developers in development.

In The first part of this article, we’ll discuss some of the typical problems that React developers run into, and in the second part, we’ll focus on some of the react best practices you can use to write React code more quickly.

Let’s get started!

React Best Practices in 2023

Writing React code can be a little difficult if the developers do not adhere to its best practices. Here are 20 ultimate react best practices to follow in 2023 to keep your ducks in a row.

Significant File Organization
Small and Specific Functional Components
Don’t Use Indexes as a Key Prop
Pick Fragments Over Divisions
Naming Conventions
Initializing React Component State Without Class Constructor
DRY Your React Code
Eliminating Redundancy with JavaScript Destructuring
Prefer Passing Objects
Use React Developer Tools
Conditional Rendering Practices
Use Snippet Libraries
CSS in JavaScript
Lazy Loading Implementation
Testing and Monitoring Code
Use a Fast and Secure Hosting Provider
Managing State in ReactJS Application
Writing clean and readable code using JSX
Implementing proper routing with React Router
Handling errors and debugging in a ReactJS application

1. Significant File Organization

Files that serve similar functions and are designed to work with a certain feature, should be kept together. For instance, all the styling files and other files related to a single component should be in the same location.

With the help of this practice, the developers can easily find related items in a single location. Consequently, users won’t have to search the entire project for a specific file. No matter how large the project becomes, the file will always be located where it should be.

Developers can also opt for a component-centric file structure. This entails putting all the documents about one component in a single folder. For example, one can create a folder called NavBar that contains the navigation bar component itself, the styled-components, and any other JavaSript and asset files.

It is simple to reuse, share, and debug a component when all of its files are contained in a single folder.

2. Small and Specific Functional Components

As we all know, React allows the development of huge components that are capable of performing various tasks. However, it is best to structure them so that each one performs a specific purpose by keeping components modest.

Using React, developers produce reusable UI components. Smaller components are simpler to read and comprehend in terms of their operation and are easy to update. As a result, the code’s usability is also improved. Each component is typically short (between 100 and 200 lines), making it simple for other programmers to comprehend and adjust the code.

3. Don’t Use Indexes as a Key Prop

React uses keys to identify items inside an array uniquely. With these keys, it can easily find out which item has been inserted, modified, or removed inside an array. When rendering arrays, you may frequently use the index as the key.

const Items = () => {
const arr = ["apple", "banana", "cat", "dog", "egg"];
return (
<>
{arr.map((elem, index) => {
<li key={index}>{elem}</li>;
})}
</>
);
};

While occasionally effective, using the index as the key can lead to problems if the list of items changes as expected. Think about the list below:

const arr = ["apple", "banana", "cat", "dog", "egg"];

The first item in the list, “apple,” currently has an index of zero, but if someone adds another item to the top of the list, the index of “apple” will change to 1, which will also modify how the array behaves.

The method uses a unique value for the index to ensure that the arraylist’s identification is preserved.

4. Pick Fragments Over Divisions

The code returned by any React component should be wrapped in one singular tag. Normally, <div> or a React fragment is used but it is one of the best practices to opt for React fragments.

Every tag or <div> you use acquires memory. Hence, the more the number of <div>, the more memory is needed by your website, more power is required, and more time is taken to load the website. This eventually results in slow website speed and poor user experience.

5. Naming Conventions

Naming conventions aid in making code easier to read. This holds for variables, React hooks, component names, and more. There is no official naming scheme provided in the React documentation but there are 3 main naming conventions used –

Instead of referring to a specific app feature, component names should reflect their function. They should also be capitalized in camelCase.
Keys that require constituents ought to have unique, non-random identifiers. Utilizing more than just indices as keys are advised. A key allocation that combines two different object attributes is acceptable.
In camelCase, methods should be named for their purpose and function rather than being application-specific. In general, components are written in PascalCase and must be titled according to their purpose rather than their function in the project.

6. Initializing React Component State Without Class Constructor

Developers can be seen utilizing a class function to initialize a component’s state in React. While following this technique is not detrimental, it may lead to more duplicate code, which will ultimately reduce the app’s performance.

An example of a component with and without a class constructor is given below –

Without Class:

class MyComponent1 extends React.Component {
constructor(props) {
super(props)
// Initialize component State
this.state = {
count: 0
}
}
...
}

With Class:

import React from 'react'
class MyComponent1 extends React.Component {
// Initialize component State
state = {
count: 0
}
...
}

7. DRY Your React Code

DRY stands for Don’t Repeat Yourself. As you all may have guessed, here this means — do not repeat your code. It simply aims to avoid the occurrence of repeated code.

React best practices offer you to write accurate and concise code, hence making it feasible and simple. The question is — how would you come to know if you are going to consolidate duplicate code?

Well, you just have to look for similarities and if you find any, then it means you are duplicating a code.

8. Eliminating Redundancy with JavaScript Destructuring

Destructuring is a JavaScript feature that divides up various data chunks from an array or object and assigns them to newly formed variables that the programmers have made. Later on, these fresh variables can be applied to a React component and arguments may be sent between parent and child components as props.

For instance, in the code below, the parent component (App) sends the child component (Total) its state data as a prop. Values repeat themselves four times.

import React from "react";
export default class App extends React.Component {
state = { value1: 2, value2: 5, value3: 6, value4: 8 };
render() {
return <Total values={this.state} />;
}
}

function Total(props) {
return (
<h2>
sum:{" "}
{props.values.value1 +
props.values.value2 +
props.values.value3 +
props.values.value4}</h2>
);
}

Using JavaScript restructuring to eliminate redundancy –

const {value 1, value 2, value 3, value 4} = props.values;

Function Total(props){const {value 1, value 2, value 3, value 4} = props.values;
Return <h2> Total: { value 1 + value 2 + value 3 + value 4 } </h2>;
}

9. Prefer Passing Objects

Most people pass set of primitive values but to restrict the number of props being passed, you must prefer passing an object. For instance, you can combine the details of an employee rather than passing each one individually. This function will not be changed to account for future data the student acquires.

// Don't pass primitives

<EmployeeAccount
name={user.name}
email={user.email}
id={user.id}
/>// Pass objects<EmployeeAccount user={user} />

10. Use React Developer Tools

React developer tools come in handy while developing a React app. It comprehends the state, children, props, and component hierarchy. It also helps in debugging the code. Developers may easily construct interactive UIs with the aid of React developer tools.

New features are regularly added to the React Developer tool.

11. Conditional Rendering Practices

React allows users to create distinct components that encapsulate the needed behavior. Then, depending on the state of your React app, you can render some of the components. This is conditional rendering.

Now, there are a lot of ways to perform conditional rendering. However, using short circuit operators are the most easy and simple to use.

// Short circuit operator

const Total= ({total}) => {
return <div>
{total && <h1>Total: {total}</h1>}
</div>
}

12. Use Snippet Libraries

When writing code, you should always make an effort to employ the best and most latest syntax. You may keep your syntax up to date by using code snippets. They also help in ensuring that your code is error and bug free. Therefore, one of the React best practices that you should adhere to for improved efficiency is employing snippet libraries code snippets like ES7 React, Redux, JS Snippets, etc.

13. CSS in JavaScript

It is very common for an active project to have all its CSS styles in a single SCSS file. Global prefix help in avoiding name crashes, however, this technique may not come in handy when the project starts growing.

There are a lot of libraries React offers to write tests of CSS in JS solutions and the most popular libraries are EmotionJS and Glamorous. Here’s how you can use the EmotionJS library –

Step 1: Use NPM to install EmotionJS

npm install --save @emotion/core

Step 2: Import EmotionJS in your React app

import { jsx } from '@emotion/core'

Step 3: Set properties of an element

let Component = props => {
return ( <div
css= {{ border: '1px' }}
{...props}
/> )
}

14. Lazy Loading Implementation

In simple words, lazy loading is a design pattern. You can reduce the initial load time by allowing portions of your application to load only when necessary. For instance, you may initially load the parts and modules needed for user registration and login. The remaining functional or class components can then be loaded based on user navigation.

To grow your React app, lazy loading is a great tool. Your website’s load time slows down if your codebase is large. This is due to the fact that every time a user logs in, the entire app must be loaded.

15. Testing and Monitoring Code

Write tests for the components you help eliminate the probability of errors. Testing guarantees that the parts behave as you would anticipate. Jest, one of the most popular test React components, offers a setting in which you may run your tests.

Running your React apps in your browser allows you to test them as you create them. Any discovered problem would typically be presented on the screen. This is comparable to creating WordPress sites with DevKinsta, a program that lets you create, edit, and launch WordPress sites locally.

16. Use a Fast and Secure Hosting Provider

You can use a variety of tools that make managing and scaling your website simple when you host your website. The files on your local computer can be safely saved on the server because of the server that hosts your website. The main advantage of having your website hosted is that other people can view the amazing things you’ve produced.

Many platforms, like Firebase, Vercel, Netlify, GitHub Pages, as well as premium providers like Azure, AWS, GoDaddy, Bluehost, and others, offer free hosting services to developers.

17. Managing State in ReactJS Application

The process of handling the data that React functional components require in order to render themselves is known as react state management. Usually, this information is kept in the component’s state object. The component will re-render itself when the state object changes.

It has all the information. The presentation, which includes the HTML, CSS, and formatting, makes up the remaining half. The presenting portion of the app relies on state and state management. A React application will only re-render itself when the state changes.

18. Writing clean and readable code using JSX

As a developer, one may want to write clean code structure that is easy to read and simple to comprehend. You can use JSX shorthand, move unrelated code to a single component, and develop separate files for one component. Developers can also group function components together in hooks.

19. Implementing proper routing with React Router

The method of routing involves sending users to various websites in response to their requests or actions. The major application for ReactJS Router is the creation of single page web applications. Multiple routes are defined in the application using React Router.

The React Router Package, a standard library system built on top of React, is used to implement routing in React applications. It gives the information that will be displayed on the web page to the synchronous URL in the browser. It is mostly used for creating one-page web apps and preserves the application’s regular structure and functionality.

20. Handling errors and debugging in a ReactJS application

Error handling and logging are frequently ignored by front-end developers. Any code segment that throws an error must be handled correctly, though. In addition, there are many ways to handle and log failures in React depending on the circumstance. Here are some practices that can be used by developers for handling and debugging errors –

Error boundaries for class components
Try-Catch for catch beyond boundaries
React Error Boundary library

Originally Published at: React Best Practices

Rahul Guleria's Blog