React JS Bad Practices

Every developer wants to write clean and concise code for his apps so that he does not face any issues while debugging them.

But still, sometimes we get tempted or honey-trapped and make some pretty common mistakes that are not recommended or are categorized as anti-pattern or bad practices in React which should be avoided at all costs.

Otherwise, we will have to face some serious performance issues later in the development process.

In this blog, we will discuss some ReactJS Bad Practices that developers do, and how to avoid them.

Index

1. Using Index as the key in the map function
2. Polluting Render method by using Anonymous functions
3. Using Nested Components
4. Nesting Ternary Operator in Render
5. Not Destructuring Props
6. Prop Drilling
7. Not cleaning up Event Listeners
8. Using Inline CSS
9. Using Divs everywhere

Let’s start…

1. Using Index as the Key in the map() function

The map() function is used to print all the elements of an array into a new array by calling a function for each element.

In react, the map() function requires a key to distinguish between each element and to detect their exact changes.

According to the official documentation, ‘A key is a special string attribute you need to include while creating lists of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.’

Problem

Using the index of an array as the key for the map() function is not recommended as there can be a change in the order of elements if we perform any operation like addition, deletion, etc on them.

Because of this, React will not be able to detect the exact changes in the state which can cause some serious performance issues.

Example

Suppose we have a list of 5 elements with key as the index

<ul>
<li key={1}>Milk</li>
<li key={2}>Eggs</li>
<li key={3}>Food</li>
<li key={4}>Bread</li>
<li key={5}>Sausage</li>
</ul>;

Now, in this case, there is a state change like adding a new item, deleting an item, etc, React just iterates over each list in both the cases and updates the React DOM with only the state that has some changes in it (Virtual DOM concept).

Let’s say, we have added an item at the end of the list. As there is no change in the order of the items, React will only render once to add the extra item at the end.

<ul>
<li key={1}>Milk</li>
<li key={2}>Eggs</li>
<li key={3}>Food</li>
<li key={4}>Bread</li>
<li key={5}>Sausage</li>
<li key={6}>Butter</li>
</ul>;

But what if we have to add an item at the beginning or in the middle of the list.

This time, there will be a change in the order of each item, and because of that React will re-render all the elements again and not the one that has been added.

<ul>
<li key={1}>Butter</li>
<li key={2}>Milk</li>
<li key={3}>Eggs</li>
<li key={4}>Food</li>
<li key={5}>Bread</li>
<li key={6}>Sausage</li>
</ul>;

Solution

This can be very easily avoided by using a unique id. Let’s take the same example again but this time the key will have a unique value for every item.

<ul>
<li key={"1a"}>Milk</li>
<li key={"2b"}>Eggs</li>
<li key={"3c"}>Food</li>
<li key={"4d"}>Bread</li>
<li key={"5e"}>Sausage</li>
</ul>;

Now even if we add elements at the beginning or end, we won’t face an issue since keys are different and it has nothing to do with the index of the array.

Since, React tracks all list items with their key attribute, after adding a new element it would not re-render the previous list items.

2. Polluting Render Method by using Anonymous Functions

To understand this, let’s take an example

import React from "react";
const App = () => {
const handleClick = () => {
console.log("You Clicked???????");
};
return <button onClick={() => handleClick()}>Click me</button>;
};
export default App;

There is no problem with this code, and it’s also giving us our desired output as shown.

Then, why is it not recommended?

Problem

The problem with this syntax is that a different callback is created each time the Button renders.

In most cases, this is fine. However, if this callback is passed as a prop to lower, there will be many extra re-renders.

What it means is, by passing an anonymous function, React will always re-render itself since it receives a new anonymous function as a prop which it is unable to compare to the previous anonymous function as both of them are anonymous.

Solution

We can use the binding in the constructor or using the class fields syntax, or simply pass the function as an event handler to avoid this sort of problem.

By doing this we are telling React that nothing is changed, so that unnecessary re-renders can be avoided.

3. Nested Components

React has given us the ability to divide one huge component into countless small components, and link them with the help of props which has made our code cleaner and more understandable.

But sometimes, we get tempted and avoid the use of props. We declare both parent and the child component in the same component as shown

import React, { useState } from "react";
const Main = () => {
const [name, setName] = useState("Ateev");
const Sub = () => {
return <h1 className="p-5">Hello {name}, I am the child of Mr & Mrs Khana</h1>;
};
return (
<>
<Sub />
</>
);
};
export default Main;

There is nothing wrong with defining both our parent and the child component under the same hood, and the app will also work fine, but there will be some serious performance issues with our app.

Problem

We will receive performance issues because every time our Main Component gets rendered, the SubComponent also gets rendered, and this goes on for infinity

Solution

By passing props we can solve this issue very easily as now we are telling React until and unless there is a change in the prop, we don’t want the Sub Component to be rendered.

Continue Reading.