12 Essential ESLint Rules for React

Why ESLint Matters for React Development

React's flexibility is both a strength and a challenge. Without consistent enforcement, projects quickly accumulate technical debt through inconsistent patterns, deprecated API usage, and performance anti-patterns. ESLint addresses this by providing automated code analysis that catches issues early in the development process.

The plugin ecosystem around ESLint has matured significantly, with eslint-plugin-react becoming an essential tool for React developers. This plugin provides React-specific rules that understand the nuances of JSX, hooks, and component patterns. When properly configured, these rules act as a real-time code review partner, highlighting issues as you type.

Beyond error prevention, ESLint rules serve as documentation for your codebase. New team members quickly learn project standards by seeing violations highlighted in their editor. This passive onboarding reduces onboarding time and ensures consistency across the entire codebase.

For teams building React applications, establishing these linting patterns early prevents costly refactoring later. Consistent code quality across your project builds confidence in your codebase and speeds up development velocity. Our /services/web-development/ team helps organizations implement these best practices for maintainable React codebases.

Setting Up ESLint for React

Getting started with React linting requires installing the core ESLint package along with the React-specific plugin. The modern approach uses flat configuration files (eslint.config.js), which provide a more intuitive structure than the legacy .eslintrc format. According to ESLint's official documentation, the flat configuration format offers improved performance and a cleaner structure for modern React projects.

npm install -D eslint @eslint/js eslint-plugin-react

A basic configuration extends the recommended ruleset and configures language options for your React environment. This foundation ensures you're starting with battle-tested defaults before customizing for your project's specific needs.

The recommended configuration from eslint-plugin-react includes rules that have been refined through years of community feedback. These rules represent patterns that have proven to prevent bugs and improve code quality across countless React projects.

For Next.js projects, the framework provides built-in ESLint support with recommended configurations. Using next/core-web-vitals in your ESLint config gives you Next.js-specific rules alongside React rules. If you're working with our AI automation services, proper ESLint configuration becomes even more critical when integrating AI-powered features into React applications.

JSX Quality Rules

react/jsx-uses-vars

One of the most common sources of confusion in React projects involves variables that appear unused in JSX. Consider a component that defines a constant for formatting but only uses it within JSX expressions. Standard ESLint would flag this variable as unused, but it actually serves a critical purpose in your rendered output.

The jsx-uses-vars rule prevents this false positive by tracking variable usage within JSX expressions. When a variable is referenced anywhere in your JSX, the rule recognizes this as valid usage and suppresses the unused variable warning.

function Welcome({ name }) {
 const greeting = `Hello, ${name}!`; // Used in JSX below
 return <div>{greeting}</div>;
}

react/jsx-key

Keys help React identify which items in a list have changed, been added, or been removed. When rendering arrays of elements, omitting keys or using unstable identifiers leads to performance issues and potential bugs in list updates.

// Bad - using index as key
items.map((item, index) => <ListItem key={index} {...item} />);

// Good - using stable identifier
items.map(item => <ListItem key={item.id} {...item} />);

react/jsx-no-duplicate-props

Duplicate props in JSX create ambiguity about which value should be used. This rule prevents issues by flagging components that receive the same prop multiple times.

Performance Optimization Rules

react/jsx-no-bind

Inline function creation in JSX has performance implications that compound at scale. Each render creates new function instances, which can trigger unnecessary re-renders in child components.

// Bad - creates new function on every render
function MyComponent() {
 return <button onClick={() => handleClick(id)}>Click</button>;
}

// Good - stable reference
function MyComponent() {
 const handleClick = useCallback(() => {
 doSomething(id);
 }, [id]);
 return <button onClick={handleClick}>Click</button>;
}

react/no-unstable-nested-components

Creating components within other components causes unexpected behavior and performance issues. Each render of the parent creates a new component definition with a new identity, breaking memoization and causing unnecessary re-renders.

// Bad - creates new component on each render
function Parent() {
 function Child() {
 return <div>Child content</div>;
 }
 return <Child />;
}

// Good - component defined at module level
function Child() {
 return <div>Child content</div>;
}
function Parent() {
 return <Child />;
}

Hooks-Specific Rules

react/exhaustive-deps

The dependency array in hooks like useEffect, useCallback, and useMemo determines when the hook should re-run. Missing dependencies can cause stale closures, while unnecessary dependencies trigger excessive re-runs.

function SearchResults({ query }) {
 useEffect(() => {
 // Without query in dependencies, this effect won't re-run when query changes
 searchAPI(query);
 }, []); // Missing dependency: query
}

react/hook-use-state

Proper state initialization in the useState hook avoids common pitfalls like lazy initialization that runs on every render.

// Bad - expensive computation runs on every render
const [data] = useState(computeExpensiveData(props.id));

// Good - function passed for lazy initialization
const [data] = useState(() => computeExpensiveData(props.id));

Prop Validation and Type Safety

react/prop-types

Prop validation catches missing or incorrect prop usage at build time rather than runtime. While TypeScript has become popular for prop typing, prop-types remains valuable for projects using plain JavaScript.

import PropTypes from 'prop-types';

function Button({ label, onClick, disabled }) {
 return (
 <button onClick={onClick} disabled={disabled}>
 {label}
 </button>
 );
}

Button.propTypes = {
 label: PropTypes.string.isRequired,
 onClick: PropTypes.func.isRequired,
 disabled: PropTypes.bool,
};

react/require-default-props

Default props ensure components handle missing props gracefully. This rule enforces that optional props have default values defined.

Security and Best Practices

react/no-deprecated

React APIs evolve over time, with older patterns being deprecated in favor of better alternatives. Using deprecated APIs can cause compatibility issues with future React versions.

react/no-unsafe

Some component patterns have been identified as problematic and marked as unsafe. This rule identifies patterns that could cause unexpected behavior, helping future-proof your components.

Configuration and Best Practices

Setting up these rules effectively requires understanding how ESLint configuration works. The flat configuration format provides a clean way to define your rules and plugins.

import react from 'eslint-plugin-react';
import js from '@eslint/js';

export default [
 { files: ['**/*.{js,jsx}'] },
 {
 plugins: { react },
 rules: {
 ...react.configs.recommended.rules,
 'react/jsx-uses-vars': 'error',
 'react/jsx-key': 'error',
 'react/exhaustive-deps': 'warn',
 },
 },
];

Following these React best practices creates a codebase that is easier to maintain and less prone to bugs. For teams looking to improve their React development workflow, establishing proper linting configurations is a foundational step toward code quality. Our web development services help organizations implement comprehensive code quality standards across their React projects.

Sources

1. LogRocket: 12 essential ESLint rules for React - Comprehensive guide covering the 12 most important React-specific ESLint rules with practical examples
2. ESLint Plugin React GitHub Repository - The official ESLint plugin for React with over 3.5 million weekly downloads
3. ESLint Official Documentation - Foundation for understanding ESLint configuration and plugin integration
4. Tim James Dev: The Best ESLint Rules for React Projects - Blog post detailing valuable ESLint plugins and rules for React