# Documentation

- Getting Started
  - [Getting Started](/docs/getting-started): Learn how to install and configure ESLint React for your project
  - [JavaScript](/docs/getting-started/javascript): Getting started using ESLint React in your JavaScript React project
  - [TypeScript](/docs/getting-started/typescript): Getting started using ESLint React in your TypeScript React project
- [Migrating from eslint-plugin-react](/docs/migrating-from-eslint-plugin-react): Complete guide for migrating from eslint-plugin-react to ESLint React
- [Migrating from eslint-plugin-react-hooks](/docs/migrating-from-eslint-plugin-react-hooks): Complete guide for migrating from eslint-plugin-react-hooks to ESLint React

- **Core Reference**
- Rules
  - [Rules](/docs/rules)

  - **X Rules**
  - [error-boundaries](/docs/rules/error-boundaries): Validates usage of Error Boundaries instead of try/catch for errors in child components.
  - [exhaustive-deps](/docs/rules/exhaustive-deps): Verifies the list of dependencies for Hooks like 'useEffect' and similar.
  - [globals](/docs/rules/globals): Validates against assignment/mutation of globals during render, part of ensuring that side effects must run outside of render.
  - [immutability](/docs/rules/immutability): Validates against passing functions that mutate captured local variables into frozen contexts such as JSX props, hook arguments, and hook return values.
  - [no-access-state-in-setstate](/docs/rules/no-access-state-in-setstate): Disallows accessing 'this.state' inside 'setState' calls.
  - [no-array-index-key](/docs/rules/no-array-index-key): Disallows using an item's index in the array as its key.
  - [no-children-count](/docs/rules/no-children-count): Disallows the use of 'Children.count' from the 'react' package.
  - [no-children-for-each](/docs/rules/no-children-for-each): Disallows the use of 'Children.forEach' from the 'react' package.
  - [no-children-map](/docs/rules/no-children-map): Disallows the use of 'Children.map' from the 'react' package.
  - [no-children-only](/docs/rules/no-children-only): Disallows the use of 'Children.only' from the 'react' package.
  - [no-children-to-array](/docs/rules/no-children-to-array): Disallows the use of 'Children.toArray' from the 'react' package.
  - [no-class-component](/docs/rules/no-class-component): Disallows class components except for error boundaries.
  - [no-clone-element](/docs/rules/no-clone-element): Disallows 'cloneElement'.
  - [no-component-will-mount](/docs/rules/no-component-will-mount): Replaces usage of 'componentWillMount' with 'UNSAFE_componentWillMount'.
  - [no-component-will-receive-props](/docs/rules/no-component-will-receive-props): Replaces usage of 'componentWillReceiveProps' with 'UNSAFE_componentWillReceiveProps'.
  - [no-component-will-update](/docs/rules/no-component-will-update): Replaces usage of 'componentWillUpdate' with 'UNSAFE_componentWillUpdate'.
  - [no-context-provider](/docs/rules/no-context-provider): Replaces usage of '<Context.Provider>' with '<Context>'.
  - [no-create-ref](/docs/rules/no-create-ref): Disallows 'createRef' in function components and Hooks.
  - [no-direct-mutation-state](/docs/rules/no-direct-mutation-state): Disallows direct mutation of 'this.state'.
  - [no-duplicate-key](/docs/rules/no-duplicate-key): Prevents duplicate 'key' props on sibling elements when rendering lists.
  - [no-forward-ref](/docs/rules/no-forward-ref): Replaces usage of 'forwardRef' with passing 'ref' as a prop.
  - [no-implicit-children](/docs/rules/no-implicit-children): Prevents implicitly passing the 'children' prop to components.
  - [no-implicit-key](/docs/rules/no-implicit-key): Prevents implicitly passing the 'key' prop to components.
  - [no-implicit-ref](/docs/rules/no-implicit-ref): Prevents implicitly passing the 'ref' prop to components.
  - [no-leaked-conditional-rendering](/docs/rules/no-leaked-conditional-rendering): Prevents problematic leaked values from being rendered.
  - [no-missing-component-display-name](/docs/rules/no-missing-component-display-name): Enforces that all components have a 'displayName' that can be used in DevTools.
  - [no-missing-context-display-name](/docs/rules/no-missing-context-display-name): Enforces that all contexts have a 'displayName' that can be used in DevTools.
  - [no-missing-key](/docs/rules/no-missing-key): Disallows missing 'key' on items in list rendering.
  - [no-misused-capture-owner-stack](/docs/rules/no-misused-capture-owner-stack): Prevents incorrect usage of 'captureOwnerStack'.
  - [no-nested-component-definitions](/docs/rules/no-nested-component-definitions): Disallows nesting component definitions inside other components.
  - [no-nested-lazy-component-declarations](/docs/rules/no-nested-lazy-component-declarations): Disallows nesting lazy component declarations inside other components or hooks.
  - [no-set-state-in-component-did-mount](/docs/rules/no-set-state-in-component-did-mount): Disallows calling 'this.setState' in 'componentDidMount' outside functions such as callbacks.
  - [no-set-state-in-component-did-update](/docs/rules/no-set-state-in-component-did-update): Disallows calling 'this.setState' in 'componentDidUpdate' outside functions such as callbacks.
  - [no-set-state-in-component-will-update](/docs/rules/no-set-state-in-component-will-update): Disallows calling 'this.setState' in 'componentWillUpdate' outside functions such as callbacks.
  - [no-unnecessary-use-prefix](/docs/rules/no-unnecessary-use-prefix): Enforces that a function with the 'use' prefix uses at least one Hook inside it.
  - [no-unsafe-component-will-mount](/docs/rules/no-unsafe-component-will-mount): Warns about the use of 'UNSAFE_componentWillMount' in class components.
  - [no-unsafe-component-will-receive-props](/docs/rules/no-unsafe-component-will-receive-props): Warns about the use of 'UNSAFE_componentWillReceiveProps' in class components.
  - [no-unsafe-component-will-update](/docs/rules/no-unsafe-component-will-update): Warns about the use of 'UNSAFE_componentWillUpdate' in class components.
  - [no-unstable-context-value](/docs/rules/no-unstable-context-value): Prevents non-stable values (i.e., object literals) from being used as a value for 'Context.Provider'.
  - [no-unstable-default-props](/docs/rules/no-unstable-default-props): Prevents using referential-type values as default props in object destructuring.
  - [no-unused-class-component-members](/docs/rules/no-unused-class-component-members): Warns about unused class component methods and properties.
  - [no-unused-props](/docs/rules/no-unused-props): Warns about component props that are defined but never used.
  - [no-unused-state](/docs/rules/no-unused-state): Warns about state variables that are defined but never used.
  - [no-use-context](/docs/rules/no-use-context): Replaces usage of 'useContext' with 'use'.
  - [purity](/docs/rules/purity): Validates that components and hooks are pure by checking that they do not call known-impure functions during render.
  - [refs](/docs/rules/refs): Validates correct usage of refs by checking that 'ref.current' is not read or written during render.
  - [rules-of-hooks](/docs/rules/rules-of-hooks): Enforces the Rules of Hooks.
  - [set-state-in-effect](/docs/rules/set-state-in-effect): Validates against setting state synchronously in an effect, which can lead to re-renders that degrade performance.
  - [set-state-in-render](/docs/rules/set-state-in-render): Validates against unconditionally setting state during render, which can trigger additional renders and potential infinite render loops.
  - [static-components](/docs/rules/static-components): Validates that components are static, not recreated every render.
  - [unsupported-syntax](/docs/rules/unsupported-syntax): Validates against syntax that React Compiler does not support.
  - [use-memo](/docs/rules/use-memo): Validates that 'useMemo' is called with a callback that returns a value.
  - [use-state](/docs/rules/use-state): Enforces correct usage of 'useState', including destructuring, symmetric naming of the value and setter, and wrapping expensive initializers in a lazy initializer function.

  - **JSX Rules**
  - [no-children-prop](/docs/rules/jsx-no-children-prop): Disallows passing 'children' as a prop.
  - [no-children-prop-with-children](/docs/rules/jsx-no-children-prop-with-children): Disallows passing 'children' as a prop when children are also passed as nested content.
  - [no-comment-textnodes](/docs/rules/jsx-no-comment-textnodes): Prevents comment strings from being accidentally inserted into a JSX element's text nodes.
  - [no-key-after-spread](/docs/rules/jsx-no-key-after-spread): Prevent patterns that cause deoptimization when using the automatic JSX runtime.
  - [no-leaked-dollar](/docs/rules/jsx-no-leaked-dollar): Catches '$' before '{expr}' in JSX — typically from template literal '${expr}' being copy-pasted into JSX without removing the '$'. The '$' "leaks" into the rendered output.
  - [no-leaked-semicolon](/docs/rules/jsx-no-leaked-semicolon): Catches ';' at the start of JSX text nodes — typically from accidentally placing a statement-ending ';' inside JSX. The ';' "leaks" into the rendered output.
  - [no-namespace](/docs/rules/jsx-no-namespace): Disallow JSX namespace syntax, as React does not support them.
  - [no-useless-fragment](/docs/rules/jsx-no-useless-fragment): Disallows useless fragment elements.

  - **RSC Rules**
  - [function-definition](/docs/rules/rsc-function-definition): Validates and transforms React Client/Server Function definitions.

  - **DOM Rules**
  - [no-dangerously-set-innerhtml](/docs/rules/dom-no-dangerously-set-innerhtml): Disallows DOM elements from using 'dangerouslySetInnerHTML'.
  - [no-dangerously-set-innerhtml-with-children](/docs/rules/dom-no-dangerously-set-innerhtml-with-children): Disallows DOM elements from using 'dangerouslySetInnerHTML' and 'children' at the same time.
  - [no-find-dom-node](/docs/rules/dom-no-find-dom-node): Disallows 'findDOMNode'.
  - [no-flush-sync](/docs/rules/dom-no-flush-sync): Disallows 'flushSync'.
  - [no-hydrate](/docs/rules/dom-no-hydrate): Replaces usage of 'ReactDOM.hydrate()' with 'hydrateRoot()'.
  - [no-missing-button-type](/docs/rules/dom-no-missing-button-type): Enforces an explicit 'type' attribute for 'button' elements.
  - [no-missing-iframe-sandbox](/docs/rules/dom-no-missing-iframe-sandbox): Enforces an explicit 'sandbox' attribute for 'iframe' elements.
  - [no-render](/docs/rules/dom-no-render): Replaces usage of 'ReactDOM.render()' with 'createRoot(node).render()'.
  - [no-render-return-value](/docs/rules/dom-no-render-return-value): Disallows the return value of 'ReactDOM.render'.
  - [no-script-url](/docs/rules/dom-no-script-url): Disallows 'javascript:' URLs as attribute values.
  - [no-string-style-prop](/docs/rules/dom-no-string-style-prop): Disallows the use of string style prop in JSX. Use an object instead.
  - [no-unknown-property](/docs/rules/dom-no-unknown-property): Disallows unknown 'DOM' properties.
  - [no-unsafe-iframe-sandbox](/docs/rules/dom-no-unsafe-iframe-sandbox): Enforces that the 'sandbox' attribute for 'iframe' elements is not set to unsafe combinations.
  - [no-unsafe-target-blank](/docs/rules/dom-no-unsafe-target-blank): Disallows 'target="_blank"' without 'rel="noreferrer noopener"'.
  - [no-use-form-state](/docs/rules/dom-no-use-form-state): Replaces usage of 'useFormState' with 'useActionState'.
  - [no-void-elements-with-children](/docs/rules/dom-no-void-elements-with-children): Disallows 'children' in void DOM elements.

  - **Web API Rules**
  - [no-leaked-event-listener](/docs/rules/web-api-no-leaked-event-listener): Enforces that every 'addEventListener' in a component or custom hook has a corresponding 'removeEventListener'.
  - [no-leaked-fetch](/docs/rules/web-api-no-leaked-fetch): Enforces that every 'fetch' in a component or custom hook has a corresponding 'AbortController' abort in the cleanup function.
  - [no-leaked-intersection-observer](/docs/rules/web-api-no-leaked-intersection-observer): Enforces that every 'IntersectionObserver' created in a component or custom hook has a corresponding 'IntersectionObserver.disconnect()'.
  - [no-leaked-interval](/docs/rules/web-api-no-leaked-interval): Enforces that every 'setInterval' in a component or custom hook has a corresponding 'clearInterval'.
  - [no-leaked-resize-observer](/docs/rules/web-api-no-leaked-resize-observer): Enforces that every 'ResizeObserver' created in a component or custom hook has a corresponding 'ResizeObserver.disconnect()'.
  - [no-leaked-timeout](/docs/rules/web-api-no-leaked-timeout): Enforces that every 'setTimeout' in a component or custom hook has a corresponding 'clearTimeout'.

  - **Naming Convention Rules**
  - [context-name](/docs/rules/naming-convention-context-name): Enforces identifier names assigned from 'createContext' calls to be a valid component name with the suffix 'Context'.
  - [id-name](/docs/rules/naming-convention-id-name): Enforces identifier names assigned from 'useId' calls to be either 'id' or end with 'Id'.
  - [ref-name](/docs/rules/naming-convention-ref-name): Enforces identifier names assigned from 'useRef' calls to be either 'ref' or end with 'Ref'.

  - **Debug Rules**
  - [function-component](/docs/rules/debug-function-component): Reports all function components in JSON format. Useful for debugging. This rule should only be used for debugging purposes; otherwise leave it off.
  - [hook](/docs/rules/debug-hook): Reports all React Hooks in JSON format. Useful for debugging. This rule should be used only for debugging purposes; otherwise, leave it off.
  - [is-from-react](/docs/rules/debug-is-from-react): Reports all identifiers initialized from React in JSON format. Useful for debugging. This rule should only be used for debugging purposes; otherwise, leave it off.
  - [is-from-ref](/docs/rules/debug-is-from-ref): Reports all identifiers initialized or derived from refs in JSON format. Useful for debugging. This rule should only be used for debugging purposes; otherwise, leave it off.
  - [jsx](/docs/rules/debug-jsx): Reports all JSX elements and fragments in JSON format. Useful for debugging. This rule should be used only for debugging purposes; otherwise leave it off.
- [Presets](/docs/presets)
- Recipes
  - [Recipes](/docs/recipes): Ready-to-use custom ESLint rule definitions built with @eslint-react/kit

  - **Simple**
  - [Function Component Definition](/docs/recipes/function-component-definition): Enforces arrow function style for function component definitions
  - [No Circular Effect](/docs/recipes/no-circular-effect): Detects circular dependencies between useEffect hooks. Prevents infinite update loops caused by effects that set state they also depend on
  - [Prefer Namespace Import](/docs/recipes/prefer-namespace-import): Enforces importing React via a namespace import

  - **Compound**
  - [Custom Rules Of Props](/docs/recipes/custom-rules-of-props): Validates JSX props. Includes checks for duplicate props, mixing controlled and uncontrolled props, explicit spread props, and direct props access
  - [Custom Rules Of State](/docs/recipes/custom-rules-of-state): Validates state usage. Prefer the updater function form in useState setters
  - [Custom Rules Of Context](/docs/recipes/custom-rules-of-context): Validates React Context API usage. Includes checks for 'useContext' and other context-related patterns
- Packages: Utility modules for building custom React rules
  - [Packages](/docs/packages): Utility modules for building custom React rules
  - [@eslint-react/kit](/docs/packages/kit): ESLint React's toolkit for building custom React rules with JavaScript functions
- Configuration
  - [Configuration](/docs/configuration): Learn how to configure ESLint React for your project
  - [Configure Analyzer](/docs/configuration/configure-analyzer): How to configure ESLint React analyzer settings
  - [Configure Project Rules](/docs/configuration/configure-project-rules)
  - [Configure Project Config](/docs/configuration/configure-project-config)

- **Project Information**
- [Roadmap](/docs/roadmap)
- [Changelog](/docs/changelog)
- [FAQ](/docs/faq): Frequently asked questions about ESLint React.
- [Glossary](/docs/glossary): A collection of terms and concepts used in ESLint React
- [Community](/docs/community): Explore and learn from real-world open-source projects that use ESLint React.
- [Contributing](/docs/contributing): Monorepo structure and contributing guide for ESLint React
- [Third-Party Plugins](/docs/third-party-plugins): High-quality third-party React ESLint plugins that complement ESLint React