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 made 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. In this article, we will learn about the Top 5 most common mistakes that React developers make.

Some mistakes that react developers makes are given below:

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.

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: Below is the example how beginners use class instead of classname

Javascript

import React from 'react';

function MyComponent() {
    return (
        <div class="yellow-bg">
            <h1>Hello World!</h1>
        </div>
    );
}

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: Below is the example of the calling hooks from class components

Javascript

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        const [sampleState, setState] =
            useState('hello world');
        return (
            <div class="yellow-bg">
                <h1>{sampleState}</h1>
            </div>
        );
    }
}
export default MyComponent

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: 

Javascript

import React from 'react';

function MyComponent() {

  const [sampleState, setState] = useState('hello world');

  return (
    <div class="yellow-bg">
    <h1>{sampleState}</h1>
    </div>
  );
}

export MyComponent

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: 

Javascript

const lists = ['obj1', 'obj2', 'obj3'];

render() {
  return (
    <ul>
      {lists.map(item =>
        <li>{item}</li>)}
    </ul>
  );
}

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:

Javascript

const lists = ['obj1', 'obj2', 'obj3'];

render() {
  return (
    <ul>
      {lists.map(item =>
        <li key={item}>{item}</li>)}
    </ul>
  );
}