5 common mistakes to avoid when using React in 2022

Since Facebook released React in 2013, it has become one of the most widely used JavaScript frameworks. According to Statista, React is the world’s second most used web development framework. As the popularity of JavaScript remains high, React utilizes its capabilities to provide the most comprehensive tool sets to build web and mobile applications.

As a React developer, you have the opportunity to be part of a technology that has immense growth potential shortly. More and more web developers are adopting this JavaScript framework. Backed by Facebook and a vast developer community, React is a framework to master if you want to become a web developer.

However, there are some common mistakes that you must avoid. Here we take a look at the most common React mistakes developers commit.

1. Not creating enough components

A common mistake any React developer can make is not creating enough components. React is a highly versatile language, and if you are creating a few significant components, you’re missing its reusability. While it is not wrong to produce large components that execute many tasks, it is recommended that you create smaller components, more preferably, one component corresponding to one function. This approach saves time and is a significant benefit when debugging the code. Any errors can be easily spotted as you know which components are associated with which functions.

Here is an example of a TodoList component broken down to single functions:

// ./components/TodoList.js

 import React from ‘react’;

 import { useTodoList } from ‘../hooks/useTodoList’;

import { useQuery } from ‘../hooks/useQuery’;

import TodoItem from ‘./TodoItem’;

import NewTodo from ‘./NewTodo’;

const TodoList = () => {

  const { getQuery, setQuery } = useQuery();

  const todos = useTodoList();

  return (

   <div>

    <ul>

     {todos.map(({ id, title, completed }) => (

      <TodoItem key={id} id={id} title={title} completed={completed} />

     ))}

     <NewTodo />

    </ul>

    <div>

     Highlight Query for incomplete items:

     <input value={getQuery()} onChange={e => setQuery(e.target.value)} />

    </div>

   </div>

  );

};

 export default TodoList;

2. Modifying the state directly

Another common mistake React developers commit is modifying the state directly. As a rule of thumb, in React, the state must always be immutable; otherwise, there will be performance issues that will be difficult to fix.

Here’s a code:

const modifyPetsList = (element, id) => {

  petsList[id].checked = element.target.checked;

setPetsList(petsList);

};

Here we want to update the checked key of an object in the array based on the state of the checkbox, but there is an issue. React cannot observe and trigger the re-rendering of the object because it has been changed with the same reference.

Either you can use the setState() method or the useState() hook to fix the issue. These methods will ensure that React acknowledges the changes made to the object and that your DOM is correctly re-rendered.

3. When rendering the list, do not use the key

If you are a beginner or used our React developer toolkit to learn the language, you must have come across the prompt when you render a list according to the method described in the documentation.

For example, rendering these arrays:

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) => <li>{number}</li>);

will display this prompt on the console “a key should be provided for list items.”

The solution is obvious here. We have to follow the prompts and add the key attribute to each item like this:

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number, index) => <li key={index}>{number}</li>);

The key helps React identify which elements have changed, which is why you need to assign a unique value to the key. In the above example, we have used the index as the key value.

However, we do not recommend you to use the key and ignore the prompt.

This is because the value of the key will change every time an item is added or removed from the array. It will result in performance degradation.

4. Using Redux too much

Redux is becoming very popular among React developers, primarily working on large apps. It is helpful as it helps manage global state, but you don’t have to use it to manage every state in your React apps.

If your applications do not use parallel-level components that need to exchange information, then there is no need to use Redux. Instead, you should use a local state method or useState when you use form components or want to check the state of an element every time it is accessed.

5. Incorrect use of boolean operators

In JSX/TSX syntax, React developers often use boolean values to control rendered elements utilizing the && operator like this:

const count = 0;

const Comp = () => count && <h1>Chris1993</h1>;

While we want that page to display empty content at this time, it will actually display 0 on it.

The error is because the falsy expression causes elements after && to be skipped. However, the value of the falsy expression is returned.

The correct way to write the condition without relying on the JavaScript’s boolean value to compare:

const count = 0;

const Comp = () => count > 0 && <h1>Chris1993</h1>;

Now the page will display empty content.

Conclusion 

Now that you have learned some common React mistakes, keep them into account when creating your next React app. Gradually you can inculcate these best practices and soon they will become a learned behavior and improve your code quality.

And if you are an experienced React developer, join Talent500. We are a global remote team-building platform that Fortune500 companies and fast-growing startups use to hire talent.