Most Common Mistakes That React Developers Make

React is a JavaScript library for building user interfaces. During the process of developing a React app, we make a lot of common mistakes. That’s not a problem that we make mistakes, but it’s always a problem more than anything else if we don’t learn something by making a mistake. Learning from mistakes should be in our attitude as a developer. In this article, we will know about the Top 5 most common mistakes that React developers make.

1. Fail to Proper Structure Application

There are two ways of writing applications: putting everything in one big component (monolith), or splitting everything into smaller components (micro-services). Beginners often do not build enough, this makes their code more complicated.

One of the most important features of React is the component. By design, the React applications are designed to be divided into separate components. Consider the following page:

To build this page correctly using React, we should think of it as a group of components that form a page rather than a whole page itself. So, in this way, we can create different sets of components that we can integrate together to make up the whole page.

Example: The big component may look like the following:

This practice makes code more complex, and it may be difficult for you to debug a big component. So you should invest your time to separate the various interdependent parts of your application, and pick up and move those parts into different components. This makes your components easier to maintain and reuse where required.

We can split the above components into three different components in the following manner: 

• Header Component:

  Header.js

  
  

  
  
  

  import React, { Component } from 'react';    class Header extends Component {   render() {     return (       <div>         { // Header related HTML }       </div>     );   } }    export default Header;

 

• Chart Component:

  Chart.js

  
  

  
  
  

  import React, { Component } from 'react';    class Chart extends Component {   render() {     return (       <div>         { // Chart related HTML }       </div>     );   } }    export default Chart;

• Footer Component:

  Footer.js

  
  

  
  
  

  import React, { Component } from 'react';    class Footer extends Component {   render() {     return (       <div>         { // Footer related HTML }       </div>     );   } }    export default Footer;

Main Application: We have separated our application into three different components, now we can integrate it into our application in the following manner. This method saves your time and makes your code reusable and easy to debug.

2. Not Capitalizing Component Name

The name of every React component must begin with a capital letter otherwise if we used that component then the browser will treat that component as a built-in element such as span or div, and you may get the warning.

Example: If we create a component named chart and try to render <chart/>, React will ignore this component, and we will get the following warning: 

[WARNING]
The tag <chart> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

To avoid this kind of warning, always start the React component name with the upper case letter. 

3. Using class instead of className 

While specifying the class name of the element in React, beginners use class instead of className and this gives them errors. As class keyword is already reserved in JavaScript and JSX is nothing but an extension of JavaScript that’s why React uses className instead of class.

Example:

You may think that the above code is valid, but it is an invalid code because it uses a class to specify the class name of the element. To avoid error use className to specify the class name of an element. Some experienced React developers also repeat this mistake often so always keep in mind that the class keyword is already reserved in JavaScript, so React uses className to specify the class name of an element.

4. Calling Hooks from Class Components

Hooks allow us to write better React code and make use of state and component life cycle methods inside functional components. But sometimes, you may call hooks from class components, and you may get errors. 

React provides many hooks like useEffect, useState, useRef, and many more. But we can use these hooks only inside functional components. 

Example:

The above code may look valid at a glance, but it is an invalid code because in the above code useState is being called from the class component. As useState is a hook so above code will give us the following error: 

Note: React Hook “useState” cannot be called in class component.React Hooks must be called in function component.

So correct way of using hooks is to call it from the function component as shown below: 

5. Not using key props when using Array map method 

We usually use the array map method to display a list of items stored in an array. We can render a list of items in the following manner: 

The above code may work for smaller applications. But sometimes you may run into render issues while trying to modify or delete items from the list. React has to keep track of each of the list elements on the DOM. So key props help React to identify which items have been modified or deleted. To give a unique id to each and every element inside the array, a key prop is required. Often we don’t use a key prop when using the Array map method, but sometimes it may create some issues.

We can add a key to all your list elements in the following: