overview.mdx

title	Overview
full	true

Linter rules can have false positives, false negatives, and some rules depend on the `react` or `react-dom` [version](https://react.dev/versions) you are using.

• 🌟 Feature - Enhanced or special functionality
• ⚙️ Configurable - Accepts custom options via rule configuration
• 🧪 Experimental - Beta feature, subject to change
• 🐞 Debug - For analysis, metrics, or custom tooling
• 💭 Type Checking - Requires TypeScript type information
• 🔧 Fixable - Provides automatic or interactive fixes
• 🔄 Codemod - Safe AST transformations for deprecations
• 0️⃣ Severity 0 - Disabled by default
• 1️⃣ Severity 1 - Warning level
• 2️⃣ Severity 2 - Error level
• ✅ In Presets - Enabled in recommended and/or strict presets

X Rules

The `jsx-*` rules check for issues exclusive to JSX syntax, which are absent from standard JavaScript (like handwritten `createElement()` calls).

Rule	✅	🌟	Description	react
jsx-dollar	0️⃣ 0️⃣	🔧	Prevents unnecessary $ symbols before JSX expressions
jsx-key-before-spread	1️⃣ 1️⃣	🧪	Enforces key prop placement before spread props
jsx-no-comment-textnodes	1️⃣ 1️⃣		Prevents comment strings (e.g., beginning with // or /*) from being accidentally inserted into a JSX element's text nodes
jsx-no-duplicate-props	0️⃣ 0️⃣		Disallows duplicate props in JSX elements
jsx-no-iife	0️⃣ 2️⃣	🧪	Disallows immediately-invoked function expressions in JSX
jsx-no-undef	0️⃣ 0️⃣		Prevents using variables in JSX that are not defined in the scope
jsx-shorthand-boolean	0️⃣ 0️⃣	🔧 ⚙️	Enforces shorthand syntax for boolean props
jsx-shorthand-fragment	0️⃣ 0️⃣	🔧 ⚙️	Enforces shorthand syntax for fragment elements
jsx-uses-react	0️⃣ 0️⃣		Marks React variables as used when JSX is present
jsx-uses-vars	0️⃣ 0️⃣		Marks JSX element variables as used
no-access-state-in-setstate	2️⃣ 2️⃣		Disallows accessing this.state inside setState calls
no-array-index-key	1️⃣ 1️⃣		Disallows using an item's index in the array as its key
no-children-count	1️⃣ 1️⃣		Disallows the use of Children.count from the react package
no-children-for-each	1️⃣ 1️⃣		Disallows the use of Children.forEach from the react package
no-children-map	1️⃣ 1️⃣		Disallows the use of Children.map from the react package
no-children-only	1️⃣ 1️⃣		Disallows the use of Children.only from the react package
no-children-prop	0️⃣ 2️⃣		Disallows passing children as a prop
no-children-to-array	1️⃣ 1️⃣		Disallows the use of Children.toArray from the react package
no-class-component	0️⃣ 2️⃣		Disallows class components except for error boundaries
no-clone-element	1️⃣ 1️⃣		Disallows cloneElement
no-component-will-mount	2️⃣ 2️⃣	🔄	Replaces usage of componentWillMount with UNSAFE_componentWillMount	>=16.3.0
no-component-will-receive-props	2️⃣ 2️⃣	🔄	Replaces usage of componentWillReceiveProps with UNSAFE_componentWillReceiveProps	>=16.3.0
no-component-will-update	2️⃣ 2️⃣	🔄	Replaces usage of componentWillUpdate with UNSAFE_componentWillUpdate	>=16.3.0
no-context-provider	1️⃣ 1️⃣	🔄	Replaces usage of <Context.Provider> with <Context>	>=19.0.0
no-create-ref	2️⃣ 2️⃣		Disallows createRef in function components
no-default-props	2️⃣ 2️⃣		Disallows the defaultProps property in favor of ES6 default parameters
no-direct-mutation-state	2️⃣ 2️⃣		Disallows direct mutation of this.state
no-duplicate-key	0️⃣ 0️⃣	🧪	Prevents duplicate key props on sibling elements when rendering lists
no-forward-ref	1️⃣ 1️⃣	🔄	Replaces usage of forwardRef with passing ref as a prop	>=19.0.0
no-implicit-key	1️⃣ 1️⃣	🧪	Prevents key from not being explicitly specified (e.g., spreading key from objects)
no-leaked-conditional-rendering	0️⃣ 0️⃣	💭	Prevents problematic leaked values from being rendered
no-missing-component-display-name	0️⃣ 0️⃣		Enforces that all components have a displayName that can be used in DevTools
no-missing-context-display-name	0️⃣ 0️⃣	🔧	Enforces that all contexts have a displayName that can be used in DevTools
no-missing-key	2️⃣ 2️⃣		Disallows missing key on items in list rendering
no-misused-capture-owner-stack	0️⃣ 2️⃣	🧪	Prevents incorrect usage of captureOwnerStack
no-nested-component-definitions	2️⃣ 2️⃣		Disallows nesting component definitions inside other components
no-nested-lazy-component-declarations	2️⃣ 2️⃣		Disallows nesting lazy component declarations inside other components
no-prop-types	2️⃣ 2️⃣		Disallows propTypes in favor of TypeScript or another type-checking solution
no-redundant-should-component-update	2️⃣ 2️⃣		Disallows shouldComponentUpdate when extending React.PureComponent
no-set-state-in-component-did-mount	1️⃣ 1️⃣		Disallows calling this.setState in componentDidMount outside functions such as callbacks
no-set-state-in-component-did-update	1️⃣ 1️⃣		Disallows calling this.setState in componentDidUpdate outside functions such as callbacks
no-set-state-in-component-will-update	1️⃣ 1️⃣		Disallows calling this.setState in componentWillUpdate outside functions such as callbacks
no-string-refs	2️⃣ 2️⃣	🔄	Replaces string refs with callback refs	>=16.3.0
no-unnecessary-key	0️⃣ 0️⃣	🧪	Disallows unnecessary key props on nested child elements when rendering lists
no-unnecessary-use-callback	0️⃣ 1️⃣	🧪	Disallows unnecessary usage of useCallback
no-unnecessary-use-memo	0️⃣ 1️⃣	🧪	Disallows unnecessary usage of useMemo
no-unnecessary-use-prefix	1️⃣ 1️⃣		Enforces that a function with the use prefix uses at least one Hook inside it
no-unnecessary-use-ref	0️⃣ 0️⃣	🧪	Disallows unnecessary usage of useRef
no-unsafe-component-will-mount	1️⃣ 1️⃣		Warns about the use of UNSAFE_componentWillMount in class components
no-unsafe-component-will-receive-props	1️⃣ 1️⃣		Warns about the use of UNSAFE_componentWillReceiveProps in class components
no-unsafe-component-will-update	1️⃣ 1️⃣		Warns about the use of UNSAFE_componentWillUpdate in class components
no-unstable-context-value	0️⃣ 1️⃣		Prevents non-stable values (i.e., object literals) from being used as a value for Context.Provider
no-unstable-default-props	0️⃣ 1️⃣	⚙️	Prevents using referential-type values as default props in object destructuring
no-unused-class-component-members	1️⃣ 1️⃣		Warns about unused class component methods and properties
no-unused-props	0️⃣ 0️⃣	💭 🧪	Warns about component props that are defined but never used
no-unused-state	0️⃣ 1️⃣		Warns about unused class component state
no-use-context	1️⃣ 1️⃣	🔄	Replaces usage of useContext with use	>=19.0.0
no-useless-forward-ref	1️⃣ 1️⃣		Disallows useless forwardRef calls on components that don't use refs
no-useless-fragment	0️⃣ 1️⃣	🔧 ⚙️	Disallows useless fragment elements
prefer-destructuring-assignment	0️⃣ 1️⃣		Enforces destructuring assignment for component props and context
prefer-namespace-import	0️⃣ 0️⃣	🔧	Enforces importing React via a namespace import
prefer-read-only-props	0️⃣ 0️⃣	💭 🧪	Enforces read-only props in components
prefer-use-state-lazy-initialization	1️⃣ 1️⃣		Enforces wrapping function calls made inside useState in an initializer function

DOM Rules

DOM rules target `React DOM`-specific concerns including security vulnerabilities, deprecated APIs, and DOM property usage.

Rule	✅	🌟	Description	react-dom
no-dangerously-set-innerhtml	1️⃣ 1️⃣		Disallows DOM elements from using dangerouslySetInnerHTML
no-dangerously-set-innerhtml-with-children	2️⃣ 2️⃣		Disallows DOM elements from using dangerouslySetInnerHTML and children at the same time
no-find-dom-node	2️⃣ 2️⃣		Disallows findDOMNode
no-flush-sync	2️⃣ 2️⃣		Disallows flushSync
no-hydrate	2️⃣ 2️⃣	🔄	Replaces usage of ReactDOM.hydrate() with hydrateRoot()	>=18.0.0
no-missing-button-type	0️⃣ 1️⃣	🔧	Enforces an explicit type attribute for button elements
no-missing-iframe-sandbox	0️⃣ 1️⃣	🔧	Enforces an explicit sandbox attribute for iframe elements
no-namespace	2️⃣ 2️⃣		Enforces the absence of a namespace in React elements
no-render	2️⃣ 2️⃣	🔄	Replaces usage of ReactDOM.render() with createRoot(node).render()	>=18.0.0
no-render-return-value	2️⃣ 2️⃣		Disallows the return value of ReactDOM.render
no-script-url	1️⃣ 1️⃣		Disallows javascript: URLs as attribute values
no-string-style-prop	0️⃣ 0️⃣		Disallows the use of string style prop in JSX. Use an object instead
no-unknown-property	0️⃣ 0️⃣	🔧 ⚙️	Disallows unknown DOM properties
no-unsafe-iframe-sandbox	1️⃣ 1️⃣		Enforces that the sandbox attribute for iframe elements is not set to unsafe combinations
no-unsafe-target-blank	0️⃣ 1️⃣	🔧	Disallows target="_blank" without rel="noreferrer noopener"
no-use-form-state	2️⃣ 2️⃣	🔄	Replaces usage of useFormState with useActionState	>=19.0.0
no-void-elements-with-children	2️⃣ 2️⃣		Disallows children in void DOM elements
prefer-namespace-import	0️⃣ 0️⃣	🔧	Enforces importing React DOM via a namespace import

RSC Rules

RSC rules target [React Server Components](https://react.dev/reference/rsc/server-components), [React Server Functions](https://react.dev/reference/rsc/server-functions) and RSC [Directives](https://react.dev/reference/rsc/directives).

Rule	✅	🌟	Description	react
function-definition	0️⃣ 0️⃣	🔧 🧪	Validate and transform React Server/Client Function definitions	>=19.0.0

Web API Rules

Web API rules prevent resource leaks by detecting uncleaned Web API subscriptions in components and hooks.

Rule	✅	🌟	Description
no-leaked-event-listener	1️⃣ 1️⃣		Enforces that every addEventListener in a component or custom hook has a corresponding removeEventListener
no-leaked-interval	1️⃣ 1️⃣		Enforces that every setInterval in a component or custom hook has a corresponding clearInterval
no-leaked-resize-observer	1️⃣ 1️⃣		Enforces that every ResizeObserver created in a component or custom hook has a corresponding ResizeObserver.disconnect()
no-leaked-timeout	1️⃣ 1️⃣		Enforces that every setTimeout in a component or custom hook has a corresponding clearTimeout

Hooks Extra Rules

This section contains rules that are not part of the official `eslint-plugin-react-hooks` plugin but are useful for specific use cases or patterns.

Rule	✅	🌟	Description
no-direct-set-state-in-use-effect	1️⃣ 1️⃣		Disallows direct calls to the set function of useState in useEffect

Naming Convention Rules

Naming convention rules enforce consistent naming patterns for `React` entities.

Rule	✅	🌟	Description	react
component-name	0️⃣ 0️⃣	⚙️	Enforces naming conventions for components
context-name	1️⃣ 1️⃣		Enforces the context name to be a valid component name with the suffix Context	>=19.0.0
filename	0️⃣ 0️⃣	⚙️	Enforces consistent file-naming conventions
filename-extension	0️⃣ 0️⃣	⚙️	Enforces consistent use of the JSX file extension
ref-name	1️⃣ 1️⃣		Enforces identifier names assigned from useRef calls to be either ref or end with Ref
use-state	1️⃣ 1️⃣	⚙️	Enforces destructuring and symmetric naming of the useState hook value and setter

Debug Rules

The `eslint-plugin-react-debug` package is not included in the unified plugin. You need to install and configure it separately.

These rules are useful for code metrics, code transformation, issue reporting, or when building custom tooling that needs to identify specific patterns.

Rule	✅	🌟	Description
class-component	0️⃣ 0️⃣	🐞	Reports all class components in JSON format
function-component	0️⃣ 0️⃣	🐞	Reports all function components in JSON format
hook	0️⃣ 0️⃣	🐞	Reports all React Hooks in JSON format
is-from-react	0️⃣ 0️⃣	🐞	Reports all identifiers initialized from React in JSON format
is-from-ref	0️⃣ 0️⃣	🐞	Reports all identifiers initialized or derived from refs in JSON format
jsx	0️⃣ 0️⃣	🐞	Reports all JSX elements and fragments in JSON format

See Also

• Removed Rules ↗