10 Essential ESLint Rules Every React.js Developer Must Know

ESLint is a popular tool used by developers to ensure code quality and consistency. When working with JavaScript code, ESLint is particularly important because it can help developers avoid common errors and potential issues that can arise while building complex user interfaces.

In this article, we will learn about ESLint, its importance, and  10 essential ESLint rules that will help you to improve the quality of your React.js application code.

Introduction to ESLint

ESLint is a popular static code analysis tool that helps developers find and fix problems in their JavaScript code. ESLint works by analyzing your code for common syntax errors, potential runtime errors, and code style issues.

ESLint can be integrated into most text editors, providing developers with real-time feedback as they write code. This can help catch errors and issues early, improving code quality and reducing development time. 

In addition, ESLint can be run as part of a continuous integration (CI) pipeline, helping to catch errors before they make it into production. By catching issues early in the development process, developers can reduce the risk of introducing bugs and improve the overall quality of their code.

The Key Reasons Why ESLint is Important for React.js Developers

1. Helps Catch Common Errors: 

React applications can be complex, with multiple components, props, and state variables. ESLint helps catch common errors, such as unused variables, undefined props, and incorrect function calls, which can be difficult to debug in a large codebase.

2. Enforces Best Practices:

 ESLint can enforce best practices for React development, such as consistent code formatting, proper use of JSX syntax, and correct use of lifecycle methods. By enforcing these best practices, ESLint can help developers write more maintainable and readable code.

3. Improves Code Consistency:

 ESLint can help ensure that all developers on a team are following the same coding style and standards. This helps improve code consistency and readability, which is particularly important when working on large, collaborative projects.

4. Reduces Debugging Time:

 By catching errors and enforcing best practices, ESLint can reduce the amount of time spent debugging and fixing issues in a React application. This can help developers focus on building new features and improving the user experience.

5. Supports Integration With Other Tools:

 ESLint can be easily integrated with other tools, such as Continuous Integration (CI) pipelines, which can help ensure code quality throughout the development process.

10 Essential ESLInt Rules for React.js Developers

Here are 10 essential ESLint rules that can help ensure your code is well-structured, consistent, and error-free.

1. react/jsx-uses-react: 

This rule warns when a variable is declared but not used in a JSX expression. 

For example:

Copy
1
2
3
4
5
6
7
     // Bad:
    const myVar = 'hello';
    return <div>{myVar}</div>;
    
    // Good:
    const myVar = 'hello';
    return <div className={myVar}>Hello World</div>;  

2. react/jsx-uses-react:

This rule warns when React is not in scope while using JSX. 

For example:

Copy
1
2
3
4
5
6
7
     // Bad:
    import { useState } from 'react';
    const myComponent = () => <div>Hello World</div>;
    
    // Good:
    import React, { useState } from 'react';
    const myComponent = () => <div>Hello World</div>;

3. react/jsx-fragments:

 This rule enforces the use of fragments instead of wrapping elements in unnecessary containers.

 For example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
     // Bad:
    return (
      <div>
        <div>Hello</div>
      </div>
    );
    
    // Good:
    return (
      <>
        <div>Hello</div>
      </>
    );

4. react/jsx-no-undef: 

This rule warns when a variable or function is used without being defined in a JSX expression.

 For example:

Copy
1
2
3
4
5
6
     // Bad:
    return <MyComponent />;
    
    // Good:
    import MyComponent from './MyComponent';
    return <MyComponent />;

5. react/prop-types: 

This rule warns when a component's props are not correctly defined or validated.

For example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
     // Bad:
    const MyComponent = (props) => {
      return <div>{props.myProp}</div>;
    };
    
    // Good:
    import PropTypes from 'prop-types';
    const MyComponent = (props) => {
      return <div>{props.myProp}</div>;
    };
    MyComponent.propTypes = {
      myProp: PropTypes.string.isRequired,
    };

6. react/display-name: 

This rule warns when a component does not have a displayName property or a named function declaration. 

For example:

Copy
1
2
3
4
5
6
7
8
9
10
     // Bad:
    const MyComponent = () => {
      return <div>Hello World</div>;
    };
    
    // Good:
    const MyComponent = function MyComponent() {
      return <div>Hello World</div>;
    };
    MyComponent.displayName = 'MyComponent';

7. react/self-closing-comp: 

This rule enforces the use of self-closing tags for elements without children. 

For example:

Copy
1
2
3
4
5
     // Bad:
    return <div>Hello World</div>;
    
    // Good:
    return <img src="image.jpg" />;

8. react/no-unescaped-entities: 

This rule warns when unescaped HTML entities are used in JSX.

For example:

Copy
1
2
3
4
5
     // Bad:
    return <div><Hello> World</div>;
    
    // Good:
    return <div>{'<Hello> World'}</div>;

9. react-hooks/rules-of-hooks:

 This rule enforces the correct use of React Hooks. 

For example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
     // Bad 
    import { useState } from 'react';
    
    function MyComponent(props) {
      const [count, setCount] = useState(0);
    
      if (count > 10) {
        const [message, setMessage] = useState('You clicked too many times');
      }
    
      function handleClick() {
        setCount(count + 1);
      }
    
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={handleClick}>Click me</button>
        </div>
      );
    }
    
    // Good 
    import { useState, useEffect } from 'react';
    
    function MyComponent(props) {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        document.title = `You clicked ${count} times`;
      }, [count]);
    
      function handleClick() {
        setCount(count + 1);
      }
    
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={handleClick}>Click me</button>
        </div>
      );
    }

10. react/prop-types

The rule enforces the usage of PropTypes on props. The rule checks whether the PropTypes are defined for every component that accepts props.

For example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
     // Bad
    import React from 'react';
    
    function Greeting(props) {
      return <h1>Hello, {props.name}!</h1>;
    }
    
    export default Greeting;
    
    
    //Good
    import React from 'react';
    import PropTypes from 'prop-types';
    
    function Greeting(props) {
      return <h1>Hello, {props.name}!</h1>;
    }
    
    Greeting.propTypes = {
      name: PropTypes.string.isRequired,
    };
    
    export default Greeting;

By enforcing these essential ESLint rules for React.js, you can ensure that your code is well-structured, consistent, and free of common errors and potential issues.

Summing up:

Now you know about the ESLint rules and how to use them to ensure quality React.js code.

If you are looking for the best way to generate quality React.js application code try DhiWise. The platform speeds up app development and also ensures clean code generation which is easy to scale and maintain.