Question 1

How do I set up eslint-plugin-react with Create React App?

Accepted Answer

Since Create React App hides ESLint config, you may need to eject or use tools like craco. Alternatively, create a custom ESLint config file and extend the plugin's recommended preset, ensuring JSX is enabled in parser options.

Question 2

What's the difference between eslint-plugin-react and eslint-plugin-react-hooks?

Accepted Answer

eslint-plugin-react covers general React patterns like JSX and components, while eslint-plugin-react-hooks specifically enforces the Rules of Hooks. For complete linting, use both plugins together as suggested in the README.

Question 3

How to disable a specific rule in eslint-plugin-react?

Accepted Answer

In your ESLint configuration, set the rule to 'off' in the rules object. For example, add 'react/jsx-key': 'off' to skip key prop checks, but note this might reduce code quality safeguards.

Question 4

Why isn't my React component recognized by eslint-plugin-react?

Accepted Answer

Check that JSX is enabled in parser options and that shared settings like react.version are configured. If using component wrappers (e.g., Mobx observer), ensure they are listed in componentWrapperFunctions.

Question 5

How to configure eslint-plugin-react for TypeScript?

Accepted Answer

Use @typescript-eslint/parser as your ESLint parser and extend the plugin's configs. Handle TypeScript-specific JSX by adjusting settings, and consider rules for prop types if not using TypeScript's native type checking.

Question 6

What are the most important rules in eslint-plugin-react?

Accepted Answer

Start with the 'recommended' config, which includes critical rules like jsx-key and prop-types. For security, enable jsx-no-target-blank; for performance, add jsx-no-constructed-context-values based on your project needs.

React

What is React?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions