# Changelog (/docs/changelog)



## v5.18.3 (2026-08-06) [#v5183-2026-08-06]

### 🐞 Fixes [#-fixes]

* `react-x/no-nested-component-definitions`: narrowed the `with*` HOC detection in the fallback name resolution to well-known wrappers only (react-router v5's `withRouter`, Formik's `withFormik`, and recompose's `withProps`, `withState`, `withHandlers`, and `withLifecycle`) — custom HOCs following the `with*` naming convention are no longer treated as component wrappers. (#1929)

### 🏗️ Internal [#️-internal]

* Bumped `typescript-eslint` to `8.66.0` and `next` to `16.3.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.18.2...v5.18.3](https://github.com/Rel1cx/eslint-react/compare/v5.18.2...v5.18.3)

## v5.18.2 (2026-08-05) [#v5182-2026-08-05]

### 🐞 Fixes [#-fixes-1]

* `react-x/no-nested-component-definitions`: fixed a regression where nested components wrapped in `useCallback` (e.g. `const C = useCallback(() => <div />, []);`) were no longer reported — the rule now resolves the component name through well-known component wrappers (`memo`, `forwardRef`, `useCallback`, `observer`, react-redux's `connect`, Relay's `create*Container` helpers, Apollo's `graphql`, and `with*` HOCs, including curried forms like `connect(...)(Component)`) up to the enclosing variable declarator, and no longer misreports array method callbacks (`flatMap`, `forEach`, `reduce`, etc.) in list rendering patterns. (#1928, closes #1927)

### 🏗️ Internal [#️-internal-1]

* Bumped `effect` to `3.22.1`, `eslint-plugin-jsdoc` to `63.3.3`, `textlint` to `15.8.0`, `js-yaml` to `4.3.1`, `axios` to `1.19.0`, `nx` to `23.1.1`, `vite` to `8.2.0`, `@vitejs/plugin-react` to `6.0.5`, `fumadocs` to `16.14.0`, `fumadocs-mdx` to `15.2.2`, `preact` to `10.29.8`, `globals` to `17.9.0`, `lucide-react` to `1.28.0`, `@types/react` to `19.2.18`, `@types/react-dom` to `19.2.4`, and `pnpm` to `11.20.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.18.1...v5.18.2](https://github.com/Rel1cx/eslint-react/compare/v5.18.1...v5.18.2)

## v5.18.1 (2026-07-30) [#v5181-2026-07-30]

### 📝 Documentation [#-documentation]

* Documented the `additionalRefHooks` shared setting in the affected rule docs.

### 🏗️ Internal [#️-internal-2]

* `@eslint-react/ast`: added `Traverse.findEnclosingTryBlock`, extracted from `react-x/error-boundaries`.
* Replaced `@eslint/compat` with `@eslint/config-helpers`.
* Bumped `eslint` to `10.8.0`, `eslint-plugin-jsdoc` to `63.3.2`, `tsdown` to `0.22.14`, `next` to `16.2.12`, `fumadocs` to `16.13.0`, `postcss` to `8.5.25`, and `pnpm` to `11.18.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.18.0...v5.18.1](https://github.com/Rel1cx/eslint-react/compare/v5.18.0...v5.18.1)

## v5.18.0 (2026-07-23) [#v5180-2026-07-23]

### ✨ New [#-new]

* `@eslint-react/core`: added `isUseRefLikeCall` and a new `additionalRefHooks` setting for declaring custom ref-creating hooks; the following rules now recognize them: (#1922, closes #1904)
  * `react-x/refs`
  * `react-x/immutability`
  * `react-x/set-state-in-effect`
  * `react-naming-convention/ref-name`
  * `react-debug/is-from-ref`

### 📝 Documentation [#-documentation-1]

* Updated rule docs to match current rule sources. (#1920)

### 🏗️ Internal [#️-internal-3]

* `@local/testkit`: simplified internals.
* `react-x`: extracted a shared `createImplicitPropListener` helper used by `no-implicit-children`, `no-implicit-key`, and `no-implicit-ref`. (#1923)
* Bumped `tsdown` to `0.22.13`, `typescript-eslint` to `8.65.0`, `eslint-plugin-jsdoc` to `63.2.0`, `import-integrity-lint` to `1.2.0`, `react` to `19.2.8`, `next` to `16.2.11`, and `postcss` to `8.5.21`.
* Replaced `vite-node` with `nub` for running workspace scripts. (#1919)
* Unified JSDoc comment style of exported APIs in `@eslint-react/ast` and `@eslint-react/core`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.17.3...v5.18.0](https://github.com/Rel1cx/eslint-react/compare/v5.17.3...v5.18.0)

## v5.17.3 (2026-07-20) [#v5173-2026-07-20]

### 🏗️ Internal [#️-internal-4]

* `@eslint-react/ast`: reworked the `Extract` API — replaced `getRootIdentifier` with the position-based `getIdentifierAt`, renamed `getStaticPropertyName` to `getPropertyName` (with a `min`/`max` effort option), and added `findProperty` for finding properties in nested object expressions; added `Check.isConditional` for matching conditional expressions and control flow statements. (#1918)
* Bumped `eslint-plugin-jsdoc` to `63.1.0`, `expect-type` to `1.4.0`, `@preact/preset-vite` to `2.10.6`, and `pnpm` to `11.15.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.17.2...v5.17.3](https://github.com/Rel1cx/eslint-react/compare/v5.17.2...v5.17.3)

## v5.17.2 (2026-07-19) [#v5172-2026-07-19]

### 📝 Documentation [#-documentation-2]

* `@eslint-react/kit`: added a README with quick start and API overview.

### 🏗️ Internal [#️-internal-5]

* `@eslint-react/core`: migrated `JsxDetectionHint` and related JSX detection helpers from `@eslint-react/jsx`. (#1913)
* `@eslint-react/jsx`: consolidated helpers into focused `attribute`, `children`, `element`, and `text` modules. (#1914)
* `@eslint-react/var`: renamed `computeObjectType` to `resolveObjectType`.
* `@local/testkit`: extracted shared test helpers into a new local package. (#1915)
* Bumped `tsdown` to `0.22.9`, `eslint-plugin-jsdoc` to `63.0.14`, and `pnpm` to `11.13.1`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.17.1...v5.17.2](https://github.com/Rel1cx/eslint-react/compare/v5.17.1...v5.17.2)

## v5.17.1 (2026-07-17) [#v5171-2026-07-17]

### 🏗️ Internal [#️-internal-6]

* `react-jsx/no-key-after-spread`: reworked the attribute scan to a pipeline style using `dropWhile` and `not` from `@local/eff`, `Check.is` from `@eslint-react/ast`, and the new `isAttribute` helper from `@eslint-react/jsx`. (#1912)
* `@eslint-react/jsx`: added `isAttribute` for matching JSX attributes by name.
* `@local/eff`: added `dropWhile` and `takeWhile`.
* Bumped `tsdown` to `0.22.8`, `tsl-dx` to `0.13.3`, `import-integrity-lint` to `1.1.4`, `fumadocs` to `16.11.5`, and `fumadocs-mdx` to `15.2.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.17.0...v5.17.1](https://github.com/Rel1cx/eslint-react/compare/v5.17.0...v5.17.1)

## v5.17.0 (2026-07-17) [#v5170-2026-07-17]

### 🐞 Fixes [#-fixes-2]

* `react-jsx/no-leaked-dollar`: the intentional-`$` exemption (e.g. `<div>${price}</div>`) is no longer defeated by surrounding whitespace or empty siblings — a lone `$` before a single expression is now allowed whenever all other siblings are non-substantive. (#1911)
* `react-jsx/no-leaked-semicolon`: consecutive leaked semicolons (e.g. `;;`) at the start of a JSX text node are now detected. (#1911)

### 📝 Documentation [#-documentation-3]

* `react-x/no-unnecessary-use-prefix`: reorganized the rule examples.

### 🏗️ Internal [#️-internal-7]

* `react-jsx`: extracted the shared `find-create-element-children-prop` and `remove-jsx-attribute` rule helpers, removed dead `Literal` visitors from `no-comment-textnodes` and `no-leaked-semicolon`, simplified the `no-key-after-spread` attribute scan, and hoisted `no-useless-fragment` detection and fix helpers to module level. (#1911)
* `@local/eff`: synced the `Function` module with effect and added missing `@category` tags.
* Unified JSDoc comment style across packages.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.16.1...v5.17.0](https://github.com/Rel1cx/eslint-react/compare/v5.16.1...v5.17.0)

## v5.16.1 (2026-07-16) [#v5161-2026-07-16]

### 🐞 Fixes [#-fixes-3]

* `react-jsx/no-children-prop`: `React.createElement` calls whose props argument is wrapped in a TypeScript type assertion (e.g. `{ children: "x" } as Props`) are now reported; computed property keys written as template literals (e.g. `{ [`children`]: "x" }`) are now recognized as the `children` prop; fixed a false positive where a computed identifier key in a `createElement` props object (e.g. `{ [propName]: "Children" }`) was treated as the static `children` prop; the suggestion fix now escapes JSX-sensitive characters (`<`, `>`, `{`, `}`, `&`) when moving a string `children` prop value into element content. (#1910)
* `react-jsx/no-children-prop-with-children`: same `createElement` edge-case fixes as `no-children-prop`. (#1910)
* `react-jsx/no-useless-fragment`: `allowExpressions: false` now only flags fragments with a single expression child, matching the option's documented behavior, instead of flagging any fragment inside a JSX element; fragments with spread attributes (e.g. `<Fragment {...props}>`) are no longer auto-fixed; the auto-fixer now removes leading indentation when collapsing whitespace-only fragments. (#1910)
* `react-jsx/no-leaked-dollar`: `$` character references (`&#36;`, `&#x24;`) are no longer treated as leaked dollar signs; only a literal `$` in the source is reported. (#1910)
* `react-jsx/no-leaked-semicolon`: leaked semicolons followed by spaces or tabs before a newline, including CRLF line endings, are now detected. (#1910)
* `react-x/immutability`: added `useHistory` to known navigation hooks, so navigation methods such as `.push()` are not treated as in-place mutations inside frozen callbacks.

### 🏗️ Internal [#️-internal-8]

* `@eslint-react/ast`: added `Extract.getStaticPropertyName` for resolving static property names from object properties. (#1910)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.16.0...v5.16.1](https://github.com/Rel1cx/eslint-react/compare/v5.16.0...v5.16.1)

## v5.16.0 (2026-07-16) [#v5160-2026-07-16]

### ✨ New [#-new-1]

* `@eslint-react/core`: added support for hook calls written as tagged template literals. (#1909)

  ```tsx
  const x = useMotionValue(100);
  const transform = useMotionTemplate`transform(${x}px)`;
  //                ^^^ tagged template literal hook call
  ```

* `@eslint-react/jsx`: `findAttribute` now resolves nested spread identifiers and nested object expression spreads. (#1908)

### 🏗️ Internal [#️-internal-9]

* Added tests and per-rule changelogs for tagged template literal hook calls. (#1909)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.15.0...v5.16.0](https://github.com/Rel1cx/eslint-react/compare/v5.15.0...v5.16.0)

## v5.15.0 (2026-07-15) [#v5150-2026-07-15]

### 📝 Documentation [#-documentation-4]

* Added a FAQ entry on improving analyzer accuracy to the website. (#1907)
* Fixed inconsistencies and omissions in internal documentation.

### 🏗️ Internal [#️-internal-10]

* Bumped `typescript-eslint` to `8.64.0`, `nx` to `23.1.0`, `eslint-plugin-package-json` to `1.6.0`, and `pnpm` to `11.13.0`.
* Enabled `strictBooleanExpressions` in TSL and synchronized sample rule configurations. (#1907)
* Removed the website-specific changelog file.
* Switched CI workflows to use `pnpm/action-setup` instead of installing pnpm globally via npm.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.10...v5.15.0](https://github.com/Rel1cx/eslint-react/compare/v5.14.10...v5.15.0)

## v5.14.10 (2026-07-15) [#v51410-2026-07-15]

### 🐞 Fixes [#-fixes-4]

* `@eslint-react/ast`: `Extract.getCalleeName` now returns `null` for computed member expressions (e.g. `obj[foo]()`, `obj["foo"]()`, `obj[`foo`]()`) instead of the property name, so callers don't treat dynamically chosen methods as static method names. (#1906)

### 🏗️ Internal [#️-internal-11]

* Added unit tests for `Extract.getCalleeName`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.9...v5.14.10](https://github.com/Rel1cx/eslint-react/compare/v5.14.9...v5.14.10)

## v5.14.9 (2026-07-15) [#v5149-2026-07-15]

### 🐞 Fixes [#-fixes-5]

* `@eslint-react/ast`: removed `Extract.getPropertyName` and added `Extract.getCalleeName` for simpler callee name resolution. (#1905)
* Rules that match calls by method name no longer treat computed string-literal property access as a static match (e.g. `obj["foo"]()` is no longer resolved to `"foo"`). This avoids relying on the runtime value of computed keys and aligns callee matching across the codebase. Affected rules:
  * `react-dom/no-dangerously-set-innerhtml`
  * `react-dom/no-find-dom-node`
  * `react-dom/no-flush-sync`
  * `react-web-api/no-leaked-event-listener`
  * `react-web-api/no-leaked-fetch`
  * `react-x/globals`
  * `react-x/immutability`
* `core.isJsxLike`: no longer treats `React['createElement']` calls as JSX-like, since the callee is accessed through a computed member expression.

### 🏗️ Internal [#️-internal-12]

* Simplified callee name checks across `core`, `react-dom`, `react-web-api`, and `react-x` rules using `Extract.getCalleeName`.
* Bumped `@effect/platform`, `effect`, `fumadocs-core`, `fumadocs-mdx`, `fumadocs-ui`, `postcss`, `pnpm`, and `tsdown`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.8...v5.14.9](https://github.com/Rel1cx/eslint-react/compare/v5.14.8...v5.14.9)

## v5.14.8 (2026-07-14) [#v5148-2026-07-14]

### 📝 Documentation [#-documentation-5]

* `react-x`: refreshed the React Compiler diff reports. (#1903)

### 🏗️ Internal [#️-internal-13]

* `react-x`: moved the purity and refs resolvers into `lib.ts`. (#1902)
* Bumped `tsdown`, `postcss`, and `fumadocs`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.7...v5.14.8](https://github.com/Rel1cx/eslint-react/compare/v5.14.7...v5.14.8)

## v5.14.7 (2026-07-13) [#v5147-2026-07-13]

### 🐞 Fixes [#-fixes-6]

* `react-x/immutability`: ignore navigation hook methods (e.g. `useNavigate`, `useNavigation`) as mutations. (#1901)

### 🏗️ Internal [#️-internal-14]

* Refreshed `pnpm` lockfile.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.6...v5.14.7](https://github.com/Rel1cx/eslint-react/compare/v5.14.6...v5.14.7)

## v5.14.6 (2026-07-13) [#v5146-2026-07-13]

### 🐞 Fixes [#-fixes-7]

* `react-x/immutability`: ignore `useRouter()` navigation methods (e.g. `.push()`) as mutations when they appear inside frozen callbacks; aliases created through variable declarators are also recognized. (#1898)

### 🏗️ Internal [#️-internal-15]

* Added `Check.isExpression` to `@eslint-react/ast` along with unit tests.
* Bumped `eslint`, `nx`, `dompurify`, and `pnpm`.
* Restored standalone quality workflows.
* Simplified `react-x/immutability` analysis helpers by sharing initializer provenance checks for `useRef()` and `useRouter()` and using AST parent traversal for function-boundary detection.
* Started running CI tests on Node.js 26.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.5...v5.14.6](https://github.com/Rel1cx/eslint-react/compare/v5.14.5...v5.14.6)

## v5.14.5 (2026-07-11) [#v5145-2026-07-11]

### 📝 Documentation [#-documentation-6]

* Temporarily disabled the Bluesky embed on the community page to avoid API rate limits.

### 🏗️ Internal [#️-internal-16]

* Consolidated the `check:configs` and `check:docs` scripts into a single `check:rules` script.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.4...v5.14.5](https://github.com/Rel1cx/eslint-react/compare/v5.14.4...v5.14.5)

## v5.14.4 (2026-07-11) [#v5144-2026-07-11]

### 🏗️ Internal [#️-internal-17]

* Fixed rule discovery in documentation and configuration checks to exclude helper modules from rule entry files.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.3...v5.14.4](https://github.com/Rel1cx/eslint-react/compare/v5.14.3...v5.14.4)

## v5.14.3 (2026-07-11) [#v5143-2026-07-11]

### 🐞 Fixes [#-fixes-8]

* `react-x/immutability`: stopped treating mutations of resolvable global and module bindings as captured local mutations. (#1897)
* `react-x/immutability`: followed variable-declarator aliases when resolving mutation targets, fixing missed mutations through aliases created inside callbacks. (#1897)
* `react-x/immutability`: followed `useRef` provenance through variable-declarator aliases, preventing false positives for ref mutations through locally aliased refs. (#1897)

### 🏗️ Internal [#️-internal-18]

* `react-x/immutability`: separated AST fact collection from captured-mutation effect inference and reporting. (#1897)
* Synchronized the `react-x/immutability` specification and IMPL-SPEC report with the current React Compiler validation pass, and expanded behavior-boundary coverage. (#1897)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.2...v5.14.3](https://github.com/Rel1cx/eslint-react/compare/v5.14.2...v5.14.3)

## v5.14.2 (2026-07-11) [#v5142-2026-07-11]

### 🐞 Fixes [#-fixes-9]

* `react-x/globals`: added detection for global writes through destructuring assignments and property deletion with `delete`. (#1896)
* `react-x/globals`: propagated render-time global mutation effects through directly called helpers and stable local aliases. (#1896)

### 🏗️ Internal [#️-internal-19]

* Expanded behavior-boundary coverage for `react-debug` component and source detection, `react-naming-convention` naming rules, and `react-x/immutability` React Compiler fixtures.
* Strengthened documentation verification and added formatting, configuration, architecture, MDX, website type, and production build checks to CI.
* Gated publishing on the check, test, and workflow security jobs, including for application, example, and configuration changes.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.1...v5.14.2](https://github.com/Rel1cx/eslint-react/compare/v5.14.1...v5.14.2)

## v5.14.1 (2026-07-11) [#v5141-2026-07-11]

### 🐞 Fixes [#-fixes-10]

* `react-rsc/function-definition`: fixed invalid async autofixes for object and class methods with local `'use server'` directives, including generator and computed methods; accessors and constructors are now reported without an unsafe fix.

### 🏗️ Internal [#️-internal-20]

* Added behavior-boundary tests for `react-rsc/function-definition`, covering directive placement, export resolution, function forms, and autofix behavior.
* Cleaned up redundant code and comments in `react-rsc/function-definition` and `react-x/unsupported-syntax`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.14.0...v5.14.1](https://github.com/Rel1cx/eslint-react/compare/v5.14.0...v5.14.1)

## v5.14.0 (2026-07-10) [#v5140-2026-07-10]

### ✨ New [#-new-2]

* `react-x/refs`: added render-reachability support for function declarations, IIFEs, synchronous array callbacks, and render-time callbacks passed to `useMemo` and `useReducer`. (#1895)
* `react-x/refs`: added lazy-initialization support for explicit `undefined` guards and for null guards enclosing additional nested conditions. (#1895)

### 🐞 Fixes [#-fixes-11]

* `react-x/refs`: reworked render-time call analysis as an unbounded fixed-point propagation, removing the previous 50-iteration cap. (#1895)
* `react-x/refs`: tightened inverted lazy-initialization handling so the non-null branch must unconditionally return or throw. (#1895)
* `react-x/refs`: stopped treating `!ref.current` as a null guard because initialized refs may contain falsy values. (#1895)

### 🏗️ Internal [#️-internal-21]

* `react-x/refs`: refactored ref aliases, function bindings, JSX refs, and duplicate initialization tracking to use scoped ESLint variable identities and position-aware binding events instead of file-wide identifier names. (#1895)
* Added behavior-boundary tests for `react-x/immutability` and documented them in the spec diff report.
* Updated build scripts.
* Bumped `@effect/language-service` to `^0.86.5`.
* Bumped `preact` to `^10.29.7`.
* Bumped `vite` to `^8.1.4` in example apps.
* Bumped `dprint` JSON plugin to `^0.23.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.13.2...v5.14.0](https://github.com/Rel1cx/eslint-react/compare/v5.13.2...v5.14.0)

## v5.13.2 (2026-07-09) [#v5132-2026-07-09]

### 🐞 Fixes [#-fixes-12]

* `react-x/immutability`: fixed false positive on `ref.current` write inside `useEffect`. (#1894)

### 🏗️ Internal [#️-internal-22]

* Bumped `@types/node` to `^26.1.1`.
* Bumped `preact` to `^10.29.6`.
* Bumped `tsdown` to `^0.22.4`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.13.1...v5.13.2](https://github.com/Rel1cx/eslint-react/compare/v5.13.1...v5.13.2)

## v5.13.1 (2026-07-09) [#v5131-2026-07-09]

### 🐞 Fixes [#-fixes-13]

* `react-x/refs`: aligned error message wording for `readDuringRender`, `writeDuringRender`, and `refPassedToFunction` with the React Compiler specification.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.13.0...v5.13.1](https://github.com/Rel1cx/eslint-react/compare/v5.13.0...v5.13.1)

## v5.13.0 (2026-07-09) [#v5130-2026-07-09]

### ✨ New [#-new-3]

* `react-x/refs` now detects nested property writes on a ref's value (e.g. `ref.current.inner = value`), which are now reported as `writeDuringRender` instead of being misclassified as a read.
* `react-x/refs` now tracks functions bound to (and called through) simple object-member-expression targets (e.g. `object.foo = () => ref.current; object.foo();`), closing a gap in the render-reachability analysis that previously only covered plain variable bindings.
* `react-x/refs` now detects `ref.current` accesses inside the lazy initializer function passed directly as `useState`'s first argument, since it runs synchronously during the initial render unlike other hook-callback arguments.
* `react-x/refs` now exempts calls to a function named `render` (e.g. `props.render(ref)`, a common render-prop pattern) from the `refPassedToFunction` diagnostic, alongside the existing `mergeRefs`/hook exemptions.

### 🐞 Fixes [#-fixes-14]

* Improved `react-x/refs` lazy-init guard-block detection so it is direction-aware: inside the branch of an `if (ref.current == null)`-style guard that is guaranteed to see `ref.current` as null, only a direct write is treated as the (single) valid initialization; reads or values passed to a function there are still reported.

### 🏗️ Internal [#️-internal-23]

* Refactored `react-x/refs` internals, replacing `isRefCurrentNullCheck` with `getRefCurrentNullCheckBranch` in `lib.ts`.
* Upgraded `fumadocs` packages and `preact`.
* Cleaned up redundant code in the `react-debug/jsx` rule.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.12.2...v5.13.0](https://github.com/Rel1cx/eslint-react/compare/v5.12.2...v5.13.0)

## v5.12.1 (2026-07-08) [#v5121-2026-07-08]

### 📝 Documentation [#-documentation-7]

* Fixed `react-x/immutability` rule description in docs.

### 🏗️ Internal [#️-internal-24]

* Cleaned up redundant code in some rules.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.12.0...v5.12.1](https://github.com/Rel1cx/eslint-react/compare/v5.12.0...v5.12.1)

## v5.12.0 (2026-07-08) [#v5120-2026-07-08]

### ✨ New [#-new-4]

* Reworked `react-x/immutability` to align with the React Compiler's `ValidateNoFreezingKnownMutableFunctions` validation pass: it now detects functions that (transitively) mutate a captured local variable and reports them when passed as a JSX prop, passed as a hook argument, or returned from a hook. (#1891)

### 📝 Documentation [#-documentation-8]

* Cleaned up the rule relations table.

### 🏗️ Internal [#️-internal-25]

* Bumped `typescript-eslint` packages to `^8.63.0`.
* Bumped `eslint-plugin-perfectionist` to `^5.10.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.11.3...v5.12.0](https://github.com/Rel1cx/eslint-react/compare/v5.11.3...v5.12.0)

## v5.11.3 (2026-07-07) [#v5113-2026-07-07]

### 🐞 Fixes [#-fixes-15]

* Fixed `FunctionComponentDetectionHint.DoNotIncludeFunctionDefinedAsClassProperty` checking for object `Property` nodes instead of class `PropertyDefinition` nodes, so functions defined as class fields are now correctly excluded when the hint is set. (#1890)

### 🏗️ Internal [#️-internal-26]

* Renamed fix helpers and formatted `MessageID` types.
* Inlined local string constants in rule implementations.
* Bumped `eslint-plugin-jsdoc`, `typedoc`, `undici` and `pnpm`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.11.2...v5.11.3](https://github.com/Rel1cx/eslint-react/compare/v5.11.2...v5.11.3)

## v5.11.2 (2026-07-05) [#v5112-2026-07-05]

### 📝 Documentation [#-documentation-9]

* Updated rule documentation for React introspection APIs (`react-x/no-children-count`, `react-x/no-children-for-each`, `react-x/no-children-map`, `react-x/no-children-only`, `react-x/no-children-to-array`, and `react-x/no-clone-element`) with clearer guidance on why child introspection creates fragile component coupling and links to Astryx's `no-react-introspection` rule. (#1889)
* Updated the function-component collector sequence diagram on the website.
* Updated `THIRD-PARTY-LICENSE` file.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.11.0...v5.11.2](https://github.com/Rel1cx/eslint-react/compare/v5.11.0...v5.11.2)

## v5.11.0 (2026-07-05) [#v5110-2026-07-05]

### ✨ New [#-new-5]

* `react-x/refs` now detects ref mutations/reads inside helper functions that are called (directly, or through a simple variable alias) during render, closing a gap where any nested function was previously treated as a safe boundary regardless of whether it was actually invoked during render.
* `react-x/refs` now reports a second guarded ref initialization: only a single `if (ref.current == null) { ref.current = ... }` guarded initialization is allowed per ref per component/hook, and a second guarded write (in the same or a different `if` block) is reported as `duplicateRefInit`.
* `react-x/refs` now supports `.current` accesses whose base is a member expression that looks like a ref (e.g. `props.ref.current`), not just a plain identifier.

### 🏗️ Internal [#️-internal-27]

* Added unit tests for `packages/ast/src/check.ts`.
* Bumped `@effect/language-service` to `^0.86.4` and `preact` to `^10.29.4`.
* Refactored `react-x/static-components` internals without changing behavior: `findVariableForIdentifier` now delegates to `@typescript-eslint/utils/ast-utils`'s `findVariable` instead of a hand-rolled scope-chain walk, `resolveDynamicValue` was split into `findDynamicCreationSite` and `findReassignmentCreationSite`, and render-boundary/JSX-candidate handling was extracted into dedicated helpers.
* Unified the signatures of `Check.isDirective` and `Check.isIdentifier` in `@eslint-react/ast`: both now take the node as the first argument and an optional `name` as the second, replacing the previous curried `(name) => (node) => boolean` shape. Removed `Check.isStringLiteral`; use `ts-pattern`'s `isMatching` or an inline type guard instead.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.10.4...v5.11.0](https://github.com/Rel1cx/eslint-react/compare/v5.10.4...v5.11.0)

## v5.10.4 (2026-07-04) [#v5104-2026-07-04]

### 🐞 Fixes [#-fixes-16]

* Fixed `react-x/no-misused-capture-owner-stack` not recognizing `process.env.NODE_ENV` checks wrapped in TypeScript type expressions such as `(process.env as any).NODE_ENV`. (#1813)
* Fixed `Extract.getFullyQualifiedName` to unwrap `TSAsExpression`, `TSTypeAssertion`, `TSNonNullExpression`, and `ChainExpression` before resolving names. This improves name resolution for rules that identify React APIs or collect component/hook names through type-wrapped expressions.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.10.3...v5.10.4](https://github.com/Rel1cx/eslint-react/compare/v5.10.3...v5.10.4)

## v5.10.3 (2026-07-04) [#v5103-2026-07-04]

### 🏗️ Internal [#️-internal-28]

* Bumped `typescript-eslint` packages to `^8.62.1`.
* Bumped `@effect/language-service` to `^0.86.3`.
* Bumped `undici` and `undici-types` to `^8.6.0`.
* Updated the `@eslint-react/eslint-plugin` package description.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.10.2...v5.10.3](https://github.com/Rel1cx/eslint-react/compare/v5.10.2...v5.10.3)

## v5.10.2 (2026-07-03) [#v5102-2026-07-03]

### 🐞 Fixes [#-fixes-17]

* Fixed an issue where several rules treated computed identifier keys in spread props (e.g. `<div {...{ [key]: value }} />`) as static prop names. The actual property name is the runtime value of the variable; computed string literal keys are still recognized. Affected rules:
  * `react-x/no-missing-key`
  * `react-jsx/no-children-prop-with-children`
  * `react-jsx/no-children-prop`
  * `react-jsx/no-useless-fragment`
  * `react-dom/no-dangerously-set-innerhtml-with-children`
  * `react-dom/no-dangerously-set-innerhtml`
  * `react-dom/no-missing-button-type`
  * `react-dom/no-missing-iframe-sandbox`
  * `react-dom/no-string-style-prop`
  * `react-dom/no-unsafe-iframe-sandbox`
  * `react-dom/no-unsafe-target-blank`
  * `react-dom/no-void-elements-with-children`
  * `react-web-api/no-leaked-event-listener`
  * `react-web-api/no-leaked-fetch`
* Fixed `react-x/unsupported-syntax` to no longer report IIFEs in JSX. This makes the rule consistent with the upstream [`react-hooks/unsupported-syntax`](https://react.dev/reference/eslint-plugin-react-hooks/lints/unsupported-syntax) and removes the `iife` message.

### ✨ New [#-new-6]

* `react-x/unsupported-syntax` now detects `eval` calls via `globalThis.eval`, `globalThis["eval"]`, and type assertions like `(globalThis as any).eval`.

### 🏗️ Internal [#️-internal-29]

* Added an optional `resolve` parameter to `Extract.getPropertyName` so callers can control how identifier and private identifier property names are resolved.
* Added unit tests for `Extract.getPropertyName`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.10.1...v5.10.2](https://github.com/Rel1cx/eslint-react/compare/v5.10.1...v5.10.2)

## v5.10.1 (2026-07-03) [#v5101-2026-07-03]

### 🐞 Fixes [#-fixes-18]

* Added the missing `static-components` rule to `disable-conflict-eslint-plugin-react-hooks`, closes #1884.

### 📝 Documentation [#-documentation-10]

* Rewrote the `noCircularEffect` recipe sample to use `@eslint-react/kit` collectors and `simpleTraverse`, and updated the recipe overview accordingly.
* Removed the under construction brand assets page from the website.

### 🏗️ Internal [#️-internal-30]

* Bumped `typescript-eslint`, `@types/node`, `vite`, and `tailwindcss`.
* Bumped `fumadocs`, `lucide-react`, and `postcss` in the website.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.10.0...v5.10.1](https://github.com/Rel1cx/eslint-react/compare/v5.10.0...v5.10.1)

## v5.10.0 (2026-06-28) [#v5100-2026-06-28]

### 📝 Documentation [#-documentation-11]

* Added status emoji markers to recipe and rule documentation code examples (#1882).
* Fixed the v5.7.2 changelog entry for `react-x/no-unused-state`.
* Updated the community projects list.

### 🏗️ Internal [#️-internal-31]

* Bumped `eslint` to `^10.6.0`.
* Bumped `js-yaml` workspace override to `^4.3.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.9.5...v5.10.0](https://github.com/Rel1cx/eslint-react/compare/v5.9.5...v5.10.0)

## v5.9.5 (2026-06-27) [#v595-2026-06-27]

### 🐞 Fixes [#-fixes-19]

* `Compare.isEqual` now recognizes structurally identical `CallExpression` nodes. This fixes false positives in the following rules when the compared target (event target, controller, or observed element) is derived from a function call such as `window.matchMedia('…')` or `getEl()`:
  * `react-web-api/no-leaked-event-listener`
  * `react-web-api/no-leaked-fetch`
  * `react-web-api/no-leaked-resize-observer`
  * `react-web-api/no-leaked-intersection-observer`

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.9.4...v5.9.5](https://github.com/Rel1cx/eslint-react/compare/v5.9.4...v5.9.5)

## v5.9.4 (2026-06-26) [#v594-2026-06-26]

### 🐞 Fixes [#-fixes-20]

* The following rules now detect member expression calls made with computed string property access (e.g. `obj["foo"]()`):
  * `react-x/no-array-index-key`
  * `react-x/no-duplicate-key`
  * `react-x/no-unnecessary-use-prefix`
  * `react-x/set-state-in-effect`
  * `react-x/set-state-in-render`
  * `react-dom/no-find-dom-node`
  * `react-dom/no-flush-sync`
  * `react-dom/no-hydrate`
  * `react-dom/no-render`
  * `react-dom/no-render-return-value`
  * `react-dom/no-use-form-state`
  * `react-web-api/no-leaked-fetch`

### 📝 Documentation [#-documentation-12]

* Updated the community page and project list.

### 🏗️ Internal [#️-internal-32]

* Unified member expression property name checks with `Extract.getPropertyName` (#1881).
* Updated dependencies and switched `postinstall` to `prepare`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.9.3...v5.9.4](https://github.com/Rel1cx/eslint-react/compare/v5.9.3...v5.9.4)

## v5.9.3 (2026-06-25) [#v593-2026-06-25]

### 🐞 Fixes [#-fixes-21]

* **`ast`**: Corrected the `TSESTreeJSX` union and handling of computed member expressions (#1877).
* **`jsx`**: Handled namespaced host elements and cleaned up the spread child API (#1876).

### 📝 Documentation [#-documentation-13]

* Refined the rule feature system docs and renamed the term-based patterns document.
* Renamed `import-paths.md` to `repo-path-aliases.md`.
* Updated JSX type aliases and `unwrap` documentation.

### 🏗️ Internal [#️-internal-33]

* Aligned `RuleContext` imports in the kit package.
* Bumped `typescript-eslint` packages to `^8.62.0` and related dependencies.
* Renamed scripts with numeric prefixes and renamed `verify-*` scripts to `check-*`.
* Replaced `pnpm run` with `node --run` across scripts (#1879).
* Replaced the website brand component with an inline logo SVG.
* Restructured the test directory and added integration tests (#1880).
* Updated `nx` to `^23.0.1` and `pnpm` to `11.9.0`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.9.2...v5.9.3](https://github.com/Rel1cx/eslint-react/compare/v5.9.2...v5.9.3)

## v5.9.2 (2026-06-23) [#v592-2026-06-23]

### 📝 Documentation [#-documentation-14]

* Cleaned up the "Further Reading" links in the rule docs.

### 🏗️ Internal [#️-internal-34]

* Switched to `pnpm/action-setup` to install Node and pnpm in CI.
* Updated dependencies and the lockfile.
* Updated the `baseline.json` timestamp and quality signal.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.9.1...v5.9.2](https://github.com/Rel1cx/eslint-react/compare/v5.9.1...v5.9.2)

## v5.9.1 (2026-06-20) [#v591-2026-06-20]

### 📝 Documentation [#-documentation-15]

* Updated rule patterns and feature system documentation (#1875).
* Refined naming convention rule docs for `context-name`, `id-name`, and `ref-name` (#1873).
* Updated the example comment in the `react-x/unsupported-syntax` docs.
* Removed the `ast.unwrap` example from the kit package docs.
* Fixed a typo in a warning callout description.

### 🏗️ Internal [#️-internal-35]

* Bumped `actions/checkout` to `v7.0.0` (#1874).
* Moved `getHumanReadableKind` from the ast package into the specific rules that use it.
* Moved the iterator callback position map for `react-x/no-missing-key` into `lib.ts`.
* Updated `dprint` line width to `160` and reformatted the codebase.
* Updated `eslint` to `^10.5.0` and bumped miscellaneous dependencies.
* Updated the `dprint` JSON plugin to `v0.22.0`.
* Updated the baseline and `DocsPage` styling, and pruned `pnpm` workspace excludes.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.9.0...v5.9.1](https://github.com/Rel1cx/eslint-react/compare/v5.9.0...v5.9.1)

## v5.9.0 (2026-06-13) [#v590-2026-06-13]

### ✨ New [#-new-7]

* Added `react-web-api/no-leaked-intersection-observer` rule to prevent leaked `IntersectionObserver` instances in components and hooks, enabled as `warn` in the `recommended` preset (#1841, #1868).

### 🐞 Fixes [#-fixes-22]

* **`react-web-api/no-leaked-intersection-observer`*&#x2A;, &#x2A;*`react-web-api/no-leaked-resize-observer`**: Report when `disconnect` is only called inside the observer's own callback, since the callback may never run if the component unmounts before the element intersects or resizes (#1872).

### 🏗️ Internal [#️-internal-36]

* Improved CI configuration and updated `SECURITY.md` documentation (#1871).
* Bumped `fumadocs-core` and `fumadocs-ui` to `16.10.1`.

### New Contributors [#new-contributors]

* **Maikel van Dort** (@Netail) made their first contribution in #1868.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.19...v5.9.0](https://github.com/Rel1cx/eslint-react/compare/v5.8.19...v5.9.0)

## v5.8.19 (2026-06-12) [#v5819-2026-06-12]

### 🏗️ Internal [#️-internal-37]

* Simplified `isJsxLike` in core package and added behavior boundary tests (#1869).
* Aligned code style in jsx package with core package (#1870).
* Updated `@types/node` to `^25.9.3`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.18...v5.8.19](https://github.com/Rel1cx/eslint-react/compare/v5.8.18...v5.8.19)

## v5.8.18 (2026-06-11) [#v5818-2026-06-11]

### 🐞 Fixes [#-fixes-23]

* Improved key detection in `react-x/no-array-index-key` and `react-x/no-missing-key` rules (#1867).

### 📝 Documentation [#-documentation-16]

* Removed 'See Also' sections from custom rule recipes.
* Reordered AST section in kit package docs (#1866).
* Formatted examples as accordions in kit package docs.

### 🏗️ Internal [#️-internal-38]

* Removed `postinstall` script on the website.
* Updated `textlint` rules for inclusive language.
* Updated dependencies and relaxed `eslint` peer dependency.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.17...v5.8.18](https://github.com/Rel1cx/eslint-react/compare/v5.8.17...v5.8.18)

## v5.8.17 (2026-06-10) [#v5817-2026-06-10]

### 📝 Documentation [#-documentation-17]

* Simplified project description (#1860).
* Updated LICENSE copyright to include contributors (#1858).
* Updated brand assets guidelines and trademark policy on the website (#1859).

### 🏗️ Internal [#️-internal-39]

* Bumped `typescript-eslint` packages to `v8.61.0` (#1863, #1864).
* Cleaned up config files (#1856).
* Dropped `rename-rule` script and npm script (#1857).
* Updated `sponsors.svg` (#1855).
* Updated `undici` and cleaned up `dprint` config (#1854).
* Updated brand component and removed boilerplate on the website (#1861).
* Updated scaffold script, docs and baseline (#1862).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.16...v5.8.17](https://github.com/Rel1cx/eslint-react/compare/v5.8.16...v5.8.17)

## v5.8.16 (2026-06-07) [#v5816-2026-06-07]

### 🐞 Fixes [#-fixes-24]

* Aligned dependency versions across monorepo (#1853).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.15...v5.8.16](https://github.com/Rel1cx/eslint-react/compare/v5.8.15...v5.8.16)

## v5.8.15 (2026-06-07) [#v5815-2026-06-07]

### 📝 Documentation [#-documentation-18]

* Added under-construction callouts and refined kit pages on the website (#1850, #1851).
* Removed `AGENTS.md` and `CONTRIBUTING.md` documents and references (#1848).
* Updated home and third-party plugins pages on the website.
* Updated issue template guidance and labels.

### 🏗️ Internal [#️-internal-40]

* Bumped `@types/*` dependencies (#1852).
* Relaxed checklist requirements in issue templates (#1849).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.13...v5.8.15](https://github.com/Rel1cx/eslint-react/compare/v5.8.13...v5.8.15)

## v5.8.13 (2026-06-06) [#v5813-2026-06-06]

### 📝 Documentation [#-documentation-19]

* Added `GoogleCloudPlatform/gke-mcp` and removed archived `antfu/shiki-stream` from community projects on the website.
* Improved RSC Directives wording in documentation.
* Removed the `no-multiple-children-in-title` recipe from the website.
* Removed the kit beta banner from the website (#1846).

### 🏗️ Internal [#️-internal-41]

* Added `RuleListener` return type to all rule `create` functions (#1845).
* Added boundary and edge case tests for `react-dom` rules, JSX rules, and `naming-convention` rules (`context-name`, `id-name`, `ref-name`).
* Added identifier resolution tests for `react-x/no-leaked-conditional-rendering` (#1844).
* Bumped `pnpm` and updated lockfile.
* Bumped `tsdown` to `0.22.2` and updated dependencies.
* Removed redundant single-argument `merge()` calls in rules (#1843).
* Switched GitHub workflows to `ubuntu-latest`.
* Updated website brand assets and icons.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.12...v5.8.13](https://github.com/Rel1cx/eslint-react/compare/v5.8.12...v5.8.13)

## v5.8.12 (2026-06-05) [#v5812-2026-06-05]

### 🪄 Improvements [#-improvements]

* **`jsx`**: Aligned `getChildren` with Babel's `buildChildren` and `cleanJSXElementLiteralChild` patterns, improving whitespace handling accuracy in `react-jsx/no-useless-fragment` and `react-jsx/no-children-prop` rules. Migrated child text cleanup to `@eslint-react/jsx` utilities and removed local `lib.ts` helpers. (#1836)
* **`jsx`**: Removed `isPaddingWhitespace` API and added whitespace boundary tests for `react-jsx/no-useless-fragment` and `react-dom/no-dangerously-set-innerhtml-with-children` rules. (#1837)
* **`jsx`**: Renamed `cleanJSXTextValue` to `collapseMultilineText` in the public API and updated `react-jsx/no-useless-fragment` to use the new name. (#1838)

### 📝 Documentation [#-documentation-20]

* **Website**: Expanded the Brand Assets page with an icons section and formatted file names as inline code. (#1834)

### 🏗️ Internal [#️-internal-42]

* Added `scripts/generate-website-icons.py` for automated icon generation and refined logo geometry across all website assets. (#1833)
* Bumped `import-integrity-lint` and `enhanced-resolve`.
* Bumped `axios` to `^1.17.0` and `shiki` to `4.2.0`.
* Updated pnpm lockfiles for `dompurify` and `rolldown`.
* Updated rule-level changelogs for `no-useless-fragment`, `no-children-prop`, and `no-dangerously-set-innerhtml-with-children`. (#1836, #1837, #1838)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.11...v5.8.12](https://github.com/Rel1cx/eslint-react/compare/v5.8.11...v5.8.12)

## v5.8.11 (2026-06-04) [#v5811-2026-06-04]

### 📝 Documentation [#-documentation-21]

* Added a new **Brand Assets** page and updated Meta legal name (#1832).

### 🏗️ Internal [#️-internal-43]

* Updated default React fallback version to `19.2.7` (#1827).
* Recreated logo with an open-source workflow, removing reliance on SVG assets exported by Amadine (#1831).
* Removed `@fontsource/iosevka-aile` and switched to system font fallbacks.
* Bumped TypeScript to `6.0.3` (#1828).
* Patch bumped `@typescript-eslint/*` to `8.60.1`, `react` / `react-dom` to `19.2.7`, `next` to `16.2.7`, and `@types/react` to `19.2.16`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.10...v5.8.11](https://github.com/Rel1cx/eslint-react/compare/v5.8.10...v5.8.11)

## v5.8.10 (2026-06-02) [#v5810-2026-06-02]

### 🐞 Fixes [#-fixes-25]

* **`react-dom/no-unused-class-component-members`**: Aligned preset details in rule documentation (#1825).
* **`react-dom/no-unsafe-iframe-sandbox`*&#x2A;, &#x2A;*`react-x/context-name`*&#x2A;, &#x2A;*`react-x/id-name`*&#x2A;, &#x2A;*`react-x/ref-name`*&#x2A;, &#x2A;*`react-x/no-unnecessary-use-prefix`*&#x2A;, &#x2A;*`react-x/no-string-style-prop`**: Fixed missing or incorrect presets in rule documentation (#1826).

### 📝 Documentation [#-documentation-22]

* **`naming-convention`**: Expanded examples and annotated Ok cases for `context-name`, `id-name`, and `ref-name` rules (#1819).
* Refactored `MyComponent` examples to `Button` component in custom rules of props and function component definition recipes (#1823).
* Added `azat-io` eslint-config to the community presets list.

### 🏗️ Internal [#️-internal-44]

* **`jsx`**: Consolidated whitespace child predicates and added `isEmptyStringExpression` to the public API (#1820).
* Added preset verification to `check-docs.ts` (#1822).
* Added `AGENTS.md` guide for AI coding agents (#1824).
* Normalized local package metadata in `.pkgs/*`.
* Bumped `vite` to `^8.0.15` and `ansis` to `^4.3.1` across workspace packages.

### New Contributors [#new-contributors-1]

* **Kenton Jacobsen** (@brokentone) made their first contribution in #1825.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.9...v5.8.10](https://github.com/Rel1cx/eslint-react/compare/v5.8.9...v5.8.10)

## v5.8.9 (2026-06-01) [#v589-2026-06-01]

### 🐞 Fixes [#-fixes-26]

* **`react-x/no-direct-mutation-state`**: Detect nested state mutations and member expressions in assignment expressions (#1818).

### 📝 Documentation [#-documentation-23]

* Updated contributing guide and monorepo structure documentation.

### 🏗️ Internal [#️-internal-45]

* Removed `.vscode` directories from all examples, added missing `engines.node` to Preact examples, cleaned up redundant `.config/*.ts` from `tsconfig.node.json`, and updated `.gitignore`.
* Cleaned up configs and docs.
* Patch bumped `eslint`, `tinyglobby`, and `tsdown` across workspace packages; added `@fontsource/iosevka-aile` to the website; reordered CSS imports in `layout.tsx`.
* Updated `.sentrux` baseline timestamp.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.8...v5.8.9](https://github.com/Rel1cx/eslint-react/compare/v5.8.8...v5.8.9)

## v5.8.8 (2026-05-31) [#v588-2026-05-31]

### 📝 Documentation [#-documentation-24]

* **`kit`**: Added `is.APICall` callout to the Kit documentation (#1813).
* **`jsx`**: Updated `getChildren` and `hasChildren` API documentation to reflect empty string children behavior.
* Reworked status emoji indicators across docs and examples (#1816).
* Added ℞ prefix to recipe titles and cleaned up See Also sections.
* Removed the `custom-rules-of-children` recipe and cross-linked the remaining recipes.
* Added redirects for moved rule documentation.
* Cleaned up the "Community Maintained Presets that use ESLint React" documentation page.

### 🏗️ Internal [#️-internal-46]

* **`react-x/no-misused-capture-owner-stack`**: Added edge-case tests for `captureOwnerStack` (#1813).
* Updated fonts and dropped the `data-theme` attribute.
* Updated theme configuration (#1815).
* Aligned the `tsdown` version in `@local/configs`.
* Enabled `trustPolicy: "no-downgrade"` and added `minimumReleaseAge: 1440` (1 day).
* Bumped `eslint` to `10.4.1` across workspace packages.
* Bumped `pnpm` to `11.5.0` and refreshed the lockfile.
* Bumped `fumadocs` packages and `tinyexec`.
* Bumped `eslint-plugin-package-json` to `1.2.0`.
* Updated dprint plugins and reformatted font families in example projects.
* Updated Sentrux baseline metrics.
* Updated `.gitignore`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.7...v5.8.8](https://github.com/Rel1cx/eslint-react/compare/v5.8.7...v5.8.8)

## v5.8.7 (2026-05-29) [#v587-2026-05-29]

### 🐞 Fixes [#-fixes-27]

* **`react-x/no-create-ref`**: Fixed a false positive where `createRef` calls in non-React classes were reported. The rule now only reports `createRef` calls inside function components or Hooks (#1812).
* **`react-x/no-unused-state`**: Removed the "only used in effects" detection so the rule only reports state variables that are defined but never used, reducing false positives (#1808, #1749).
* **`jsx`**: Aligned children filtering and `hasChildren` behavior with React source, updating `no-children-prop` and `no-useless-fragment` rules accordingly (#1805).
* **Zod compatibility**: Relaxed `zod` peer dependency to support both v3 and v4 (#1810).

### 📝 Documentation [#-documentation-25]

* **`react-dom`*&#x2A;, &#x2A;*`react-web-api`*&#x2A;, &#x2A;*`react-x`**: Enriched rule MDX examples with TypeScript snippets from react.dev (#1809).
* **`react-dom`**: Added more rule examples to `no-dangerously-set-innerhtml`, `no-find-dom-node`, `no-hydrate`, `no-render`, and `no-render-return-value` documentation (#1804).
* **`react-dom`**: Added legitimate `flushSync` use cases to `no-flush-sync` rule documentation (#1803).
* Bumped the documented ESLint minimum version to `10.3.0`.
* Clarified that the `off` preset disables all rules.
* Fixed inaccurate minimum ESLint version and `off` preset description in README.

### 🏗️ Internal [#️-internal-47]

* **`react-x/no-misused-capture-owner-stack`**: Refactored the `process.env.NODE_ENV` detection helpers to use the shared `core.isAPI` utility (#1812).
* **`react-x/no-unused-state`**: Removed incorrect invalid test cases.
* **`jsx`**: Added targeted test cases for empty string children behavior in `no-children-prop-with-children` and `no-useless-fragment` rules (#1806).
* Removed `eslint-plugin-function` and bumped website dependencies (#1811).
* Flattened `scripts/lib` into the `scripts` root.
* Updated `.textlintrc.json`.
* Updated dprint plugins and tidied scripts.
* Removed `enriching-rule-examples-from-react-dev.md` from main branch.
* Updated Sentrux baseline metrics.
* Updated per-rule CHANGELOGs for `no-useless-fragment`, `no-children-prop`, and `no-children-prop-with-children` (#1805).
* Bumped dependencies:
  * `@takumi-rs/image-response` to `^1.6.0`
  * `dompurify` to `3.4.6`
  * `fumadocs-mdx` and updated pnpm lockfile
  * `tsdown` to `0.22.1`
  * dprint plugins (`g-plane/markup_fmt` and `markdown`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.6...v5.8.7](https://github.com/Rel1cx/eslint-react/compare/v5.8.6...v5.8.7)

## v5.8.6 (2026-05-27) [#v586-2026-05-27]

### 📝 Documentation [#-documentation-26]

* Improved `react-x/context-name` rule description accuracy.
* Removed broken Further Reading links across rule documentation.
* Reordered Further Reading links by relevance in `react-x`, `react-dom`, and `react-web-api` rule documentation.
* Updated `rule-implementation-patterns-term-based.md` documentation.

### 🏗️ Internal [#️-internal-48]

* **`ast`**: Replaced `isLiteral` with `isStringLiteral` in `Check` utilities (#1798).
* Bumped dependencies across workspace packages:
  * `@typescript-eslint` to `^8.60.0`
  * `eslint-plugin-jsdoc` to `63.0.0`
  * `fumadocs` patch versions
  * `nx` to `^22.7.4`
  * `pnpm` and lockfile updates

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.5...v5.8.6](https://github.com/Rel1cx/eslint-react/compare/v5.8.5...v5.8.6)

## v5.8.5 (2026-05-24) [#v585-2026-05-24]

### 📝 Documentation [#-documentation-27]

* Added rule implementation patterns guide (`docs/rule-implementation-patterns.md`) and term-based rule patterns guide (`docs/rule-implementation-patterns-term-based.md`).
* Lowered minimum TypeScript version requirement from `5.1.0` to `5.0.0` across README and documentation.
* Fixed textlint war-metaphor warnings and refined `.textlintrc.json` patterns.

### 🏗️ Internal [#️-internal-49]

* Adjusted formatting across configuration and script files (#1795).
* Fixed a typo in the CI test workflow step.
* Added regression tests for oxc issues compatibility verification (#1796).
* Bumped dependencies across workspace packages:
  * `@effect/language-service` to `^0.86.2`
  * `@takumi-rs/image-response` to `^1.3.0`
  * `@tsconfig/vite-react` to `^8.0.6`
  * `@types/node` to `^25.9.1`
  * `@types/react` to `^19.2.15`
  * `eslint-plugin-package-json` to `^1.1.0`
  * `fumadocs-core` to `^16.9.0`
  * `fumadocs-mdx` to `^15.0.7`
  * `fumadocs-ui` to `^16.9.0`
  * `lru-cache` to `11.5.0`
  * `nx` to `^22.7.3`
  * `postcss` to `^8.5.15`
  * `vite` to `^8.0.14`
  * `vitest` to `^4.1.7`
  * `pnpm` to `11.2.1`

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.4...v5.8.5](https://github.com/Rel1cx/eslint-react/compare/v5.8.4...v5.8.5)

## v5.8.4 (2026-05-22) [#v584-2026-05-22]

### 📝 Documentation [#-documentation-28]

* Restructured the FAQ page from an accordion layout to standard headings for better SEO, accessibility, and direct anchor linking.
* Replaced the homepage `Hint` popover with a direct link to the FAQ anchor explaining the project's human/LLM collaboration policy.
* Added a new &#x2A;*"What does 90% human-written mean?"** section to the FAQ.
* Updated documentation for `isClassComponent` and `JsxConfig`.
* Removed outdated documentation files.

### 🏗️ Internal [#️-internal-50]

* **`core`**: Simplified `isClassComponent` by removing the `context` parameter and replacing `isClassComponentLoose` with the simplified function.
* **`eslint-plugin-react-x`**: Removed unnecessary optional chaining across multiple rules (`immutability`, `no-unused-state`, `purity`, `refs`, `set-state-in-effect`, `static-components`, `use-memo`, etc.) and expanded test coverage for edge cases (#1792).
* Added automated GitHub Release workflow and fixed `actions/setup-node` cache parameter error.
* Added null-safety boundary tests for rules affected by PR #1792 (#1794).
* Bumped dependencies across workspace packages: `@takumi-rs/image-response` to 1.2.1, `fumadocs-mdx` to 15.0.6, `import-integrity-lint` to 1.1.1, `preact` to 10.29.2, `tsx` to 4.22.1, `@typescript-eslint` to `^8.59.4`, `@types/node` to `^25.9.0`, `dompurify` to `^3.4.5`, `pnpm` to `11.1.3`, `textlint` to 15.7.1, and dprint TypeScript plugin to 0.96.1.
* Cleaned up stray empty string in `tsl.config.ts`.
* Cleaned up type and lint errors across the workspace (#1793).
* Downgraded TypeScript override in `pnpm-workspace.yaml` from `^6.0.3` to `5.9.3`.
* Fixed zizmor security audit findings in release workflow and moved ignore comments inline, removing `.github/zizmor.yml`.
* Removed `scripts/verify-lockfile.ts`, `scripts/verify-devtools.ts`, and all references to them.
* Reordered handler functions in `react-jsx/no-children-prop` (no logic change).
* Updated baseline metrics and compacted tsconfig.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.3...v5.8.4](https://github.com/Rel1cx/eslint-react/compare/v5.8.3...v5.8.4)

## v5.8.3 (2026-05-20) [#v583-2026-05-20]

### 🐞 Fixes [#-fixes-28]

* **`react-dom/no-unknown-property`**: Added React 19 `precedence` and `blocking` attributes to the known property allowlist with version-gated tag checks, preventing false positives on `<style>`, `<link>`, and `<script>` elements (#1789, #1790).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.2...v5.8.3](https://github.com/Rel1cx/eslint-react/compare/v5.8.2...v5.8.3)

## v5.8.2 (2026-05-20) [#v582-2026-05-20]

### 📝 Documentation [#-documentation-29]

* Added React 19 `use` hook guidance to `error-boundaries`, `rules-of-hooks`, and `no-use-context` docs.
* Added migration examples and corrected rule descriptions for class-component-related rules.
* Improved `eslint-plugin-react-x` rule documentation with scenario-based examples, Troubleshooting sections, and Further Reading links across 48 rule docs (#1786).
* Removed inline ESLint error annotations (`^^^`) from documentation examples for better readability (#1785).
* Updated migration guide for `eslint-plugin-react` with additional details.

### 🏗️ Internal [#️-internal-51]

* Set up textlint and fixed inappropriate wording in documentation (#1787).
* Bumped dependencies across workspace packages (#1788).
* Updated `pnpm-lock.yaml`: bumped `nx` to 22.7.2 and `brace-expansion` to 5.0.5.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.1...v5.8.2](https://github.com/Rel1cx/eslint-react/compare/v5.8.1...v5.8.2)

## v5.8.1 (2026-05-18) [#v581-2026-05-18]

### 📝 Documentation [#-documentation-30]

* Restructured rule documentation across all plugins (`eslint-plugin-react-x`, `eslint-plugin-react-dom`, `eslint-plugin-react-jsx`, `eslint-plugin-react-web-api`, `eslint-plugin-react-naming-convention`, `eslint-plugin-react-debug`, `eslint-plugin-react-rsc`) from the `Common Violations / Invalid / Valid` format to the new `Examples / scenario-based / Troubleshooting / Further Reading` format (#1784).
* Updated README tagline and description, removed the Benchmark section, and fixed migration guide links (#1783).
* Updated website recipe docs, FAQ, and third-party plugins page (#1783).

### 🏗️ Internal [#️-internal-52]

* Updated `scripts/90-scaffold-rule.ts` and the rule request issue template to match the new documentation structure (#1782).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.8.0...v5.8.1](https://github.com/Rel1cx/eslint-react/compare/v5.8.0...v5.8.1)

## v5.8.0 (2026-05-17) [#v580-2026-05-17]

### 🪄 Improvements [#-improvements-1]

* **`react-jsx/no-children-prop`*&#x2A;, &#x2A;*`react-jsx/no-children-prop-with-children`**: Added support for `createElement` calls in addition to JSX elements (#1780).

### 📝 Documentation [#-documentation-31]

* Added `eslint-plugin-perfectionist` to the third-party plugins documentation page (#1778).

### 🏗️ Internal [#️-internal-53]

* Bumped `import-integrity-lint` to 1.0.1.
* Fixed multiple versions of `typescript-eslint` and `import-integrity-lint` in the workspace (#1776).
* Increased pnpm `minimumReleaseAge` to 3 days and updated lockfile (#1779).
* Removed `.repos` directory references from config files (#1773).
* Removed obsolete maintenance scripts (`create-spec-alignment-issues.sh`, `migrate-labels.sh`) (#1777).
* Replaced `eslint-plugin-fast-import` with `import-integrity-lint` (#1774).
* Simplified the publish CI workflow by skipping install scripts and removing the lint step (#1775).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.10...v5.8.0](https://github.com/Rel1cx/eslint-react/compare/v5.7.10...v5.8.0)

## v5.7.10 (2026-05-16) [#v5710-2026-05-16]

### 🐞 Fixes [#-fixes-29]

* **`react-x/no-leaked-conditional-rendering`*&#x2A;, &#x2A;*`react-x/set-state-in-effect`**: Added cycle detection to prevent stack overflow in recursive function analysis (#1769).

### 📝 Documentation [#-documentation-32]

* Added `third-party-plugins.mdx` documentation page.
* Added spec diff and compiler test fixtures for `react-x/globals` rule.
* Updated ESLint Stylistic link to rules anchor.
* Updated community projects (added Obsidian Copilot).
* Added redirects and simplified removed docs page.

### 🏗️ Internal [#️-internal-54]

* **`react-x/error-boundaries`**: Simplified `getEnclosingTryBlock` implementation.
* Added `minimumReleaseAge` and `minimumReleaseAgeExclude` entries to `pnpm-workspace.yaml`.
* Bumped `fumadocs-core` and `fumadocs-ui` to 16.8.11.
* Pinned pnpm to v11 in CI and adjusted install hooks.
* Fixed the git diff noise issue caused by a large number of external repository files introduced by "Vendored `facebook/react` as git subtree under `.repos`" in v5.7.9 (re-released as v5.7.10, closes #1772).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.8...v5.7.10](https://github.com/Rel1cx/eslint-react/compare/v5.7.8...v5.7.10)

## v5.7.8 (2026-05-14) [#v578-2026-05-14]

### 🐞 Fixes [#-fixes-30]

* **`react-x/no-missing-key`**: Fixed the rule not detecting `ConditionalExpression`/`LogicalExpression` returned from block-bodied `.map`/`Array.from` callbacks. The rule now reports both branches when both lack a `key`, instead of only the first (#1767, #1766).

### 📝 Documentation [#-documentation-33]

* Added `[NEEDS VERIFICATION]` markers to spec diffs for React Compiler aligned rules.
* Added Repo Issue Labels Doc and migration scripts.
* Added a `Hint` component to the website and used it on the home page.

### 🏗️ Internal [#️-internal-55]

* Bumped `@effect/language-service` to 0.86.0.
* Bumped `dompurify` to 3.4.3.
* Bumped `fumadocs-mdx` to 15.0.4 and related dependencies.
* Bumped `pnpm` from 11.1.0 to 11.1.1.
* Enabled caching for Nx targets.
* Removed `experimental.useFlatConfig` from Zed settings.
* Removed two dprint plugins from `dprint.json`.
* Updated Sentrux baseline metrics.

## New Contributors [#new-contributors-2]

* @lixiaoyan made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1767](https://github.com/Rel1cx/eslint-react/pull/1767)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.7...v5.7.8](https://github.com/Rel1cx/eslint-react/compare/v5.7.7...v5.7.8)

## v5.7.7 (2026-05-12) [#v577-2026-05-12]

### 🐞 Fixes [#-fixes-31]

* Fixed the rule documentation URLs returned by `eslint-plugin-react-jsx` and `eslint-plugin-react-rsc` to include the `jsx-` / `rsc-` prefixes so editor `Open documentation` links resolve correctly (#1757) — by @kasmacioma.

### 🏗️ Internal [#️-internal-56]

* Bumped `@types/node` from 25.6.2 to 25.7.0.
* Bumped `pnpm` from 11.0.9 to 11.1.0.
* Bumped `mermaid` from 11.14.0 to 11.15.0 and pinned it via `pnpm-workspace.yaml` overrides, dropping the transitive `chevrotain@12.0.0` chain in favor of `@chevrotain/types@11.1.2`.
* Enabled `trustPolicy: "no-downgrade"` in `pnpm-workspace.yaml`.

## New Contributors [#new-contributors-3]

* @kasmacioma made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1757](https://github.com/Rel1cx/eslint-react/pull/1757)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.6...v5.7.7](https://github.com/Rel1cx/eslint-react/compare/v5.7.6...v5.7.7)

## v5.7.6 (2026-05-12) [#v576-2026-05-12]

### 📝 Documentation [#-documentation-34]

* Migrated the website to the fumadocs solar theme; removed the WIP Frutiger Aero variant and consolidated theme overrides.
* Each rule documentation page now lists prior versions in a `Versions` accordion sourced from per-rule `CHANGELOG.md`.
* Added the `mikoto` project to the community showcase.
* Updated README badges to use `@eslint-react/core`.

### 🏗️ Internal [#️-internal-57]

* Bumped `@typescript-eslint` packages from 8.59.2 to 8.59.3.
* Bumped `fumadocs-core` and `fumadocs-ui` from 16.8.7 to 16.8.10.
* Bumped `fumadocs-mdx` from 14.3.2 to 15.0.3.
* Bumped `tailwindcss` and `@tailwindcss/postcss` from 4.2.4 to 4.3.0.
* Bumped `tailwind-merge` from 3.5.0 to 3.6.0.
* Bumped `vitest` from 4.1.5 to 4.1.6.
* Bumped `ansis` from 4.2.0 to 4.3.0.
* Bumped `semver` from 7.7.4 to 7.8.0.
* Bumped `pnpm` from 11.0.8 to 11.0.9.
* Upgraded dprint biome plugin from 0.12.10 to 0.12.11.
* Reverted `nx` from a 23.0.0 canary back to 22.7.1 stable.
* Renamed the `verify:rule-docs` script to `check:docs`.
* Removed unused `assets/logo.html` and `assets/react-icon.html` (#1755, #1756).
* Updated Sentrux baseline metrics.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.5...v5.7.6](https://github.com/Rel1cx/eslint-react/compare/v5.7.5...v5.7.6)

## v5.7.5 (2026-05-08) [#v575-2026-05-08]

### 🏗️ Internal [#️-internal-58]

* Bumped `@eslint/compat` from 2.0.5 to 2.1.0.
* Bumped `@types/node` from 25.6.0 to 25.6.2.
* Bumped `next` from 16.2.5 to 16.2.6.
* Bumped `publint` from 0.3.19 to 0.3.20.
* Bumped `tsdown` from 0.21.10 to 0.22.0.
* Bumped `pnpm` from 10.33.4 to 11.0.8.
* Adjusted website styles.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.4...v5.7.5](https://github.com/Rel1cx/eslint-react/compare/v5.7.4...v5.7.5)

## v5.7.4 (2026-05-07) [#v574-2026-05-07]

### 🏗️ Internal [#️-internal-59]

* Bumped `@typescript-eslint` packages from 8.59.1 to 8.59.2.
* Bumped `react` and `react-dom` from 19.2.5 to 19.2.6.
* Bumped `next` from 16.2.4 to 16.2.5.
* Bumped `nx` from 22.7.1 to 23.0.0-canary.20260506-b594537.
* Bumped `fumadocs-core` and `fumadocs-ui` from 16.8.5 to 16.8.7.
* Bumped `postcss` from 8.5.13 to 8.5.14.
* Bumped `publint` from 0.3.18 to 0.3.19.
* Bumped `pnpm` from 10.33.2 to 10.33.4.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.3...v5.7.4](https://github.com/Rel1cx/eslint-react/compare/v5.7.3...v5.7.4)

## v5.7.3 (2026-05-06) [#v573-2026-05-06]

### 🐞 Fixes [#-fixes-32]

* **`react-x/immutability`**: Exempted ref mutations via a naming heuristic — any object whose identifier is `ref` or ends with `Ref` is treated as a mutable ref and skipped from immutability checks. This fixes false positives when mutating `RefObject<T>` values received as props (#1752, #1751).
* **`react-x/immutability`**: Added `noRefLikeStateName` diagnostic to prevent state variables from being named `ref` or ending with `Ref`, which would otherwise bypass the ref exemption heuristic (#1752).

### 📝 Documentation [#-documentation-35]

* Fixed the full rule name in `react-jsx/no-key-after-spread` documentation (`jsx/no-key-after-spread` → `jsx-no-key-after-spread`) (#1750).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.2...v5.7.3](https://github.com/Rel1cx/eslint-react/compare/v5.7.2...v5.7.3)

## v5.7.2 (2026-05-04) [#v572-2026-05-04]

### 🐞 Fixes [#-fixes-33]

* **`react-x/no-unused-state`**: Removed the rule from the `recommended` preset for now (#1747, #1748).

### 📝 Documentation [#-documentation-36]

* Added individual CHANGELOG.md files for all rules (#1746).
* Added rule changelog links to all rule documentation pages.
* Updated AST Explorer links in docs.
* Various documentation cleanups.

### 🏗️ Internal [#️-internal-60]

* Updated baseline metrics.
* Updated roadmap milestone labels.
* Upgraded dprint biome plugin from 0.12.9 to 0.12.10.
* Cleaned up snapshot generation script and snapshot file.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.1...v5.7.2](https://github.com/Rel1cx/eslint-react/compare/v5.7.1...v5.7.2)

## v5.7.1 (2026-05-02) [#v571-2026-05-02]

### 🐞 Fixes [#-fixes-34]

* **`all` preset**: Fixed an issue where the `all` preset accidentally included rules requiring type information (#1744).

### 📝 Documentation [#-documentation-37]

* Fixed a typo in the shared settings description.
* Fixed missing trailing commas in ESLint settings examples.
* Updated `no-unused-state` rule wording and examples.
* Added a Resources section with AST Explorer, ESLint Developer Guide, and TypeScript Compiler API links to kit-related documentation pages.

### 🏗️ Internal [#️-internal-61]

* Pinned dependency versions for `next` and `@rbxts/react`.
* Added `react-compiler-fixtures-all-preset.jsonl` snapshot generation.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.7.0...v5.7.1](https://github.com/Rel1cx/eslint-react/compare/v5.7.0...v5.7.1)

## v5.7.0 (2026-05-02) [#v570-2026-05-02]

### ✨ New [#-new-8]

* **`react-x/no-unused-state`**: The rule re-added as a no-op in `v5.6.6` is now fully implemented. It detects state variables declared via `useState` (or similar state hooks) that are defined but never read, or only read inside an effect or effect dependency array (#1741).

### 📝 Documentation [#-documentation-38]

* Updated minimum version requirements in README and docs (ESLint 10.2.1, TypeScript 6.0.3, pnpm 10.33.2).
* Fixed `no-unused-state` migration docs and removed rule reasons.

> **LTS Maintenance Mode**: Starting with v5.7.0, the project has entered a Long-Term Support (LTS) maintenance mode. New feature development is temporarily on hold while the project prioritizes bug fixes, rule improvements, and documentation updates. See [#1740](https://github.com/Rel1cx/eslint-react/issues/1740) for details.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.6.6...v5.7.0](https://github.com/Rel1cx/eslint-react/compare/v5.6.6...v5.7.0)

## v5.6.6 (2026-05-01) [#v566-2026-05-01]

### ✨ New [#-new-9]

* **`react-x/no-unused-state`**: Re-add the `react-x/no-unused-state` rule that was removed in `5.0.0` as a no-op rule for detecting unused state in function components in a future release.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.6.4...v5.6.6](https://github.com/Rel1cx/eslint-react/compare/v5.6.4...v5.6.6)

## v5.6.4 (2026-05-01) [#v564-2026-05-01]

### ✨ New [#-new-10]

* **`react-x/no-unused-class-component-members`**: Now flags `shouldComponentUpdate` methods defined in classes extending `PureComponent` as unused, since `PureComponent` implements its own `shouldComponentUpdate` with shallow prop and state comparison (#1738).

### 📝 Documentation [#-documentation-39]

* Added `jsx` preset documentation to multiple rule docs.
* Removed empty Presets sections from rule documentation.

### 🏗️ Internal [#️-internal-62]

* **`ast`**: Added an optional `stop` predicate to `findParent` utility for more control over ancestor traversal (#1736).
* Replaced `skott` with `sentrux` for architecture linting.
* Updated sentrux rules and baseline metrics.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.6.3-beta.0...v5.6.4](https://github.com/Rel1cx/eslint-react/compare/v5.6.3-beta.0...v5.6.4)

## v5.6.3-beta.0 (2026-04-30) [#v563-beta0-2026-04-30]

### 🏗️ Internal [#️-internal-63]

* **JSX detection utilities moved to `@eslint-react/core`**: `isJsxLike`, `JsxConfig`, `JsxDetectionHint`, and related types now import from `@eslint-react/core`. The old `@eslint-react/jsx` module no longer re-exports these symbols. `isJsxText` and `JsxEmit` have been removed in favor of core equivalents.
* Added Nx and set up project graph caching.
* Added architectural boundaries for app and package dependencies.
* Added devtools verification script.
* Added sentrux layer architecture and dependency rules.
* Updated sentrux baseline timestamps.
* Upgraded `zod` from 4.3.6 to 4.4.1.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.6.2...v5.6.3-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.6.2...v5.6.3-beta.0)

## v5.6.2 (2026-04-30) [#v562-2026-04-30]

### 🐞 Fixes [#-fixes-35]

* **`react-x/use-memo`**: Fixed false positives in `useMemo` dependency analysis by using reference/definition analysis (#1735).

### 📝 Documentation [#-documentation-40]

* Added anchor links to rule names in recipe docs.
* Added migration overview page with sidebar entry.
* Added naming-convention preset configuration documentation.
* Simplified conditional formatting in `custom-rules-of-state` recipe.
* Updated migration guide and added `noDirectAccessProps` custom rule example.

### 🏗️ Internal [#️-internal-64]

* Removed unused diagram components and imports.
* Reordered redirects with comments for clarity.
* Bumped `lucide-react` from 1.12.0 to 1.14.0.
* Updated `baseline-browser-mapping` to 2.10.24.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.6.0...v5.6.2](https://github.com/Rel1cx/eslint-react/compare/v5.6.0...v5.6.2)

## v5.6.0 (2026-04-29) [#v560-2026-04-29]

This release consolidates all changes since v4.2.1.

### 💥 Breaking Changes [#-breaking-changes]

#### Core API Refactoring (@eslint-react/core) [#core-api-refactoring-eslint-reactcore]

* Performed a large-scale flattening refactor of the core package's internal structure, merging modules previously scattered across subdirectories like `component/`, `function/`, `hook/`, `semantic/`, and `api/` into the root directory.
* Renamed several core APIs:
  * `isReactAPI` → `isAPI`
  * `isReactAPICall` → `isAPICall`
  * `isInitializedFromReact` → `isAPIFromReact`
  * `isInitializedFromReactNative` → `isAPIFromReactNative`
  * `ComponentDetectionHint` → `FunctionComponentDetectionHint`
  * `ComponentFlag` → `FunctionComponentFlag`
  * `getComponentCollector` → `getFunctionComponentCollector`
  * `getComponentCollectorLegacy` → `getClassComponentCollector`
* Migrated type utilities (`type-is`, `type-name`, `type-variant`) from `eslint-plugin-react-x` to `@eslint-react/core`.
* Updated the `Toolkit` interface in `@eslint-react/kit` to reflect the naming changes above.

#### Kit API Simplification (@eslint-react/kit) [#kit-api-simplification-eslint-reactkit]

* **Simplified `RuleToolkit.is` API**: Removed pre-built identifier predicates (`memo`, `lazy`, `forwardRef`, etc.) from `RuleToolkit.is`. Only `*Call` variants and `API`/`APICall` factories are now available.
* **Renamed initialization checkers**:
  * `initializedFromReact` → `APIFromReact`
  * `initializedFromReactNative` → `APIFromReactNative`
* Code using `is.memo(node)`, `is.lazy(node)`, etc. must migrate to `is.memoCall(node)` or use `is.API("memo")(node)`.

#### Type Alias Removal [#type-alias-removal]

* **Removed deprecated `RuleDefinition` type alias**: The `RuleDefinition` type has been completely removed from `@eslint-react/kit`. Use `RuleFunction` instead.

#### Removed Rules [#removed-rules]

The following rules have been removed from `eslint-plugin-react-x`, `eslint-plugin-react-dom`, and `eslint-plugin-react-debug`:

| Rule                                   | Package       | Notes                    |
| -------------------------------------- | ------------- | ------------------------ |
| `component-hook-factories`             | `react-x`     | Removed from all configs |
| `no-redundant-should-component-update` | `react-x`     | Removed from all configs |
| `no-unnecessary-use-callback`          | `react-x`     | Removed from all configs |
| `no-unnecessary-use-memo`              | `react-x`     | Removed from all configs |
| `no-unused-state`                      | `react-x`     | Removed from all configs |
| `prefer-destructuring-assignment`      | `react-x`     | Removed from all configs |
| `prefer-namespace-import`              | `react-x`     | Removed from all configs |
| `prefer-namespace-import`              | `react-dom`   | Removed from all configs |
| `debug/class-component`                | `react-debug` | Removed from all configs |

#### Class Component Support Deprecation [#class-component-support-deprecation]

* All Class Component-related detection functions in the core package (such as `isClassComponent`, `isPureComponent`, and various lifecycle checkers) have been marked as `@deprecated`, retaining only minimal compatibility support for existing rules.
* Rules in `eslint-plugin-react-web-api`, including `no-leaked-event-listener`, `no-leaked-interval`, and `no-leaked-timeout`, have removed detection for Class Component lifecycles (`componentDidMount` / `componentWillUnmount`) and now only report on Hook Effects (`useEffect`, etc.).

### ✨ New [#-new-11]

#### New Rules [#new-rules]

* **`react-x/globals`**: New rule for restricting usage of global variables in React components.
* **`react-x/static-components`**: New rule for enforcing static component definitions. Enhanced with variable reference tracking and a `createdHere` diagnostic to reduce false positives.
* **`react-web-api/no-leaked-fetch`**: New rule that detects leaked `fetch` calls in effects, closing #1714.

#### Kit Enhancements [#kit-enhancements]

* Added `ast.findParent` utility to `@eslint-react/kit` for traversing AST ancestors.
* Added support for &#x2A;*Universally Unique Lexicographically Sortable Identifiers (ULID)** for anonymous rules (later migrated to `node:crypto randomBytes`).

#### Custom Rule Examples [#custom-rule-examples]

* Added Error Boundaries custom rule example.
* Added boolean prop naming custom rule and documentation.

### 🐞 Fixes [#-fixes-36]

#### Rule Fixes [#rule-fixes]

* **`react-x/error-boundaries`**: Fixed false positives on non-React code and resolved catch block over-reporting.
* **`react-x/set-state-in-effect`**: Improved validation accuracy.
* **`react-x/use-memo`**: Added reassignment check, aligned message IDs, and added support for `for-of`/`for-in` loops.

#### Config Fixes [#config-fixes]

* Added missing rules to presets, cleaned up experimental disables, and updated documentation.
* Extracted naming-convention preset and fixed config gaps.

#### Type Expression Fixes [#type-expression-fixes]

* Added missing `Extract.unwrap` for type expressions and chain expressions.
* Unwrapped type expressions before inspecting AST node types.

### 🪄 Improvements [#-improvements-2]

#### API & Refactoring [#api--refactoring]

* **`ast`**: Normalized API naming conventions and rewrote Check helpers.
* **`ast`**: Renamed `isJSXLike` → `isJSXElementOrFragment` and `isMethodOrProperty` → `isPropertyOrMethod`.
* Extracted ESLint types and utilities into the `@eslint-react/eslint` package.
* Extracted `@eslint-react/jsx` from `@eslint-react/core` into a standalone utility package for static analysis of JSX patterns.
* Migrated to `@` and `#` path aliases and replaced `tsx` with `vite-node`.
* Moved pattern utilities to rule directories and extracted rule helpers into co-located `lib.ts` modules across multiple plugins.
* Reorganized imports across the codebase.
* Replaced `RuleConfig` with `Linter.RulesRecord` from ESLint.
* Restructured monorepo packages directory layout.
* Unified import style across packages and plugins.

#### Core & AST Improvements [#core--ast-improvements]

* **`ast`**: Updated `FunctionInitPath` types to support method definitions and property arrow functions in class expressions.
* **`ast/isNodeEqual`**: Fixed `JSXNamespacedName` comparison logic.

#### Rule Improvements [#rule-improvements]

* **`react-x/static-components`**: Registered in `all`, `x`, and `disable-experimental` configs.
* **`react-rsc/function-definition`**: Added directive position and quote checks.
* Extracted HOC detection helpers to dedicated `lib.ts` files.

#### Website & Documentation Improvements [#website--documentation-improvements]

* Added LLM routes (`/llms.txt`, `/llms-full.txt`, `/llms.mdx`).
* Added inline TOCs and improved navigation.
* Enabled twoslash type-checking for code examples.
* Improved accessibility and unified layout configuration.

#### Testing [#testing]

* Expanded compiler fixture coverage across 9 rules.
* Added comprehensive unit tests for component/hook detection utilities.

#### Dependencies [#dependencies]

* Bumped TypeScript to 6.0.3.
* Bumped Vite to ^8.0.7 in examples.
* Bumped `@typescript-eslint` packages to 8.59.1.
* Bumped `tsl-dx`, `tsdown`, `fumadocs`, `postcss`, `lucide-react`, `eslint-plugin-package-json`, and other dependencies.

### 📝 Documentation [#-documentation-41]

* Added custom rule recipes for React Children API, Context API, props, state, boolean prop naming, and error boundaries.
* Added migration examples (`no-set-state`, `no-string-refs`).
* Added IMPL–SPEC diff documents for 5 React Compiler aligned rules.
* Added spec documentation for validation rules.
* Added rule feature docs.
* Added table of contents to multiple documentation files.
* Updated migrating-from-eslint-plugin-react guide.
* Updated local packages docs.
* Updated roadmap and contributing architecture diagram.

### 🏗️ Internal [#️-internal-65]

* Added `build:plugins` script and updated build path patterns.
* Added `publishConfig.access` to packages and marked `@local/eff` as private.
* Added documentation comments to rule scripts.
* Added typedoc docs and engines field.
* Extracted shared tsdown config.
* Fixed high-priority build, lockfile, script and doc inconsistencies.
* Removed `major-release-checklist.md`.
* Removed `scripts/prepare-release.ts` and the accompanying `prepare:release` npm script.
* Removed barrel exports for utils.
* Removed unused dependencies and added missing devDependencies.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.2.1...v5.6.0](https://github.com/Rel1cx/eslint-react/compare/v4.2.1...v5.6.0)

## v5.6.0-beta.1 (2026-04-28) [#v560-beta1-2026-04-28]

### 🐞 Fixes [#-fixes-37]

* fix: unwrap type expressions before inspecting AST node types (#1732) (`c5290fcb3`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.6-beta.0...v5.6.0-beta.1](https://github.com/Rel1cx/eslint-react/compare/v5.5.6-beta.0...v5.6.0-beta.1)

## v5.5.6-beta.0 (2026-04-28) [#v556-beta0-2026-04-28]

### 🪄 Improvements [#-improvements-3]

* Register `static-components` rule in `all`, `x`, and `disable-experimental` configs (`1d179849c`)

### 🏗️ Internal [#️-internal-66]

* Add major release checklist to internal docs (`1d179849c`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.5-beta.1...v5.5.6-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.5.5-beta.1...v5.5.6-beta.0)

## v5.5.5-beta.1 (2026-04-28) [#v555-beta1-2026-04-28]

### 🪄 Improvements [#-improvements-4]

* **eslint-plugin-react-x:** improve `set-state-in-effect` validation (#1731) (`081ef976b`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.4-beta.0...v5.5.5-beta.1](https://github.com/Rel1cx/eslint-react/compare/v5.5.4-beta.0...v5.5.5-beta.1)

## v5.5.4-beta.0 (2026-04-28) [#v554-beta0-2026-04-28]

### 🐞 Fixes [#-fixes-38]

* **eslint-plugin-react-x:** resolve catch block over-reporting in `error-boundaries` rule (#1730) (`68b36a6ce`)

### 🪄 Improvements [#-improvements-5]

* Bump tsl-dx to 0.12.1 across multiple packages (`6438ea58f`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.3-beta.2...v5.5.4-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.5.3-beta.2...v5.5.4-beta.0)

## v5.5.3-beta.2 (2026-04-28) [#v553-beta2-2026-04-28]

### 📝 Documentation [#-documentation-42]

* Add rule feature docs (`0f453bfc7`)
* Update roadmap to remove completed Docs and Website items (`d1a8c7881`)

### 🪄 Improvements [#-improvements-6]

* Bump @typescript-eslint packages to 8.59.1 and add typescript as devDep (`7a1dcdc24`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.3-beta.1...v5.5.3-beta.2](https://github.com/Rel1cx/eslint-react/compare/v5.5.3-beta.1...v5.5.3-beta.2)

## v5.5.3-beta.1 (2026-04-27) [#v553-beta1-2026-04-27]

### 📝 Documentation [#-documentation-43]

* add IMPL–SPEC diff documents for 5 React Compiler aligned rules (`d83ff84c2`)
* add spec documentation for validation rules (`a69486e34`)
* update all IMPL–SPEC diff docs (`2d6575a84`)

### 🪄 Improvements [#-improvements-7]

* expand compiler fixture coverage across 9 rules (`efa367254`)
* bump postcss to 8.5.12 (`f491962e0`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.3-beta.0...v5.5.3-beta.1](https://github.com/Rel1cx/eslint-react/compare/v5.5.3-beta.0...v5.5.3-beta.1)

## v5.5.3-beta.0 (2026-04-26) [#v553-beta0-2026-04-26]

### ✨ New [#-new-12]

* **eslint-plugin-react-x:** enhance static-components rule with variable reference tracking (#1728) (`3aa068ef2`)
* **eslint-plugin-react-x:** add createdHere diagnostic to static-components and support for-of/for-in in use-memo (#1729) (`1b4f3d6f2`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.2-beta.0...v5.5.3-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.5.2-beta.0...v5.5.3-beta.0)

## v5.5.2-beta.0 (2026-04-26) [#v552-beta0-2026-04-26]

### ✨ New [#-new-13]

* **eslint-plugin-react-x:** add reassignment check and align message IDs in `use-memo` rule (#1727) (`c9d21bf3f`)

### 📝 Documentation [#-documentation-44]

* update roadmap to reflect completed rules and restructure entries (`7392c4a49`)
* update roadmap with v5.2.3-v5.5.1 changes and new package (`bbddec6e9`)

### 🏗️ Internal [#️-internal-67]

* relax typedoc version pin and add engines field (`c99f33606`)
* add documentation comments to rule scripts (`55681ca1e`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.1-beta.1...v5.5.2-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.5.1-beta.1...v5.5.2-beta.0)

## v5.5.1-beta.1 (2026-04-26) [#v551-beta1-2026-04-26]

### 🏗️ Internal [#️-internal-68]

* remove unused dependencies and add missing devDependencies (`0862bb744`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.1-beta.0...v5.5.1-beta.1](https://github.com/Rel1cx/eslint-react/compare/v5.5.1-beta.0...v5.5.1-beta.1)

## v5.5.1-beta.0 (2026-04-25) [#v551-beta0-2026-04-25]

### ✨ New [#-new-14]

* **kit:** add `ast.findParent` utility (#1726) (`cb61f68a1`)
* **website,examples,ast:** add Error Boundaries custom rule example (#1725) (`76a79e275`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.5.0-beta.0...v5.5.1-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.5.0-beta.0...v5.5.1-beta.0)

## v5.5.0-beta.0 (2026-04-25) [#v550-beta0-2026-04-25]

### 💥 Breaking Changes [#-breaking-changes-1]

* **eslint-plugin-react-x:** remove `component-hook-factories` rule as the upstream plugin (`eslint-plugin-react-hooks`) has removed the equivalent rule upstream (#1724) (`6e28b16da`)

### 🏗️ Internal [#️-internal-69]

* Return failure from verify-lockfile (`357e901cd`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.4.0-beta.0...v5.5.0-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.4.0-beta.0...v5.5.0-beta.0)

## v5.4.0-beta.0 (2026-04-25) [#v540-beta0-2026-04-25]

### ✨ New [#-new-15]

* **eslint-plugin-react-x:** add static-components rule and port Re… (#1723) (`f217198b3`)

### 📝 Documentation [#-documentation-45]

* **website:** add missing modules to contributing architecture diagram (`2c0e47891`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.3.4-beta.0...v5.4.0-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.3.4-beta.0...v5.4.0-beta.0)

## v5.3.4-beta.0 (2026-04-21) [#v534-beta0-2026-04-21]

### ✨ New [#-new-16]

* **eslint-plugin-react-rsc:** add directive position and quote checks to function-definition (#1721) (`9efcd5b4a`)

### 📝 Documentation [#-documentation-46]

* simplify boolean prop naming example with `ts.TypeFlags.BooleanLike` (`54a135930`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.3.3-beta.0...v5.3.4-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.3.3-beta.0...v5.3.4-beta.0)

## v5.3.3-beta.0 (2026-04-21) [#v533-beta0-2026-04-21]

### 🐞 Fixes [#-fixes-39]

* **configs:** add missing rules to presets, clean up experimental disables, and update docs (#1720) (`c994e55f9`)

### 📝 Documentation [#-documentation-47]

* minor fixes (`3c13fd6b9`)

### 🏗️ Internal [#️-internal-70]

* add missing naming-convention config verification and bump deps (`03694fa66`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.3.2-beta.0...v5.3.3-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.3.2-beta.0...v5.3.3-beta.0)

## v5.3.2-beta.0 (2026-04-20) [#v532-beta0-2026-04-20]

### 🐞 Fixes [#-fixes-40]

* **eslint-plugin:** extract naming-convention preset and fix config gaps (`d39a0c9f7`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.3.1-beta.0...v5.3.2-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.3.1-beta.0...v5.3.2-beta.0)

## v5.3.1-beta.0 (2026-04-20) [#v531-beta0-2026-04-20]

### ✨ New [#-new-17]

* **react-x:** add `globals` rule (#1716) (`324b38891`)

### 🐞 Fixes [#-fixes-41]

* add missing `Extract.unwrap` for type expressions and chain expressions (#1717) (`24bc183e1`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.3.0-beta.2...v5.3.1-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.3.0-beta.2...v5.3.1-beta.0)

## v5.3.0-beta.2 (2026-04-19) [#v530-beta2-2026-04-19]

### ✨ New [#-new-18]

* **custom-rules:** add boolean prop naming custom rule and docs (`e0ac2090c`)

### 🪄 Improvements [#-improvements-8]

* **custom-rules:** update booleanPropNaming.ts (`f55e8686b`)

### 📝 Documentation [#-documentation-48]

* add `no-set-state` and `no-string-refs` migration examples (`7691e11b3`)
* add 'Requires type checking' legend (`630e41fc6`)
* improve custom rule examples readability and consistency (`bfeaea095`)
* update migrating-from-eslint-plugin-react.mdx (`24e393566`)
* update rule warning text in plugin docs (`3d511d657`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.3.0-beta.1...v5.3.0-beta.2](https://github.com/Rel1cx/eslint-react/compare/v5.3.0-beta.1...v5.3.0-beta.2)

## v5.3.0-beta.1 (2026-04-18) [#v530-beta1-2026-04-18]

### ✨ New [#-new-19]

* **react-web-api:** add `no-leaked-fetch` rule, closes #1714 (#1715) (`09a3b1664`)

### 🪄 Improvements [#-improvements-9]

* **ast:** rename `isJSXLike` to `isJSXElementOrFragment` and `isMethodOrProperty` to `isPropertyOrMethod` (`7b21cf210`)
* **eslint-plugin-react-x:** rename component and hook collectors to short names (`e02d773a7`)
* extract rule helpers into co-located `lib.ts` modules across multiple plugins (`405964d31`)
* unify import style across packages and plugins (`5734462a4`)
* fix imports in website and custom rules examples (`ec8cf3cea`)
* add `publishConfig.access` to packages and mark `@local/eff` as private (`684e7f0d7`)

### 📝 Documentation [#-documentation-49]

* **website:** add banner for kit beta and disable inline CSS (`4686faa3f`)

### 🏗️ Internal [#️-internal-71]

* bump `tsl-dx`, `eslint-plugin-react-hooks`, and `@takumi-rs/image-response` (`7d9ff2677`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.2.4-beta.3...v5.3.0-beta.1](https://github.com/Rel1cx/eslint-react/compare/v5.2.4-beta.3...v5.3.0-beta.1)

## v5.2.4-beta.3 (2026-04-17) [#v524-beta3-2026-04-17]

### 🪄 Improvements [#-improvements-10]

* **ast:** normalize API naming conventions (`17e2f02d5`)
* **ast:** rewrite Check helpers (`d0c134bd1`)
* **core,kit:** replace ulid with node:crypto randomBytes (#1710) (`90b58e374`)

### 📝 Documentation [#-documentation-50]

* **kit:** trim README to website link and simplify website docs (`711b74ca0`)
* **website:** add inline TOCs (`1006386c1`)
* **website:** add marigold and nodejs.org to community projects (`ee0d2b7ed`)
* **website:** enable twoslash type-checking for code examples (#1713) (`a3c475ef7`)
* **website:** fix content and formatting issues in non-rule docs (`6c912a07d`)
* **website:** fix grammar, spacing, and table alignment in documentation (`d92b3fda1`)
* add v4.2.1 release notes (`aa1f659aa`)
* fix broken links and add missing `additionalEffectHooks` documentation (#1711) (`d30e047a9`)
* fix content and formatting issues in non-rule documentation (`94ebfbfd1`)

### 🏗️ Internal [#️-internal-72]

* Bump TypeScript to 6.0.3 and update deps (`2463160ce`)
* bump tsdown to 0.21.9 and fumadocs-mdx to 14.3.0 (`07bd7f267`)
* bump fumadocs and postcss in website (`612376c89`)
* extract shared tsdown config, add typedoc docs, and clean up (`ec8ad997a`)
* fix high-priority build, lockfile, script and doc inconsistencies (`50023dfd8`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.2.3-beta.0...v5.2.4-beta.3](https://github.com/Rel1cx/eslint-react/compare/v5.2.3-beta.0...v5.2.4-beta.3)

## v5.2.3-beta.0 (2026-04-14) [#v523-beta0-2026-04-14]

### 🪄 Improvements [#-improvements-11]

* use `Linter.RulesRecord` from eslint instead of custom `RuleConfig` (`01b79efd2`)

### 📝 Documentation [#-documentation-51]

* **website:** fix rules table 404 pages, closes #1702 (`c8721be38`)
* **kit:** remove redundant characteristics table for anonymous rules (`5f46e094f`)
* Update roadmap with completed v5 items (`e48117cdb`)
* Update flowchart label for Aggregated Plugin (`3122d37dc`)
* Update Kit docs link to internal route (`1c79c0892`)

### 🏗️ Internal [#️-internal-73]

* add `build:plugins` script and update build path patterns (`b0cc71b6a`)
* consolidate AST utilities and clean up `packages/ast` (`5b19496a8`)
* extract ESLint types and utilities into `@eslint-react/eslint` package (`f5cb25679`)
* move pattern utilities to rule directories and rename assignment target helper (`0b3f8b6b6`)
* restructure monorepo packages directory layout (`c0cefd0c2`)
* update Vite to ^8.0.7 in examples (`59165fdc7`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v5.0.2-beta.0...v5.2.3-beta.0](https://github.com/Rel1cx/eslint-react/compare/v5.0.2-beta.0...v5.2.3-beta.0)

## v5.0.2-beta.0 (2026-04-07) [#v502-beta0-2026-04-07]

### 💥 Breaking Changes [#-breaking-changes-2]

#### Kit API Simplification (@eslint-react/kit) [#kit-api-simplification-eslint-reactkit-1]

* **Simplified `RuleToolkit.is` API**: Removed pre-built identifier predicates (`memo`, `lazy`, `forwardRef`, etc.) from `RuleToolkit.is`. Only `*Call` variants and `API`/`APICall` factories are now available.
* **Renamed initialization checkers**:
  * `initializedFromReact` → `APIFromReact`
  * `initializedFromReactNative` → `APIFromReactNative`
* Code using `is.memo(node)`, `is.lazy(node)`, etc. must migrate to `is.memoCall(node)` or use `is.API("memo")(node)`.

#### Type Alias Removal [#type-alias-removal-1]

* **Removed deprecated `RuleDefinition` type alias**: The `RuleDefinition` type has been completely removed from `@eslint-react/kit`. Use `RuleFunction` instead.

#### Removed Rules [#removed-rules-1]

The following rules have been removed from `eslint-plugin-react-x` and `eslint-plugin-react-dom`:

| Rule                              | Package     | Notes                    |
| --------------------------------- | ----------- | ------------------------ |
| `no-unnecessary-use-callback`     | `react-x`   | Removed from all configs |
| `no-unnecessary-use-memo`         | `react-x`   | Removed from all configs |
| `no-unused-state`                 | `react-x`   | Removed from all configs |
| `prefer-destructuring-assignment` | `react-x`   | Removed from all configs |
| `prefer-namespace-import`         | `react-dom` | Removed from all configs |
| `prefer-namespace-import`         | `react-x`   | Removed from all configs |

### ✨ New Features [#-new-features]

#### Anonymous Rule Identifier [#anonymous-rule-identifier]

* Added support for &#x2A;*Universally Unique Lexicographically Sortable Identifiers (ULID)** for anonymous rules. This provides more robust identification for rules created without explicit names, improving debugging and traceability.

### 📝 Documentation [#-documentation-52]

* **New Recipes**:
  * Added `custom-rules-of-children` recipe for creating custom ESLint rules for React Children API.
  * Added `custom-rules-of-context` recipe for creating custom ESLint rules for React Context API.
  * Added `no-multiple-children-in-title` rule example.
  * Added `prefer-namespace-import` recipe for enforcing namespace imports.
* **Documentation Improvements**:
  * Updated kit documentation to reflect API renames and removals.
  * Synchronized API documentation across packages.
  * Reordered recipes (Context before Children) for better logical flow.
  * Removed Utility Modules section from READMEs.
  * Added beta warning to Configure Project Rules documentation.

### 🏗️ Internal Improvements [#️-internal-improvements]

* **JSX Package Refactoring**: Moved rule-specific JSX helpers into per-rule `lib.ts` files for better code organization.
* **HOC Detection**: Extracted HOC detection helpers to dedicated `lib.ts` files.
* **Website Improvements**: Improved accessibility and unified layout configuration.
* **Dependencies**: Bumped Vite to 8.0.5 across examples.

## v5.0.0-beta.0 (2026-04-04) [#v500-beta0-2026-04-04]

### 💥 Breaking Changes [#-breaking-changes-3]

#### Core API Refactoring (@eslint-react/core) [#core-api-refactoring-eslint-reactcore-1]

* Performed a large-scale flattening refactor of the core package's internal structure, merging modules previously scattered across subdirectories like `component/`, `function/`, `hook/`, `semantic/`, and `api/` into the root directory.
* Renamed several core APIs:
  * `isReactAPI` → `isAPI`
  * `isReactAPICall` → `isAPICall`
  * `isInitializedFromReact` → `isAPIFromReact`
  * `isInitializedFromReactNative` → `isAPIFromReactNative`
  * `ComponentDetectionHint` → `FunctionComponentDetectionHint`
  * `ComponentFlag` → `FunctionComponentFlag`
  * `getComponentCollector` → `getFunctionComponentCollector`
  * `getComponentCollectorLegacy` → `getClassComponentCollector`
* Migrated type utilities `type-is`, `type-name`, and `type-variant` from `eslint-plugin-react-x` to `@eslint-react/core`.
* Updated the `Toolkit` interface in `@eslint-react/kit` to reflect the naming changes above.

#### Removed Rules [#removed-rules-2]

* `@eslint-react/no-redundant-should-component-update`: This rule, along with its documentation and tests, has been removed from `eslint-plugin-react-x` and all configuration presets (`all`, `x`, `recommended`, `strict`, etc.).
* `debug/class-component`: This debug rule has been removed from `eslint-plugin-react-debug` and the `debug/all` configuration.

#### Class Component Support Deprecation [#class-component-support-deprecation-1]

* All Class Component-related detection functions in the core package (such as `isClassComponent`, `isPureComponent`, and various lifecycle checkers) have been marked as `@deprecated`, retaining only minimal compatibility support for existing rules.
* Rules in `eslint-plugin-react-web-api`, including `no-leaked-event-listener`, `no-leaked-interval`, and `no-leaked-timeout`, have removed detection for Class Component lifecycles (`componentDidMount` / `componentWillUnmount`) and now only report on Hook Effects (`useEffect`, etc.).

### 📝 Documentation [#-documentation-53]

* Added an Examples page (`/docs/examples`), listing all official example projects and links.
* Removed redundant Overview headings in several places throughout the documentation.
* Updated the migration guide and roadmap.

### 🏗️ Internal Improvements [#️-internal-improvements-1]

* Unified the import style for `@typescript-eslint/types` across the codebase, merging `TSESTree` types and `AST_NODE_TYPES` constants into single-line imports.
* Removed `scripts/prepare-release.ts` and the accompanying `prepare:release` npm script.
* Updated dependency versions for `esbuild`, `@eslint/compat`, `@types/node`, `undici`, etc.

## v4.2.5-beta.1 (2026-04-03) [#v425-beta1-2026-04-03]

### 🐞 Fixes [#-fixes-42]

* `react-x`: `error-boundaries`: Fix false positives on non-react code, closes #1690 (#1693) (`d2103595d`)

### 📝 Documentation [#-documentation-54]

* add missing index pages and clean up redirects for flattened URLs (`c419f4282`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.2.3...v4.2.5-beta.0](https://github.com/Rel1cx/eslint-react/compare/v4.2.3...v4.2.5-beta.0)

## v4.2.3 (2026-04-03) [#v423-2026-04-03]

### ✨ New [#-new-20]

* **jsx:** add jsx-no-leaked-dollar rule, add suggest fix to jsx-no-leaked-semicolon rule (#1688) (`b86bdd6da`)
* **jsx:** add jsx-no-leaked-semicolon rule, closes #1685 (#1686) (`fbb495000`)

### 📝 Documentation [#-documentation-55]

* update recipe section structure (Code→Rule, Usage→Config) (`8cade3008`)
* update custom rule examples code style (#1684) (`dc9d05c33`)
* update recipe titles to Title Case (`6a2d941b6`)
* improve recipes overview (`8278f45c9`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.2.2...v4.2.3](https://github.com/Rel1cx/eslint-react/compare/v4.2.2...v4.2.3)

## v4.2.2 (2026-04-02) [#v422-2026-04-02]

### 🪄 Improvements [#-improvements-12]

* `refactor(kit)`: Rename `RuleDefinition` to `RuleFunction` and deprecate the old name (#1683). The `RuleDefinition` type is now deprecated and will be removed in a future major release. Please migrate to `RuleFunction`.

### 📝 Documentation [#-documentation-56]

* `docs`: Add `noCircularEffect` recipe and register in examples, closes #755 (#1681).
* `docs`: Add `component-hook-factories` recipe and update examples.
* `docs`: Add `noExplicitSpreadProps` rule to `custom-rules-of-props` recipe, closes #503.
* `docs`: Migrate recipe docs to MDX format.
* `docs`: Flatten recipe docs from tabbed UI to plain markdown sections.
* `docs`: Standardize quotes in rule descriptions (#1680).
* `docs`: Standardize punctuation and phrasing in recipe docs (#1682).
* `docs`: Standardize recipe frontmatter descriptions.
* `docs(website)`: Update recipes overview page.
* `docs(website)`: Add "See Also" cross-references to recipes docs.
* `docs(website)`: Simplify rule definition example in recipes overview.
* `docs`: Remove obsolete `component-hook-factories` references from recipes.
* `docs`: Remove Roadmap section from READMEs.
* `docs`: Remove Custom Rules for Missing Rules link.
* `docs`: Add Recipes link and update install command.
* `docs`: Switch to installing `@eslint-react/kit` without rc tag.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.2.1...v4.2.2](https://github.com/Rel1cx/eslint-react/compare/v4.2.1...v4.2.2)

## v4.2.1 (2026-04-01) [#v421-2026-04-01]

This release consolidates all changes since v3.0.0.

### 💥 Breaking Changes [#-breaking-changes-4]

**New `eslint-plugin-react-jsx` package**

A new dedicated plugin for React Flavored JSX rules has been introduced. Several rules have been migrated from `eslint-plugin-react-x` and `eslint-plugin-react-dom` to this new package:

| Old Rule (`react-x/`)      | New Rule (`react-jsx/`) | Change             |
| :------------------------- | :---------------------- | :----------------- |
| `jsx-key-before-spread`    | `no-key-after-spread`   | relocated, renamed |
| `jsx-no-comment-textnodes` | `no-comment-textnodes`  | relocated, renamed |
| `no-children-prop`         | `no-children-prop`      | relocated          |
| `no-useless-fragment`      | `no-useless-fragment`   | relocated          |

| Old Rule (`react-dom/`) | New Rule (`react-jsx/`) | Change    |
| :---------------------- | :---------------------- | :-------- |
| `no-namespace`          | `no-namespace`          | relocated |

**Rule prefix changes in `@eslint-react/eslint-plugin`**

Rules from individual plugins now use a flattened naming convention when accessed through the unified `@eslint-react/eslint-plugin` package:

* `@eslint-react/<rule>` -> `@eslint-react/<rule>` (no changes)
* `@eslint-react-jsx-<rule>` -> `@eslint-react-jsx-<rule>` (no changes)
* `@eslint-react/rsc/<rule>` -> `@eslint-react/rsc-<rule>`
* `@eslint-react/dom/<rule>` -> `@eslint-react/dom-<rule>`
* `@eslint-react/web-api/<rule>` -> `@eslint-react/web-api-<rule>`
* `@eslint-react/naming-convention/<rule>` -> `@eslint-react/naming-convention-<rule>`
* `@eslint-react/debug/<rule>` -> `@eslint-react/debug-<rule>`

**Removed Rules from `eslint-plugin-react-x`**

The following rules have been removed from `eslint-plugin-react-x`:

| Rule                              | Replaced by                                                                                                  |
| :-------------------------------- | :----------------------------------------------------------------------------------------------------------- |
| `react-x/jsx-dollar`              | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |
| `react-x/jsx-shorthand-boolean`   | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |
| `react-x/jsx-shorthand-fragment`  | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |
| `react-x/unstable-rules-of-props` | [Recipes: custom-rules-of-props](/docs/recipes/custom-rules-of-props)                                        |
| `react-x/unstable-rules-of-state` | [Recipes: custom-rules-of-state](/docs/recipes/custom-rules-of-state)                                        |

**JSX utilities extracted from `@eslint-react/core` to `@eslint-react/jsx`**

The JSX module has been extracted from `@eslint-react/core` into a new standalone `@eslint-react/jsx` package. The following exports are no longer available from `@eslint-react/core`:

* `JsxInspector` class — removed, replaced with standalone utility functions from `@eslint-react/jsx` (e.g. `findAttribute`, `hasAttribute`, `getChildren`, `isElement`, `isFragmentElement`, `isHostElement`, `isJsxLike`, etc.)
* `JsxConfig`, `JsxDetectionHint`, `JsxAttributeValue` — moved to `@eslint-react/jsx`
* `getElementType` — renamed to `getElementFullType` in `@eslint-react/jsx`
* `getElementSelfName` — renamed to `getElementSelfType` in `@eslint-react/jsx`

**Removed ref APIs from `@eslint-react/core`**

The following ref-related APIs have been removed from `@eslint-react/core` without replacement:

* `isRefId`
* `isInitializedFromRef`
* `getRefInit`
* `isRefLikeName`

**Core collector API renames**

The collector APIs in `@eslint-react/core` have been renamed:

| Before                           | After                            |
| :------------------------------- | :------------------------------- |
| `useComponentCollector()`        | `getComponentCollector()`        |
| `useComponentCollectorLegacy()`  | `getComponentCollectorLegacy()`  |
| `useHookCollector()`             | `getHookCollector()`             |
| Collector return property `.ctx` | Collector return property `.api` |

**`@eslint-react/kit` API restructuring**

The `hint` API in `@eslint-react/kit` has been restructured for better namespacing:

| Before                  | After                    |
| :---------------------- | :----------------------- |
| `hint.defaultComponent` | `hint.component.Default` |

**`@eslint-react/kit` API redesign**

The `defineConfig` function has been replaced with a chainable builder API for better composability and type inference:

| Before                                    | After                                                |
| :---------------------------------------- | :--------------------------------------------------- |
| `defineConfig({ rules: [rule1, rule2] })` | `eslintReactKit().use(rule1).use(rule2).getConfig()` |

The new API provides better TypeScript intellisense and allows for more flexible rule configuration:

```ts
import eslintReactKit from "@eslint-react/kit";

export default defineConfig(
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // ... other configs
      eslintReactKit()
        .use(functionComponentDefinition)
        .use(maxComponentPerFile, { max: 1 })
        .getConfig(),
    ],
  },
);
```

* `react-jsx`: Rename `no-deoptimization` rule to `no-key-after-spread` for clearer intent (#1668).
* `kit`: Remove `files` option from `getConfig()` and normalize file extensions handling (#1669). The `files` option is no longer supported; file extensions are now automatically normalized to include both standard and TypeScript variants.

### ✨ New [#-new-21]

* New `jsx` and `disable-jsx` config presets in `@eslint-react/eslint-plugin`.
* New `react-dom-with-custom-rules` example project demonstrating custom rule creation with `@eslint-react/kit`.
* `eslint-plugin-react-jsx`: New plugin dedicated to React Flavored JSX rules. Ships with `recommended` and `strict` config presets.
* `react-jsx/no-children-prop-with-children`: New rule that disallows passing `children` as a prop when children are also passed as nested content.
* `react-jsx/no-key-after-spread`: New rule that prevents patterns causing deoptimization when using the automatic JSX runtime (e.g. placing `key` after spread props).
* `react-jsx/no-namespace`: New rule that disallows JSX namespace syntax, as React does not support them.
* `@eslint-react/jsx`: New utility package for static analysis of JSX patterns in TSESTree ASTs, extracted from `@eslint-react/core`.
* `@eslint-react/kit`: New utility module for building custom ESLint rules with React awareness. Provides a chainable `eslintReactKit().use().getConfig()` builder API and a `RuleToolkit` interface with pre-bound context helpers for component/hook analysis.
* `@eslint-react/kit`: Re-export types from `@eslint-react/shared` for better TypeScript intellisense.
* `kit`: Add `getPlugin()` API to `Builder` for fine-grained control over plugin namespace and rule severities.
* `kit`: Support more file extensions in `getConfig` defaults (`js`, `mjs`, `cjs`, `jsx`, `ts`, `mts`, `cts`, `tsx`), closes #1659.
* `kit.settings`: Expose normalized ESLint React settings via `settings` property on `RuleToolkit`.
* `docs(utilities)`: Add utilities documentation for utility modules, closes #1656.

### 🐞 Fixes [#-fixes-43]

* `purity`: Remove console methods from impurity detection, closes #1616 (#1676).
* `purity`: Treat `new Date(arg)` as pure, closes #1582 (#1677).
* `react-jsx`: Improve type safety and edge case handling for JSX rules (#1664).
* `react-x`: `component-hook-factories`: Exclude HOC patterns and test mocks from component detection, closes #1652. Thanks @zerone0x!
* `react-x`: `component-hook-factories`: Use `isComponentNameLoose` for more accurate component parameter checks.
* `react-x`: `immutability`: Exclude event handler params from props mutation check, closes #1647. Thanks @zerone0x!
* `react-x`: `no-duplicate-key`: Fix false positive for SVG `xlink` attributes.
* `react-x`: `purity`: Remove `AbortController` from impure constructors, closes #1648. Thanks @zerone0x!
* `core`: `isReactAPI`: Fix API name matching logic to use `endsWith` for precise matching.
* `core`: `isRenderMethodLike`: Support `ClassExpression` in addition to `ClassDeclaration`.
* `core`: `findImportSource`: Add cycle detection to prevent infinite recursion when resolving variable aliases.
* `ast`: Fix JSX attribute name comparison to use `isNodeEqual` instead of string comparison, properly handling `JSXNamespacedName` (e.g., `xlink:href`).
* `ast`: Update `FunctionInitPath` types to support method definitions and property arrow functions in class expressions.
* `ast`: `isNodeEqual`: Fix `JSXNamespacedName` comparison logic.
* `var`: Fix logic bugs in `compute-object-type`, `find-enclosing-assignment-target`, and `is-value-equal` utilities (#1672).
* `docs`: Update package structure documentation in contributing guide and FAQ, closes #1658.

### 🪄 Improvements [#-improvements-13]

* `react-jsx/no-children-prop`: Add suggestion-fix feature to move children from prop to element content.
* `@eslint-react/eslint-plugin`: Unified plugin architecture refactored — configs now auto-inject the plugin, so users no longer need to manually register it separately.
* `refactor(kit)`: Improve `Builder` and `RuleFunction` implementation for better type inference and code organization.
* `refactor(kit)`: Replace `defineConfig` with chainable `.use().getConfig()` builder API, closes #1644.
* `refactor(kit)`: Remove unused type parameter from `CollectorWithContext<T, E>` to `CollectorWithContext<T>`.
* `refactor(kit)`: Rename parameter `args` to `options`.
* `refactor(eff)`: Replace `getOrElse`/`getOrElseUpdate` with `getOrInsert`/`getOrInsertComputed` for better API consistency, closes #1657.
* `docs(kit)`: Add comprehensive documentation for `getConfig()` and `getPlugin()` APIs with usage examples.
* `docs(kit)`: Replace "max-component-per-file" example with "destructure-component-props" example for better practical guidance.
* `docs(website)`: Improve `configure-project-rules` documentation with clearer examples and explanations.
* `docs`: add recipes section; remove unstable-rules-of-props/state (#1679) (`01edc2f74`)
* `docs`: Update migrating-from-eslint-plugin-react.mdx with improved examples and fixes, closes #1654.
* `docs`: Add index sections to migration guides for better navigation.
* `examples/react-dom-with-custom-rules`: Expand with additional custom rules examples including `forbid-dom-props`, `jsx-fragments`, `jsx-handler-names`, `jsx-max-depth`, `jsx-no-duplicate-props`, `jsx-no-literals`, `jsx-pascal-case`, `jsx-props-no-spread-multi`, and `no-adjacent-inline-elements`, closes #1653.
* `examples/react-dom-with-custom-rules`: Add `max-component-per-file` custom rule example, closes #1437.
* `examples/react-dom-with-custom-rules`: Modularize custom rules configuration for better maintainability.
* `website`: Migrate to new Fumadocs structure and add LLM routes (`/llms.txt`, `/llms-full.txt`, `/llms.mdx`), closes #1588.
* `test`: Enhance test coverage for `react-x` and `react-dom` rules, closes #1663.
* `test`: Add comprehensive test coverage for `find-import-source`, `is-react-api`, legacy component detection, hook detection, function init path, and node equality utilities (#1671).
* `test`: Add comprehensive unit tests for `@eslint-react/var` utilities including `compute-object-type`, `find-enclosing-assignment-target`, `is-assignment-target-equal`, and `is-value-equal` (#1672).
* `deps`: Update typescript-eslint to ^8.58.0 (#1670).

### 📝 Documentation [#-documentation-57]

* **scripts:** Add comprehensive README and more automation scripts (#1673).
* `docs`: Update bug report template with upstream eslint-plugin-react-hooks guidance.
* update @eslint-react/kit installation tag from beta to rc (`2da9b4e9d`)
* update deprecated rule replacements in removed.md (`dc2fe27fb`)

### ✅ Upgrade Checklist [#-upgrade-checklist]

Use this checklist to upgrade from v3.x to v4.2.1:

#### Package changes [#package-changes]

* [ ] Install the new `eslint-plugin-react-jsx` package — this is a new dedicated plugin for React Flavored JSX rules.

#### ESLint configuration [#eslint-configuration]

* [ ] Replace `react-x/jsx-key-before-spread` with `react-jsx/no-key-after-spread` in your ESLint config.
* [ ] Replace `react-x/jsx-no-comment-textnodes` with `react-jsx/no-comment-textnodes` in your ESLint config.
* [ ] Replace `react-x/no-children-prop` with `react-jsx/no-children-prop` in your ESLint config.
* [ ] Replace `react-x/no-useless-fragment` with `react-jsx/no-useless-fragment` in your ESLint config.
* [ ] Replace `react-dom/no-namespace` with `react-jsx/no-namespace` in your ESLint config.

#### Rule prefix changes in `@eslint-react/eslint-plugin` [#rule-prefix-changes-in-eslint-reacteslint-plugin]

If you use the unified `@eslint-react/eslint-plugin` package, update the following rule prefixes (slash `\/` -> dash `-`):

* [ ] Replace `@eslint-react/rsc/<rule>` with `@eslint-react/rsc-<rule>` in your ESLint config.
* [ ] Replace `@eslint-react/dom/<rule>` with `@eslint-react/dom-<rule>` in your ESLint config.
* [ ] Replace `@eslint-react/web-api/<rule>` with `@eslint-react/web-api-<rule>` in your ESLint config.
* [ ] Replace `@eslint-react/naming-convention/<rule>` with `@eslint-react/naming-convention-<rule>` in your ESLint config.
* [ ] Replace `@eslint-react/debug/<rule>` with `@eslint-react/debug-<rule>` in your ESLint config.

#### Review new rules [#review-new-rules]

* [ ] `react-jsx/no-children-prop-with-children` — new rule that disallows passing `children` as a prop when children are also passed as nested content. Review your codebase for new reports if using presets.

#### Removed rules [#removed-rules-3]

* [ ] `react-x/jsx-dollar`
* [ ] `react-x/jsx-shorthand-boolean`
* [ ] `react-x/jsx-shorthand-fragment`
* [ ] `react-x/unstable-rules-of-props` — replaced by [Recipes: custom-rules-of-props](/docs/recipes/custom-rules-of-props)
* [ ] `react-x/unstable-rules-of-state` — replaced by [Recipes: custom-rules-of-state](/docs/recipes/custom-rules-of-state)

If you still need these rules, you can enforce them using the new `@eslint-react/kit` by creating custom rules that implement the desired checks.

#### `@eslint-react/kit` migration [#eslint-reactkit-migration]

* [ ] Replace `defineConfig({ rules: [rule1, rule2] })` with `eslintReactKit().use(rule1).use(rule2).getConfig()`.
* [ ] Replace `hint.defaultComponent` with `hint.component.Default`.
* [ ] Remove any `files` option passed to `getConfig()` — file extensions are now automatically normalized.

#### Core API changes (for custom rule authors) [#core-api-changes-for-custom-rule-authors]

* [ ] Replace `useComponentCollector()` with `getComponentCollector()`.
* [ ] Replace `useComponentCollectorLegacy()` with `getComponentCollectorLegacy()`.
* [ ] Replace `useHookCollector()` with `getHookCollector()`.
* [ ] Replace collector return property `.ctx` with `.api`.
* [ ] Replace `JsxInspector.from(context)` usage with standalone utility functions from `@eslint-react/jsx`.
* [ ] Replace `getElementType()` with `getElementFullType()` from `@eslint-react/jsx`.
* [ ] Replace `getElementSelfName()` with `getElementSelfType()` from `@eslint-react/jsx`.
* [ ] Remove usage of deleted ref APIs (`isRefId`, `isInitializedFromRef`, `getRefInit`, `isRefLikeName`).
* [ ] Update JSX-related imports from `@eslint-react/core` to `@eslint-react/jsx`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v3.0.0...v4.2.1](https://github.com/Rel1cx/eslint-react/compare/v3.0.0...v4.2.1)

## v4.2.0-beta.3 (2026-04-01) [#v420-beta3-2026-04-01]

### 🐞 Fixes [#-fixes-44]

* **purity:** treat new Date(arg) as pure, closes #1582 (#1677) (`f727b59f5`)
* **purity:** remove console methods from impurity detection, closes #1616 (#1676) (`10fe2eb0e`)

### 📝 Documentation [#-documentation-58]

* **scripts:** add comprehensive README and more automation scripts (#1673) (`dcaa5aa45`)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.2.0-beta.2...v4.2.0-beta.3](https://github.com/Rel1cx/eslint-react/compare/v4.2.0-beta.2...v4.2.0-beta.3)

## v4.2.0-beta.2 (2026-03-31) [#v420-beta2-2026-03-31]

### 🐞 Fixes [#-fixes-45]

* `var`: Fix logic bugs in `compute-object-type`, `find-enclosing-assignment-target`, and `is-value-equal` utilities (#1672).

### 🪄 Improvements [#-improvements-14]

* `test`: Add comprehensive unit tests for `@eslint-react/var` utilities including `compute-object-type`, `find-enclosing-assignment-target`, `is-assignment-target-equal`, and `is-value-equal` (#1672).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.2.0-beta.1...v4.2.0-beta.2](https://github.com/Rel1cx/eslint-react/compare/v4.2.0-beta.1...v4.2.0-beta.2)

## v4.2.0-beta.1 (2026-03-31) [#v420-beta1-2026-03-31]

### 🐞 Fixes [#-fixes-46]

* `ast`: `isNodeEqual`: Fix `JSXNamespacedName` comparison logic.

### 🪄 Improvements [#-improvements-15]

* `test`: Add comprehensive test coverage for `find-import-source`, `is-react-api`, legacy component detection, hook detection, function init path, and node equality utilities (#1671).
* `deps`: Update typescript-eslint to ^8.58.0 (#1670).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.2.0-beta.0...v4.2.0-beta.1](https://github.com/Rel1cx/eslint-react/compare/v4.2.0-beta.0...v4.2.0-beta.1)

## v4.2.0-beta.0 (2026-03-31) [#v420-beta0-2026-03-31]

### 💥 Breaking Changes [#-breaking-changes-5]

* `kit`: Remove `files` option from `getConfig()` and normalize file extensions handling (#1669). The `files` option is no longer supported; file extensions are now automatically normalized to include both standard and TypeScript variants.

### 🐞 Fixes [#-fixes-47]

* `react-x`: `component-hook-factories`: Use `isComponentNameLoose` for more accurate component parameter checks.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.1.0-beta.0...v4.2.0-beta.0](https://github.com/Rel1cx/eslint-react/compare/v4.1.0-beta.0...v4.2.0-beta.0)

## v4.1.0-beta.0 (2026-03-30) [#v410-beta0-2026-03-30]

### 💥 Breaking Changes [#-breaking-changes-6]

* `react-jsx`: Rename `no-deoptimization` rule to `no-key-after-spread` for clearer intent (#1668).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.3-beta.0...v4.1.0-beta.0](https://github.com/Rel1cx/eslint-react/compare/v4.0.3-beta.0...v4.1.0-beta.0)

## v4.0.3-beta.0 (2026-03-30) [#v403-beta0-2026-03-30]

### 🐞 Fixes [#-fixes-48]

* `react-x`: `component-hook-factories`: Exclude HOC patterns and test mocks from component detection, closes #1652. Thanks @zerone0x!
* `react-jsx`: Improve type safety and edge case handling for JSX rules (#1664).

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.6...v4.0.3-beta.0](https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.6...v4.0.3-beta.0)

## v4.0.2-beta.6 (2026-03-30) [#v402-beta6-2026-03-30]

### 🪄 Improvements [#-improvements-16]

* `test`: Enhance test coverage for `react-x` and `react-dom` rules, closes #1663.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.5...v4.0.2-beta.6](https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.5...v4.0.2-beta.6)

## v4.0.2-beta.5 (2026-03-30) [#v402-beta5-2026-03-30]

> **Note**: `v4.0.2-beta.4` was skipped.

### 🐞 Fixes [#-fixes-49]

* `core`: `findImportSource`: Add cycle detection to prevent infinite recursion when resolving variable aliases.
* `core`: `isReactAPI`: Fix API name matching logic to use `endsWith` for precise matching.
* `core`: `isRenderMethodLike`: Support `ClassExpression` in addition to `ClassDeclaration`.
* `ast`: Fix JSX attribute name comparison to use `isNodeEqual` instead of string comparison, properly handling `JSXNamespacedName` (e.g., `xlink:href`).
* `ast`: Update `FunctionInitPath` types to support method definitions and property arrow functions in class expressions.
* `react-x`: `no-duplicate-key`: Fix false positive for SVG `xlink` attributes.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.3...v4.0.2-beta.5](https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.3...v4.0.2-beta.5)

## v4.0.2-beta.3 (2026-03-29) [#v402-beta3-2026-03-29]

### ✨ New [#-new-22]

* `kit`: Support more file extensions in `getConfig` defaults (`js`, `mjs`, `cjs`, `jsx`, `ts`, `mts`, `cts`, `tsx`), closes #1659.

### 🐞 Fixes [#-fixes-50]

* `docs`: Update package structure documentation in contributing guide and FAQ, closes #1658.

### 🪄 Improvements [#-improvements-17]

* `refactor(eff)`: Replace `getOrElse`/`getOrElseUpdate` with `getOrInsert`/`getOrInsertComputed` for better API consistency, closes #1657.
* `refactor(kit)`: Rename parameter `args` to `options`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.2...v4.0.2-beta.3](https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.2...v4.0.2-beta.3)

## v4.0.2-beta.2 (2026-03-28) [#v402-beta2-2026-03-28]

### ✨ New [#-new-23]

* `docs(utilities)`: Add utilities documentation for utility modules, closes #1656.

### 🪄 Improvements [#-improvements-18]

* `examples(react-dom-with-custom-rules)`: Expand with additional custom rules examples including `forbid-dom-props`, `jsx-fragments`, `jsx-handler-names`, `jsx-max-depth`, `jsx-no-duplicate-props`, `jsx-no-literals`, `jsx-pascal-case`, `jsx-props-no-spread-multi`, and `no-adjacent-inline-elements`, closes #1653.
* `docs`: Update migrating-from-eslint-plugin-react.mdx with improved examples and fixes, closes #1654.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.1...v4.0.2-beta.2](https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.1...v4.0.2-beta.2)

## v4.0.2-beta.1 (2026-03-28) [#v402-beta1-2026-03-28]

### 🐞 Fixes [#-fixes-51]

* `react-x`: `immutability`: Exclude event handler params from props mutation check, closes #1647. Thanks @zerone0x!
* `react-x`: `purity`: Remove `AbortController` from impure constructors, closes #1648. Thanks @zerone0x!

### 🪄 Improvements [#-improvements-19]

* `docs`: Update bug report template with upstream eslint-plugin-react-hooks guidance.
* `examples/react-dom-with-custom-rules`: Update custom rules example.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.0...v4.0.2-beta.1](https://github.com/Rel1cx/eslint-react/compare/v4.0.2-beta.0...v4.0.2-beta.1)

## v4.0.2-beta.0 (2026-03-28) [#v402-beta0-2026-03-28]

### ✨ New [#-new-24]

* `kit`: Add `getPlugin()` API to `Builder` for fine-grained control over plugin namespace and rule severities.
* `examples/react-dom-with-custom-rules`: Add `require-react-19` custom rule example demonstrating settings usage.

### 🪄 Improvements [#-improvements-20]

* `kit`: `getConfig()` now accepts optional `{ files?: string[] }` argument for more flexible configuration.
* `docs(kit)`: Add comprehensive documentation for `getConfig()` and `getPlugin()` APIs with usage examples.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.1-beta.1...v4.0.2-beta.0](https://github.com/Rel1cx/eslint-react/compare/v4.0.1-beta.1...v4.0.2-beta.0)

## v4.0.1-beta.1 (2026-03-28) [#v401-beta1-2026-03-28]

### 🪄 Improvements [#-improvements-21]

* `refactor(kit)`: Improve `Builder` and `RuleFunction` implementation for better type inference and code organization.
* `docs(website)`: Improve `configure-project-rules` documentation with clearer examples and explanations.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.1-beta.0...v4.0.1-beta.1](https://github.com/Rel1cx/eslint-react/compare/v4.0.1-beta.0...v4.0.1-beta.1)

## v4.0.1-beta.0 (2026-03-27) [#v401-beta0-2026-03-27]

### 💥 Breaking Changes [#-breaking-changes-7]

**`@eslint-react/kit` API redesign**

The `defineConfig` function has been replaced with a chainable builder API for better composability and type inference:

| Before                                    | After                                                |
| :---------------------------------------- | :--------------------------------------------------- |
| `defineConfig({ rules: [rule1, rule2] })` | `eslintReactKit().use(rule1).use(rule2).getConfig()` |

The new API provides better TypeScript intellisense and allows for more flexible rule configuration:

```ts
import eslintReactKit from "@eslint-react/kit";

export default defineConfig(
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // ... other configs
      eslintReactKit()
        .use(functionComponentDefinition)
        .use(maxComponentPerFile, { max: 1 })
        .getConfig(),
    ],
  },
);
```

### 🪄 Improvements [#-improvements-22]

* `refactor(kit)`: Replace `defineConfig` with chainable `.use().getConfig()` builder API, closes #1644.
* `refactor(website)`: Cleanup and organize code.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.0-beta.3...v4.0.1-beta.0](https://github.com/Rel1cx/eslint-react/compare/v4.0.0-beta.3...v4.0.1-beta.0)

## v4.0.0-beta.3 (2026-03-27) [#v400-beta3-2026-03-27]

### ✨ New [#-new-25]

* `@eslint-react/kit`: Re-export types from `@eslint-react/shared` for better TypeScript intellisense.

### 🪄 Improvements [#-improvements-23]

* `examples/react-dom-with-custom-rules`: Add `max-component-per-file` custom rule example, closes #1437.
* `examples/react-dom-with-custom-rules`: Modularize custom rules configuration for better maintainability.
* `website`: Migrate to new Fumadocs structure and add LLM routes (`/llms.txt`, `/llms-full.txt`, `/llms.mdx`), closes #1588.
* `docs`: Add index sections to migration guides for better navigation.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.0-beta.2...v4.0.0-beta.3](https://github.com/Rel1cx/eslint-react/compare/v4.0.0-beta.2...v4.0.0-beta.3)

## v4.0.0-beta.2 (2026-03-25) [#v400-beta2-2026-03-25]

### ✨ New [#-new-26]

* `kit.settings`: Expose normalized ESLint React settings via `settings` property on `RuleToolkit`.

### 🐞 Fixes [#-fixes-52]

* `website`: Mark `function-component-definition` rule as `🔧` (fixable) in migration guide.

### 🪄 Improvements [#-improvements-24]

* `refactor(kit)`: Remove unused type parameter from `CollectorWithContext<T, E>` to `CollectorWithContext<T>`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.0-beta.1...v4.0.0-beta.2](https://github.com/Rel1cx/eslint-react/compare/v4.0.0-beta.1...v4.0.0-beta.2)

## v4.0.0-beta.1 (2026-03-25) [#v400-beta1-2026-03-25]

### 💥 Breaking Changes [#-breaking-changes-8]

**`@eslint-react/kit` API restructuring**

The `hint` API in `@eslint-react/kit` has been restructured for better namespacing:

| Before                  | After                    |
| :---------------------- | :----------------------- |
| `hint.defaultComponent` | `hint.component.Default` |

### 🐞 Fixes [#-fixes-53]

* `docs(kit)`: Fix `defineConfig` import statement in README examples.
* `docs(kit)`: Update example to use `hint.component.Default` instead of `hint.defaultComponent`.

### 🪄 Improvements [#-improvements-25]

* `docs(kit)`: Replace "max-component-per-file" example with "destructure-component-props" example for better practical guidance.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v4.0.0-beta.0...v4.0.0-beta.1](https://github.com/Rel1cx/eslint-react/compare/v4.0.0-beta.0...v4.0.0-beta.1)

## v4.0.0-beta.0 (2026-03-24) [#v400-beta0-2026-03-24]

### 💥 Breaking Changes [#-breaking-changes-9]

**New `eslint-plugin-react-jsx` package**

A new dedicated plugin for React Flavored JSX rules has been introduced. Several rules have been migrated from `eslint-plugin-react-x` and `eslint-plugin-react-dom` to this new package:

| Old Rule (`react-x/`)      | New Rule (`react-jsx/`) | Change             |
| :------------------------- | :---------------------- | :----------------- |
| `jsx-key-before-spread`    | `no-key-after-spread`   | relocated, renamed |
| `jsx-no-comment-textnodes` | `no-comment-textnodes`  | relocated, renamed |
| `no-children-prop`         | `no-children-prop`      | relocated          |
| `no-useless-fragment`      | `no-useless-fragment`   | relocated          |

| Old Rule (`react-dom/`) | New Rule (`react-jsx/`) | Change    |
| :---------------------- | :---------------------- | :-------- |
| `no-namespace`          | `no-namespace`          | relocated |

**Rule prefix changes in `@eslint-react/eslint-plugin`**

Rules from individual plugins now use a flattened naming convention when accessed through the unified `@eslint-react/eslint-plugin` package:

* `@eslint-react/<rule>` -> `@eslint-react/<rule>` (no changes)
* `@eslint-react-jsx-<rule>` -> `@eslint-react-jsx-<rule>` (no changes)
* `@eslint-react/rsc/<rule>` -> `@eslint-react/rsc-<rule>`
* `@eslint-react/dom/<rule>` -> `@eslint-react/dom-<rule>`
* `@eslint-react/web-api/<rule>` -> `@eslint-react/web-api-<rule>`
* `@eslint-react/naming-convention/<rule>` -> `@eslint-react/naming-convention-<rule>`
* `@eslint-react/debug/<rule>` -> `@eslint-react/debug-<rule>`

**Removed Rules from `eslint-plugin-react-x`**

The following rules have been removed from `eslint-plugin-react-x`:

| Rule                             | Replaced by                                                                                                  |
| :------------------------------- | :----------------------------------------------------------------------------------------------------------- |
| `react-x/jsx-dollar`             | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |
| `react-x/jsx-shorthand-boolean`  | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |
| `react-x/jsx-shorthand-fragment` | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |

**JSX utilities extracted from `@eslint-react/core` to `@eslint-react/jsx`**

The JSX module has been extracted from `@eslint-react/core` into a new standalone `@eslint-react/jsx` package. The following exports are no longer available from `@eslint-react/core`:

* `JsxInspector` class — removed, replaced with standalone utility functions from `@eslint-react/jsx` (e.g. `findAttribute`, `hasAttribute`, `getChildren`, `isElement`, `isFragmentElement`, `isHostElement`, `isJsxLike`, etc.)
* `JsxConfig`, `JsxDetectionHint`, `JsxAttributeValue` — moved to `@eslint-react/jsx`
* `getElementType` — renamed to `getElementFullType` in `@eslint-react/jsx`
* `getElementSelfName` — renamed to `getElementSelfType` in `@eslint-react/jsx`

**Removed ref APIs from `@eslint-react/core`**

The following ref-related APIs have been removed from `@eslint-react/core` without replacement:

* `isRefId`
* `isInitializedFromRef`
* `getRefInit`
* `isRefLikeName`

**Core collector API renames**

The collector APIs in `@eslint-react/core` have been renamed:

| Before                           | After                            |
| :------------------------------- | :------------------------------- |
| `useComponentCollector()`        | `getComponentCollector()`        |
| `useComponentCollectorLegacy()`  | `getComponentCollectorLegacy()`  |
| `useHookCollector()`             | `getHookCollector()`             |
| Collector return property `.ctx` | Collector return property `.api` |

### ✨ New [#-new-27]

* `@eslint-react/kit`: New utility module for building custom ESLint rules with React awareness. Provides `defineConfig()`, `merge()`, and a `RuleToolkit` interface with pre-bound context helpers for component/hook analysis.
* `@eslint-react/jsx`: New utility package for static analysis of JSX patterns in TSESTree ASTs, extracted from `@eslint-react/core`.
* `eslint-plugin-react-jsx`: New plugin dedicated to React Flavored JSX rules. Ships with `recommended` and `strict` config presets.
* `react-jsx/no-namespace`: New rule that disallows JSX namespace syntax, as React does not support them.
* `react-jsx/no-key-after-spread`: New rule that prevents patterns causing deoptimization when using the automatic JSX runtime (e.g. placing `key` after spread props).
* `react-jsx/no-children-prop-with-children`: New rule that disallows passing `children` as a prop when children are also passed as nested content.
* New `jsx` and `disable-jsx` config presets in `@eslint-react/eslint-plugin`.
* New `react-dom-with-custom-rules` example project demonstrating custom rule creation with `@eslint-react/kit`.

### 🪄 Improvements [#-improvements-26]

* `react-jsx/no-children-prop`: Add suggestion-fix feature to move children from prop to element content.
* `@eslint-react/eslint-plugin`: Unified plugin architecture refactored — configs now auto-inject the plugin, so users no longer need to manually register it separately.

### ✅ Upgrade Checklist [#-upgrade-checklist-1]

Use this checklist to upgrade from v3.x to v4.0.0:

#### Package changes [#package-changes-1]

* [ ] Install the new `eslint-plugin-react-jsx` package — this is a new dedicated plugin for React Flavored JSX rules.
* [ ] If you depend on JSX utilities from `@eslint-react/core`, install `@eslint-react/jsx` and update imports accordingly.

#### ESLint configuration [#eslint-configuration-1]

* [ ] Replace `react-x/jsx-key-before-spread` with `react-jsx/no-key-after-spread` in your ESLint config.
* [ ] Replace `react-x/jsx-no-comment-textnodes` with `react-jsx/no-comment-textnodes` in your ESLint config.
* [ ] Replace `react-x/no-children-prop` with `react-jsx/no-children-prop` in your ESLint config.
* [ ] Replace `react-x/no-useless-fragment` with `react-jsx/no-useless-fragment` in your ESLint config.
* [ ] Replace `react-dom/no-namespace` with `react-jsx/no-namespace` in your ESLint config.

#### Rule prefix changes in `@eslint-react/eslint-plugin` [#rule-prefix-changes-in-eslint-reacteslint-plugin-1]

If you use the unified `@eslint-react/eslint-plugin` package, update the following rule prefixes (slash `\/` -> dash `-`):

* [ ] Replace `@eslint-react/rsc/<rule>` with `@eslint-react/rsc-<rule>` in your ESLint config.
* [ ] Replace `@eslint-react/dom/<rule>` with `@eslint-react/dom-<rule>` in your ESLint config.
* [ ] Replace `@eslint-react/web-api/<rule>` with `@eslint-react/web-api-<rule>` in your ESLint config.
* [ ] Replace `@eslint-react/naming-convention/<rule>` with `@eslint-react/naming-convention-<rule>` in your ESLint config.
* [ ] Replace `@eslint-react/debug/<rule>` with `@eslint-react/debug-<rule>` in your ESLint config.

#### Review new rules [#review-new-rules-1]

* [ ] `react-jsx/no-children-prop-with-children` — new rule that disallows passing `children` as a prop when children are also passed as nested content. Review your codebase for new reports if using presets.

#### Removed rules [#removed-rules-4]

* [ ] `react-x/jsx-dollar`
* [ ] `react-x/jsx-shorthand-boolean`
* [ ] `react-x/jsx-shorthand-fragment`

If you still need these rules, you can enforce them using the new `@eslint-react/kit` by creating custom rules that implement the desired checks.

#### Core API changes (for custom rule authors) [#core-api-changes-for-custom-rule-authors-1]

* [ ] Replace `useComponentCollector()` with `getComponentCollector()`.
* [ ] Replace `useComponentCollectorLegacy()` with `getComponentCollectorLegacy()`.
* [ ] Replace `useHookCollector()` with `getHookCollector()`.
* [ ] Replace collector return property `.ctx` with `.api`.
* [ ] Replace `JsxInspector.from(context)` usage with standalone utility functions from `@eslint-react/jsx`.
* [ ] Replace `getElementType()` with `getElementFullType()` from `@eslint-react/jsx`.
* [ ] Replace `getElementSelfName()` with `getElementSelfType()` from `@eslint-react/jsx`.
* [ ] Remove usage of deleted ref APIs (`isRefId`, `isInitializedFromRef`, `getRefInit`, `isRefLikeName`).
* [ ] Update JSX-related imports from `@eslint-react/core` to `@eslint-react/jsx`.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v3.0.0...v4.0.0-beta.0](https://github.com/Rel1cx/eslint-react/compare/v3.0.0...v4.0.0-beta.0)

## v3.0.0 (2026-03-16) [#v300-2026-03-16]

### 🧹 Chores [#-chores]

* Version Packages.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.5...v3.0.0](https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.5...v3.0.0)

## v3.0.0-rc.5 (2026-03-16) [#v300-rc5-2026-03-16]

### 🐞 Fixes [#-fixes-54]

* `react-web-api/no-leaked-event-listener`: Recognize function parameter as valid signal. Closes #1622. (#1623)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.4...v3.0.0-rc.5](https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.4...v3.0.0-rc.5)

## v3.0.0-rc.4 (2026-03-14) [#v300-rc4-2026-03-14]

### 🪄 Improvements [#-improvements-27]

* Update README badge links.

### 🧹 Chores [#-chores-1]

* Bump fumadocs, eslint-plugin-fast-import, and @vitejs/plugin-react.
* Pin typescript-eslint to stable version ^8.57.0.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.3...v3.0.0-rc.4](https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.3...v3.0.0-rc.4)

## v3.0.0-rc.3 (2026-03-13) [#v300-rc3-2026-03-13]

### 🐞 Fixes [#-fixes-55]

* `react-x/error-boundaries`: Fixed false positive by skipping non-JSX-like values in error boundary detection. (#1615)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.2...v3.0.0-rc.3](https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.2...v3.0.0-rc.3)

## v3.0.0-rc.2 (2026-03-13) [#v300-rc2-2026-03-13]

### ✨ New [#-new-28]

* `react-x/prefer-set-state-callback`: New rule that enforces using callback form of `setState` when the new state is computed from the previous state. Closes #1289. (#1610, #1613)
* `react-x/unstable-rules-of-state`: New experimental rule that consolidates state-related validations including `prefer-set-state-callback`. (#1613)

### 🐞 Fixes [#-fixes-56]

* `react-x/use-memo`: Fixed false positive in arrow functions. Fixes #1611. (#1612)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.1...v3.0.0-rc.2](https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.1...v3.0.0-rc.2)

## v3.0.0-rc.1 (2026-03-12) [#v300-rc1-2026-03-12]

### ✨ New [#-new-29]

* `unstable-rules-of-props`: Implement `noDuplicateProps` check — the rule now detects duplicate props on JSX elements. Closes #1605. (#1608)

### 🪄 Improvements [#-improvements-28]

* Added `inlinedDependencies` metadata to packages.
* Extended nested expression traversal to handle more AST node types. (#1609)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.0...v3.0.0-rc.1](https://github.com/Rel1cx/eslint-react/compare/v3.0.0-rc.0...v3.0.0-rc.1)

## v3.0.0-rc.0 (2026-03-08) [#v300-rc0-2026-03-08]

> This entry consolidates all changes from v2.13.0 (2026-02-15) through v3.0.0-rc.0 (2026-03-08).

### 💥 Breaking Changes [#-breaking-changes-10]

**Minimum Node.js version raised from 20 to 22**

The minimum required Node.js version is now `>=22.0.0` (previously `>=20.19.0`).

**Consolidated and removed rules in `eslint-plugin-react-x`**

| Old Rule (`react-x/`)                  | New Rule (`react-x/`) | Change       |
| :------------------------------------- | :-------------------- | :----------- |
| `jsx-no-duplicate-props`               | —                     | removed      |
| `jsx-no-iife`                          | `unsupported-syntax`  | consolidated |
| `jsx-no-undef`                         | —                     | removed      |
| `jsx-uses-react`                       | —                     | removed      |
| `jsx-uses-vars`                        | —                     | removed      |
| `no-unnecessary-key`                   | —                     | removed      |
| `no-useless-forward-ref`               | `no-forward-ref`      | consolidated |
| `prefer-read-only-props`               | `immutability`        | consolidated |
| `prefer-use-state-lazy-initialization` | `use-state`           | consolidated |

* `jsx-no-duplicate-props`: Removed. LSP and Language Features natively report duplicate JSX props, making this rule redundant.
* `jsx-no-iife`: The IIFE-in-JSX check has been merged into the new `unsupported-syntax` rule, which also covers `eval` and `with` statements.
* `jsx-no-undef`: ESLint v10.0.0 now tracks JSX references natively, making this rule redundant. The `no-undef` rule now correctly handles JSX element references.
* `jsx-uses-react` and `jsx-uses-vars`: These rules were only necessary for older versions of React that required the `React` namespace in scope for JSX. Since React 17, this is no longer required, and ESLint v10.0.0's native variable tracking handles this correctly.
* `no-unnecessary-key`: The experimental rule has been removed.
* `no-useless-forward-ref`: Consolidated into `no-forward-ref`. Since React 19, `forwardRef` is no longer necessary as `ref` can be passed as a prop. The `no-forward-ref` rule now covers all `forwardRef` usage patterns.
* `prefer-read-only-props`: The TypeScript-based read-only props enforcement has been consolidated into the new `immutability` rule, which covers a broader set of immutability violations, including in-place array mutations and direct property assignments on state and props.
* `prefer-use-state-lazy-initialization`: Its lazy-initialization checks are now part of the `use-state` rule and controlled by the new `enforceLazyInitialization` option (default: `true`).

**Removed previously deprecated rules**

| Rule                     | Deprecated in | Package                                 | Replacement                                                                         |
| :----------------------- | :------------ | :-------------------------------------- | :---------------------------------------------------------------------------------- |
| `filename-extension`     | 2.13.0        | `eslint-plugin-react-naming-convention` |                                                                                     |
| `filename`               | 2.13.0        | `eslint-plugin-react-naming-convention` |                                                                                     |
| `no-default-props`       | 2.9.3         | `eslint-plugin-react-x`                 | [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax) |
| `no-forbidden-props`     | 2.3.2         | `eslint-plugin-react-x`                 | [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax) |
| `no-prop-types`          | 2.9.3         | `eslint-plugin-react-x`                 | [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax) |
| `no-string-refs`         | 2.9.3         | `eslint-plugin-react-x`                 | [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax) |
| `no-unnecessary-use-ref` | 2.10.0        | `eslint-plugin-react-x`                 |                                                                                     |

**Removed `eslint-plugin-react-hooks-extra` package**

All rules have been migrated into `eslint-plugin-react-x`:

| Old Rule (`react-hooks-extra/`)     | New Rule (`react-x/`) | Change             |
| :---------------------------------- | :-------------------- | :----------------- |
| `no-direct-set-state-in-use-effect` | `set-state-in-effect` | relocated, renamed |

**Removed `naming-convention/component-name` rule** (#1557)

**Removed unneeded APIs from `@eslint-react/core`** (#1556)

**Restructured packages and removed deprecated rules for ESLint v10+** (#1592)

**Preset changes**

| Change  | Rule                                                       | Presets affected                                        | Severity / Notes                                              |
| :------ | :--------------------------------------------------------- | :------------------------------------------------------ | :------------------------------------------------------------ |
| Added   | `react-x/component-hook-factories`                         | `recommended`, `x`                                      | `error`                                                       |
| Added   | `react-x/error-boundaries`                                 | `recommended`, `x`                                      | `error`                                                       |
| Added   | `react-x/exhaustive-deps`                                  | `recommended`, `x`                                      | `warn`                                                        |
| Added   | `react-x/immutability`                                     | `all`                                                   | `error`                                                       |
| Added   | `react-x/no-unused-class-component-members`                | `recommended`, `x`                                      | `warn`                                                        |
| Added   | `react-x/purity`                                           | `recommended`, `x`                                      | `warn`                                                        |
| Added   | `react-x/refs`                                             | `all`                                                   | `error`                                                       |
| Added   | `react-x/rules-of-hooks`                                   | `recommended`, `x`                                      | `error`                                                       |
| Added   | `react-x/set-state-in-effect`                              | `recommended`, `x`                                      | `warn`                                                        |
| Added   | `react-x/set-state-in-render`                              | `recommended`, `x`                                      | `error`                                                       |
| Added   | `react-x/unsupported-syntax`                               | `recommended`, `x`                                      | `error`                                                       |
| Added   | `react-x/use-memo`                                         | `recommended`, `x`                                      | `error`                                                       |
| Moved   | `react-naming-convention/use-state` -> `react-x/use-state` | `recommended`, `x`                                      | `warn`                                                        |
| Removed | `@eslint-react/hooks-extra/*`                              | `recommended`, `all` (in `@eslint-react/eslint-plugin`) | removed                                                       |
| Removed | `react-naming-convention/component-name`                   | `all`                                                   | removed                                                       |
| Removed | `react-naming-convention/use-state`                        | `all`                                                   | moved to `react-x/use-state`                                  |
| Removed | `react-x/jsx-no-duplicate-props`                           | `recommended`, `x`, `all`                               | LSP and Language Features natively report duplicate JSX props |
| Removed | `react-x/jsx-no-iife`                                      | `strict`, `disable-experimental`, `all`                 | merged into `unsupported-syntax`                              |
| Removed | `react-x/jsx-no-undef`                                     | `all`                                                   | ESLint v10.0.0+ native support                                |
| Removed | `react-x/jsx-uses-react`                                   | `recommended`, `x`, `all`                               | ESLint v10.0.0+ native support                                |
| Removed | `react-x/jsx-uses-vars`                                    | `recommended`, `x`, `all`                               | ESLint v10.0.0+ native support                                |
| Removed | `react-x/no-default-props`                                 | `recommended`, `x`                                      | removed                                                       |
| Removed | `react-x/no-prop-types`                                    | `recommended`, `x`                                      | removed                                                       |
| Removed | `react-x/no-string-refs`                                   | `recommended`, `x`                                      | removed                                                       |
| Removed | `react-x/no-unnecessary-key`                               | `all`                                                   | removed                                                       |
| Removed | `react-x/no-useless-forward-ref`                           | `recommended`, `x`, `all`                               | merged into `no-forward-ref`                                  |
| Removed | `react-x/prefer-read-only-props`                           | `disable-experimental`, `disable-type-checked`          | consolidated into `immutability`                              |
| Removed | `react-x/prefer-use-state-lazy-initialization`             | `recommended`, `x`, `all`                               | merged into `use-state`                                       |

### ✨ New [#-new-30]

**Added the following new rules to `eslint-plugin-react-x`:**

* `component-hook-factories`: Validates against higher-order functions defining nested components or hooks. Components and hooks should be defined at the module level.
* `error-boundaries`: Validates usage of Error Boundaries instead of try/catch for errors in child components. Try/catch blocks can't catch errors during React's rendering process — only [Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) can catch these errors. (#1506)
* `exhaustive-deps`: Enforces that React hook dependency arrays contain all reactive values used in the callback. (#1499)
* `immutability` (Experimental): Validates against mutating props, state, and other values that are immutable. Detects in-place array mutations (ex: `push`, `sort`, `splice`) and direct property assignments on state variables from `useState` and props objects. Mirrors the [`immutability`](https://react.dev/reference/eslint-plugin-react-hooks/lints/immutability) lint rule described in the React docs.
* `no-implicit-children` and `no-implicit-ref`: New rules added in beta.75. (#1594)
* `no-mixing-controlled-and-uncontrolled` -> `unstable-rules-of-props`: Validates against mixing controlled and uncontrolled prop patterns. (#486, #1571)
* `purity` (Experimental): Validates that components and hooks are pure by checking that they do not call known-impure functions during render.
* `refs` (Experimental): Validates correct usage of refs by checking that `ref.current` is not read or written during render. See the ["pitfalls" section in `useRef()`](https://react.dev/reference/react/useRef#caveats).
* `rules-of-hooks`: Enforces the [Rules of Hooks](https://react.dev/reference/rules/rules-of-react#rules-of-hooks). (#1499)
* `set-state-in-effect`: Validates against calling [`setState`](https://react.dev/reference/react/useState#setstate) synchronously in an effect, which can lead to re-renders that degrade performance.
  > Compared to the old `no-direct-set-state-in-use-effect` rule, the following example from the [React Docs](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) demonstrates that `setState` in an effect is fine if the value comes from a ref, since it cannot be calculated during rendering:
  >
  > ```tsx
  > import { useLayoutEffect, useRef, useState } from "react";
  >
  > function Tooltip() {
  >   const ref = useRef(null);
  >   const [tooltipHeight, setTooltipHeight] = useState(0);
  >
  >   useLayoutEffect(() => {
  >     const { height } = ref.current.getBoundingClientRect();
  >     setTooltipHeight(height);
  >   }, []);
  >   // ...
  > }
  > ```
* `set-state-in-render` (Experimental): Validates against unconditionally setting state during render, which can trigger additional renders and potential infinite render loops. (#1501)
* `unsupported-syntax`: Validates against syntax that React Compiler does not support, including `eval`, `with` statements, and IIFEs in JSX (previously covered by `jsx-no-iife`).
* `use-memo`: Validates that `useMemo` is called with a callback that returns a value. `useMemo` is designed for computing and caching values — without a return value it always returns `undefined`, which defeats its purpose. This rule also catches `useMemo` calls whose return value is discarded (not assigned to a variable), which indicates a side-effect misuse that should use `useEffect` instead.
* `use-state`: Enforces correct usage of the `useState` hook — destructuring, symmetric naming of the value and setter (ex: `count` / `setCount`), and lazy initialization of expensive initial state. Moved from `eslint-plugin-react-naming-convention` into `eslint-plugin-react-x`. The lazy-initialization behavior (previously `prefer-use-state-lazy-initialization`) is controlled by the `enforceLazyInitialization` option (default: `true`).

**Added `compilationMode` setting:**

Added support for the `compilationMode` setting under `settings["react-x"]`. This setting informs rules about the [React Compiler](https://react.dev/learn/react-compiler) compilation mode the project is using, allowing rules to understand how components and hooks will be optimized by the compiler.

**Added `disable-conflict-eslint-plugin-react-hooks` configuration** to `@eslint-react/eslint-plugin` for easier migration from `eslint-plugin-react-hooks`.

**Added `unstable-rules-of-props` support for generic foo/defaultFoo prop pairs** (#1580)

### 🐞 Fixes [#-fixes-57]

* Enable `immutability` rule in the `all` configuration preset
* Fix MDX documentation formatting issues (#1559)
* Fix TS type expressions handling in rules, closes #1583 (#1584)
* Fix `no-forward-ref`: do not add ref param when type arguments are mismatched (#1561)
* Fix `no-forward-ref`: handle callback with no params (#1560)
* Fix `no-unused-props` false positive for anonymous callbacks passed to call expressions (#1602)
* Fix `no-unused-props` false positive when using Omit on union props type (#1578)
* Fix `no-useless-fragment` false positive when passing a `ref` to a `Fragment`, closes #1567 (#1568)
* Fix additional `useState` names should only match patterns configured in `additionalStateHooks` (#1601)
* Fix object type compute on `Boolean()` like calls, closes #1587 (#1591)
* Fix the migration guide link 404 in the FAQ, closes #1589 (#1590)
* Fix traverse type expressions in component id, init path, and wrapper (#1603)
  ex: components using `satisfies` were previously not detected:
  ```tsx
  // previously missed — now correctly identified as a component
  const App = (() => <div />) satisfies React.FC;
  ```

### 🪄 Improvements [#-improvements-29]

* Adopted `tsl` for type checking across the monorepo, improving linting performance (#1532)
* Apply `additionalStateHooks` and `additionalEffectHooks` to more rules (#1597)
* Bump ESLint to 10.0.3
* Bump dependencies and update workflows
* Bump tsdown target to Node 22
* Changed the following rules from `problem` to `suggestion` type for better categorization:
  * `react-x/jsx-dollar`
  * `react-x/jsx-shorthand-boolean`
  * `react-x/jsx-shorthand-fragment`
  * `react-x/no-array-index-key`
  * `react-x/no-children-count`
  * `react-x/no-children-for-each`
  * `react-x/no-children-map`
  * `react-x/no-children-only`
  * `react-x/no-children-prop`
  * `react-x/no-children-to-array`
  * `react-x/no-class-component`
  * `react-x/no-clone-element`
  * `react-x/no-create-ref`
  * `react-x/no-missing-component-display-name`
  * `react-x/no-missing-context-display-name`
  * `react-x/no-unnecessary-use-callback`
  * `react-x/no-unnecessary-use-memo`
  * `react-x/no-unused-class-component-members`
  * `react-x/no-unused-props`
  * `react-x/no-unused-state`
  * `react-x/no-useless-fragment`
  * `react-x/prefer-namespace-import`
  * `react-dom/prefer-namespace-import`
* Converted React 19 migration rules from auto-fix to suggestions (`no-context-provider`, `no-forward-ref`, `no-use-context`) to prevent automatic code modifications that could break existing code
* Enhanced `purity` rule with TypeScript type expression support for more accurate detection of impure constructs
* Improved `resolve` function with comprehensive definition types (#1576)
* Improved `set-state-in-effect` rule to allow `setState` calls when the new state is derived from refs (aligning with React's recommended patterns) (#1521)
* Improved detection of React components created via conditional (ternary) expressions in the `function-component` and `no-nested-component-definitions` rules (#1503)
* Inlined `getChildScopes`, `getVariableInitializer` and cleaned up var utilities (#1562, #1572)
* Moved `@local/eff` to `devDependencies` across workspace (#1596)
* Moved `disable-conflict-*` configs to `eslint-plugin-react-x` (#1577)
* Ported `eslint-plugin-react-hooks` rules (`rules-of-hooks` and `exhaustive-deps`) *verbatim* with code-path analysis for more accurate hook validation (#1535)
* Refactored core modules to use the `defineRuleListener` helper for more consistent rule listener definitions (#1517)
* Refactored refs rule (#1563)
* Refined JSX attribute value extraction (#1579)
* Removed React 19 version restriction from `context-name` rule (#1558)
* Removed config adapters and fixed plugin default export types, closes #1564 (#1565)
* Replaced jsx submodule functional APIs with `JsxInspector` class (#1585)
* Restructured and consolidated component-detection modules for better maintainability and accuracy
* Restructured core, var, and ast utility modules for improved code organization (#1520)
* Standardized rule docs and unified MDX heading structure (#1555)
* Updated documentation with standardized "See Also" and "Further Reading" sections (#1536, #1537)

### ✅ Upgrade Checklist [#-upgrade-checklist-2]

Use this checklist to upgrade from v2.x to v3.0.0:

#### Node.js [#nodejs]

* [ ] Upgrade Node.js to `>=22.0.0` (previously `>=20.19.0`).

#### Package changes [#package-changes-2]

* [ ] Remove `eslint-plugin-react-hooks-extra` from your `package.json` — this package is no longer published.
* [ ] If you were importing `eslint-plugin-react-hooks-extra` directly, replace it with `eslint-plugin-react-x`.

#### ESLint configuration [#eslint-configuration-2]

* [ ] Remove `@eslint-react/hooks-extra/*` rules from your config — these have been removed from `@eslint-react/eslint-plugin`.
* [ ] Replace `react-hooks-extra/no-direct-set-state-in-use-effect` with `react-x/set-state-in-effect` in your ESLint config.
* [ ] Replace `react-naming-convention/use-state` (or `@eslint-react/naming-convention-use-state`) with `react-x/use-state` (or `@eslint-react/use-state`) in your ESLint config.
* [ ] Remove references to the following deleted rules (use [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax) instead if needed):
  * `react-x/no-default-props`
  * `react-x/no-forbidden-props`
  * `react-x/no-prop-types`
  * `react-x/no-string-refs`
* [ ] Remove `react-x/jsx-no-duplicate-props` from your config if present — this rule has been removed since LSP and Language Features natively report duplicate JSX props.
* [ ] Remove `react-x/jsx-no-undef` from your config if present — this rule has been removed since ESLint v10.0.0 now tracks JSX references natively.
* [ ] Remove `react-x/jsx-uses-react` and `react-x/jsx-uses-vars` from your config if present — these rules have been removed since ESLint v10.0.0 now handles JSX variable tracking natively.
* [ ] Remove `react-x/no-unnecessary-key` from your config if present — this rule has been deleted with no replacement.
* [ ] Remove `react-x/no-unnecessary-use-ref` from your config if present — this rule has been deleted with no replacement.
* [ ] Remove `react-x/jsx-no-iife` from your config if present — this rule has been consolidated into `react-x/unsupported-syntax`.
* [ ] Remove `react-x/no-useless-forward-ref` from your config if present — this rule has been consolidated into `react-x/no-forward-ref`.
* [ ] Remove `react-x/prefer-read-only-props` from your config if present — this rule has been consolidated into `react-x/immutability`.
* [ ] Remove `react-x/prefer-use-state-lazy-initialization` from your config if present — this rule has been consolidated into `react-x/use-state` and its lazy-initialization checks are now controlled by the `enforceLazyInitialization` option.
* [ ] Remove `react-naming-convention/filename` and `react-naming-convention/filename-extension` from your config if present — these rules have been deleted with no replacement.
* [ ] Remove `react-naming-convention/component-name` from your config if present — this rule has been deleted with no replacement.
* [ ] Be aware that `react-x/no-context-provider`, `react-x/no-forward-ref`, and `react-x/no-use-context` no longer auto-fix via `--fix` — their fixes have been converted to suggestions to prevent automatic code modifications that could break existing code. If you relied on `eslint --fix` for these rules, you will now need to apply fixes manually.

#### Settings [#settings]

* [ ] If your project uses [React Compiler](https://react.dev/learn/react-compiler), consider adding the `compilationMode` setting under `settings["react-x"]` to inform rules about the compilation mode your project is using (possible values: `"infer"`, `"annotation"`, `"syntax"`, `"all"`).

#### Review new rules enabled in presets [#review-new-rules-enabled-in-presets]

If you use the `recommended`, `x`, or `all` preset, the following rules are now included automatically. Review your codebase for new reports:

* [ ] `react-x/component-hook-factories` (`error`) — catches factory functions that define components or hooks inside them instead of at the module level.
* [ ] `react-x/error-boundaries` (`error`) — catches try/catch blocks wrapping JSX or `use` hook calls where [Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) should be used instead.
* [ ] `react-x/exhaustive-deps` (`warn`) — enforces that hook dependency arrays contain all reactive values.
* [ ] `react-x/immutability` (`error`, `all` only) — validates against mutating props, state, and other immutable values, including in-place array mutations and direct property assignments.
* [ ] `react-x/no-unused-class-component-members` (`warn`) — catches unused class component methods and properties.
* [ ] `react-x/purity` (`warn`) — validates that components and hooks are pure by checking that they do not call known-impure functions during render.
* [ ] `react-x/refs` (`error`, `all` only) — validates correct usage of refs by checking that `ref.current` is not read or written during render.
* [ ] `react-x/rules-of-hooks` (`error`) — enforces the [Rules of Hooks](https://react.dev/reference/rules/rules-of-react#rules-of-hooks).
* [ ] `react-x/set-state-in-effect` (`warn`) — catches synchronous `setState` calls inside effects.
* [ ] `react-x/set-state-in-render` (`error`) — catches unconditional `setState` calls during render that can cause infinite loops.
* [ ] `react-x/unsupported-syntax` (`error`) — catches usage of syntax that React Compiler does not support, including `eval`, `with` statements, and IIFEs in JSX.
* [ ] `react-x/use-memo` (`error`) — catches `useMemo` calls where the callback has no return value or where the `useMemo` return value is discarded.
* [ ] `react-x/use-state` (`warn`) — Enforces correct usage of `useState`, including destructuring, symmetric naming of the value and setter (previously `react-naming-convention/use-state`), and wrapping expensive initializers in a lazy initializer function (previously `prefer-use-state-lazy-initialization`).

### 📘 Migration Guide: From `eslint-plugin-react-hooks` [#-migration-guide-from-eslint-plugin-react-hooks]

See the [complete migration guide](https://eslint-react.xyz/docs/migrating-from-eslint-plugin-react-hooks) for more details.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.13.0...v3.0.0-rc.0](https://github.com/Rel1cx/eslint-react/compare/v2.13.0...v3.0.0-rc.0)

## v2.13.0 (2026-02-15) [#v2130-2026-02-15]

### ✨ New [#-new-31]

* Add `naming-convention/id-name` rule for `React.useId()` by @amir-rahmanii in [https://github.com/Rel1cx/eslint-react/pull/1497](https://github.com/Rel1cx/eslint-react/pull/1497)
* Deprecate `naming-convention/filename` and `naming-convention/filename-extension` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1498](https://github.com/Rel1cx/eslint-react/pull/1498)

### 🐞 Fixes [#-fixes-58]

* Update rules’ `meta.type` from `"problem"` to `"suggestion"` for naming-convention rules by @amir-rahmanii in [https://github.com/Rel1cx/eslint-react/pull/1496](https://github.com/Rel1cx/eslint-react/pull/1496)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of]

1. The `naming-convention/filename` rule has been deprecated and will be removed in the next major version.
2. The `naming-convention/filename-extension` rule has been deprecated and will be removed in the next major version.

Modern React frameworks each come with their own naming conventions that can differ or even conflict. A single predefined, framework-agnostic filename or filename extension rule no longer matches real-world usage. Please follow the official naming conventions of the specific React framework you are using.

For example, here are some references for popular frameworks:

* Next.js — App Router and File-system conventions: [https://nextjs.org/docs/app](https://nextjs.org/docs/app), [https://nextjs.org/docs/app/api-reference/file-conventions](https://nextjs.org/docs/app/api-reference/file-conventions)
* React Router — File Route Conventions: [https://reactrouter.com/how-to/file-route-conventions#file-route-conventions](https://reactrouter.com/how-to/file-route-conventions#file-route-conventions)
* TanStack Start — TanStack Router File Naming Conventions: [https://tanstack.com/router/v1/docs/framework/react/routing/file-naming-conventions](https://tanstack.com/router/v1/docs/framework/react/routing/file-naming-conventions)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.12.4...v2.13.0](https://github.com/Rel1cx/eslint-react/compare/v2.12.4...v2.13.0)

## v2.12.4 (2026-02-11) [#v2124-2026-02-11]

### 🐞 Fixes [#-fixes-59]

* Fix `preact` and `preact/compat` support in `no-implicit-key` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1494](https://github.com/Rel1cx/eslint-react/pull/1494)

### 🪄 Improvements [#-improvements-30]

* Refactor `dom/no-unknown-property` rule to fix all ESLint and TypeScript issues by @ulrichstark in [https://github.com/Rel1cx/eslint-react/pull/1490](https://github.com/Rel1cx/eslint-react/pull/1490)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.12.2...v2.12.4](https://github.com/Rel1cx/eslint-react/compare/v2.12.2...v2.12.4)

## v2.12.2 (2026-02-08) [#v2122-2026-02-08]

### 🐞 Fixes [#-fixes-60]

* Reduce the sensitivity of component detection to prevent false positives in certain rules, closes #1488 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1489](https://github.com/Rel1cx/eslint-react/pull/1489)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.12.1...v2.12.2](https://github.com/Rel1cx/eslint-react/compare/v2.12.1...v2.12.2)

## v2.12.1 (2026-02-07) [#v2121-2026-02-07]

### 🐞 Fixes [#-fixes-61]

* Check all union constituents and allow all types under `React` namespace in `no-implicit-key` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1487](https://github.com/Rel1cx/eslint-react/pull/1487)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.12.0...v2.12.1](https://github.com/Rel1cx/eslint-react/compare/v2.12.0...v2.12.1)

## v2.12.0 (2026-02-07) [#v2120-2026-02-07]

### 🪄 Improvements [#-improvements-31]

* Upgrade ESLint to v10 across the repo by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1486](https://github.com/Rel1cx/eslint-react/pull/1486)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-1]

ESLint v10 is now supported and used throughout the repository. The minimum required ESLint version remains v8.57.0, but the project now supports and is tested against ESLint v10.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.11.2...v2.12.0](https://github.com/Rel1cx/eslint-react/compare/v2.11.2...v2.12.0)

## v2.11.2 (2026-02-07) [#v2112-2026-02-07]

### 🐞 Fixes [#-fixes-62]

* Implement a more robust check to handle cases that `getFullyQualifiedName` cannot handle in `no-implicit-key`, closes #1476 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1480](https://github.com/Rel1cx/eslint-react/pull/1480)

### 🪄 Improvements [#-improvements-32]

* Bump esbuild, node types, jsdoc plugin

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.11.1...v2.11.2](https://github.com/Rel1cx/eslint-react/compare/v2.11.1...v2.11.2)

## v2.11.1 (2026-02-07) [#v2111-2026-02-07]

### 🐞 Fixes [#-fixes-63]

* Fix React internal key checks in `no-implicit-key`, closes #1476 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1479](https://github.com/Rel1cx/eslint-react/pull/1479)
* Add `no-implicit-key` rule to `disable-type-checked` config of `eslint-plugin-react-x`, closes #1477 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1478](https://github.com/Rel1cx/eslint-react/pull/1478)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.11.0...v2.11.1](https://github.com/Rel1cx/eslint-react/compare/v2.11.0...v2.11.1)

## v2.11.0 (2026-02-06) [#v2110-2026-02-06]

### ✨ New [#-new-32]

* Add RSC rules to `recommended` presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1475](https://github.com/Rel1cx/eslint-react/pull/1475)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.10.1...v2.11.0](https://github.com/Rel1cx/eslint-react/compare/v2.10.1...v2.11.0)

## v2.10.1 (2026-02-05) [#v2101-2026-02-05]

### 🐞 Fixes [#-fixes-64]

* Relax `no-implicit-key` rule for React internally defined keys, closes #1472 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1474](https://github.com/Rel1cx/eslint-react/pull/1474)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.10.0...v2.10.1](https://github.com/Rel1cx/eslint-react/compare/v2.10.0...v2.10.1)

## v2.10.0 (2026-02-05) [#v2100-2026-02-05]

* Refactor `no-implicit-key` rule to use type checking by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1466](https://github.com/Rel1cx/eslint-react/pull/1466)
* Move `no-unnecessary-use-ref` to removed rules, closes #1417 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1471](https://github.com/Rel1cx/eslint-react/pull/1471)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-2]

1. The `no-implicit-key` rule has been updated to use type checking and moved from `recommended` to `type-checked` presets.
2. The `no-unnecessary-use-ref` rule has been moved to removed rules, because the rule is hard to get right.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.9.4...v2.10.0](https://github.com/Rel1cx/eslint-react/compare/v2.9.4...v2.10.0)

## v2.9.4 (2026-02-03) [#v294-2026-02-03]

### 🐞 Fixes [#-fixes-65]

* Fix sub-plugin's READMEs by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1465](https://github.com/Rel1cx/eslint-react/pull/1465)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.9.3...v2.9.4](https://github.com/Rel1cx/eslint-react/compare/v2.9.3...v2.9.4)

## v2.9.3 (2026-02-02) [#v293-2026-02-02]

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-3]

The following rules have been deprecated and will be removed in the next major version:

* `no-default-props`
* `no-prop-types`
* `no-string-refs`

For legacy codebases, use [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax) as an alternative:

```ts
{
    files: ['**/*.jsx', '**/*.tsx'],
    rules: {
        "no-restricted-syntax": [
            "error",
            {
                "selector": "AssignmentExpression[operator='='][left.property.name='defaultProps']",
                "message": "[Deprecated] Use ES6 default parameters instead."
            },
            {
                "selector": "AssignmentExpression[operator='='][left.property.name='propTypes']",
                "message": "[Deprecated] Use TypeScript or another type-checking solution instead."
            },
            {
                "selector": "JSXAttribute[name.name='ref'][value.type='Literal']",
                "message": "[Deprecated] Use callback refs instead."
            }
        ]
    }
}
```

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.9.2...v2.9.3](https://github.com/Rel1cx/eslint-react/compare/v2.9.2...v2.9.3)

## v2.9.2 (2026-02-02) [#v292-2026-02-02]

### 🐞 Fixes [#-fixes-66]

* Fix directives checks by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1461](https://github.com/Rel1cx/eslint-react/pull/1461)
* Add missing rsc plugin to `all` config, closes #1462 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1463](https://github.com/Rel1cx/eslint-react/pull/1463)

### 🪄 Improvements [#-improvements-33]

* Separate message ids for `rsc/function-definition` by @SukkaW in [https://github.com/Rel1cx/eslint-react/pull/1460](https://github.com/Rel1cx/eslint-react/pull/1460)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.9.0...v2.9.2](https://github.com/Rel1cx/eslint-react/compare/v2.9.0...v2.9.2)

## v2.9.0 (2026-02-02) [#v290-2026-02-02]

### ✨ New [#-new-33]

* Migrate `no-non-async-server-functions` rule to `rsc/function-definition` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1457](https://github.com/Rel1cx/eslint-react/pull/1457)
* Add a new `eslint-plugin-react-rsc` sub-plugin for React Server Components (RSC) rules by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1457](https://github.com/Rel1cx/eslint-react/pull/1457)
* Add a new `rsc` preset to enable RSC rules by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1457](https://github.com/Rel1cx/eslint-react/pull/1457)
* Add a new `disable-rsc` preset to disable RSC rules by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1457](https://github.com/Rel1cx/eslint-react/pull/1457)

### 🪄 Improvements [#-improvements-34]

* Move grouped docs from the global overview to per-plugin READMEs by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1449](https://github.com/Rel1cx/eslint-react/pull/1449)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-4]

The `no-non-async-server-functions` rule has been migrated to `rsc/function-definition`. Please update your configuration accordingly if you are using it.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.8.4...v2.9.0](https://github.com/Rel1cx/eslint-react/compare/v2.8.4...v2.9.0)

## v2.8.4 (2026-02-01) [#v284-2026-02-01]

### 🐞 Fixes [#-fixes-67]

* Change status of `jsx-shorthand-boolean` rule in migration table by @connorshea in [https://github.com/Rel1cx/eslint-react/pull/1446](https://github.com/Rel1cx/eslint-react/pull/1446)
* Fix rule name in docs for `debug/is-from-ref` by @amir-rahmanii in [https://github.com/Rel1cx/eslint-react/pull/1445](https://github.com/Rel1cx/eslint-react/pull/1445)
* Fix rule name in docs for `no-non-async-server-functions` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1447](https://github.com/Rel1cx/eslint-react/pull/1447)
* Mark `no-non-async-server-functions` as experimental by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1448](https://github.com/Rel1cx/eslint-react/pull/1448)

## New Contributors [#new-contributors-4]

* @connorshea made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1446](https://github.com/Rel1cx/eslint-react/pull/1446)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.8.3...v2.8.4](https://github.com/Rel1cx/eslint-react/compare/v2.8.3...v2.8.4)

## v2.8.3 (2026-02-01) [#v283-2026-02-01]

### ✨ New [#-new-34]

* feat(#1435): implements `no-non-async-server-functions` by @SukkaW in [https://github.com/Rel1cx/eslint-react/pull/1443](https://github.com/Rel1cx/eslint-react/pull/1443)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.8.1...v2.8.3](https://github.com/Rel1cx/eslint-react/compare/v2.8.1...v2.8.3)

## v2.8.1 (2026-01-29) [#v281-2026-01-29]

### ✨ New [#-new-35]

* Function component detection now supports identifying components that don't return a `ReactNode` but have a `'use memo'` or `'use no memo'` directive by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1440](https://github.com/Rel1cx/eslint-react/pull/1440)
  The function in below example will be detected as a function component in relevant rules:
  ```tsx
  function App() {
    "use memo";
  }

  function App() {
    "use no memo";
  }
  ```

### 🐞 Fixes [#-fixes-68]

* Skip unstable value checks when `'use memo';` is present by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1441](https://github.com/Rel1cx/eslint-react/pull/1441)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.8.0...v2.8.1](https://github.com/Rel1cx/eslint-react/compare/v2.8.0...v2.8.1)

## v2.8.0 (2026-01-29) [#v280-2026-01-29]

### ✨ New [#-new-36]

* Function component detection now supports identifying components that don't return a `ReactNode` but call React Hooks by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1438](https://github.com/Rel1cx/eslint-react/pull/1438)
  The function in below example will be detected as a function component in relevant rules:
  ```tsx
  function App() {
    useEffect(() => {}, []);
  }
  ```

### 🐞 Fixes [#-fixes-69]

* Revert `no-unnecessary-key` to remove constant key checking, closes #1436 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1439](https://github.com/Rel1cx/eslint-react/pull/1439)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.7.4...v2.8.0](https://github.com/Rel1cx/eslint-react/compare/v2.7.4...v2.8.0)

## v2.7.4 (2026-01-25) [#v274-2026-01-25]

### ✨ New [#-new-37]

* Add `debug/is-from-ref` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1433](https://github.com/Rel1cx/eslint-react/pull/1433)

### 🐞 Fixes [#-fixes-70]

* fix(no-leaked-conditional-rendering): support enum, closes #1428 by @hyoban in [https://github.com/Rel1cx/eslint-react/pull/1429](https://github.com/Rel1cx/eslint-react/pull/1429)

### 🪄 Improvements [#-improvements-35]

* Enhance component detection hints with array patterns and expressions by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1430](https://github.com/Rel1cx/eslint-react/pull/1430)
* Enhance rules overview page by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1432](https://github.com/Rel1cx/eslint-react/pull/1432)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.7.2...v2.7.3](https://github.com/Rel1cx/eslint-react/compare/v2.7.2...v2.7.3)

## v2.7.2 (2026-01-18) [#v272-2026-01-18]

### 🪄 Improvements [#-improvements-36]

* Reimplement the `prefer-destructuring-assignment` rule for better performance by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1423](https://github.com/Rel1cx/eslint-react/pull/1423)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.7.1...v2.7.2](https://github.com/Rel1cx/eslint-react/compare/v2.7.1...v2.7.2)

## v2.7.1 (2026-01-16) [#v271-2026-01-16]

### 🐞 Fixes [#-fixes-71]

* Fix misdetected functions inside array expressions as function components; closes #1416 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1418](https://github.com/Rel1cx/eslint-react/pull/1418)
* Remove unnecessary `no-unnecessary-use-ref` rule from strict configurations and update documentation by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1419](https://github.com/Rel1cx/eslint-react/pull/1419)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-5]

The `no-unnecessary-use-ref` rule has been removed from the strict presets, as it was causing false positives in [certain scenarios](https://github.com/Rel1cx/eslint-react/issues/1417). You can still enable it manually if needed, but please be aware of its current limitations.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.7.0...v2.7.1](https://github.com/Rel1cx/eslint-react/compare/v2.7.0...v2.7.1)

## v2.7.0 (2026-01-16) [#v270-2026-01-16]

### ✨ New [#-new-38]

* Add `additionalStateHooks` to shared settings, closes #1405 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1411](https://github.com/Rel1cx/eslint-react/pull/1411)

### 🐞 Fixes [#-fixes-72]

* Fix `no-unnecessary-memo` and `no-unnecessary-use-callback` false positives when unused, closes #1404 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1407](https://github.com/Rel1cx/eslint-react/pull/1407)
* Enhance `no-unnecessary-use-ref` to allow previous refs by convention, closes #1406 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1410](https://github.com/Rel1cx/eslint-react/pull/1410)
* Fix `no-missing-key` misdetect non-map calls as map since 2.6.4 version, closes #1412 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1413](https://github.com/Rel1cx/eslint-react/pull/1413)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.6.4...v2.7.0](https://github.com/Rel1cx/eslint-react/compare/v2.6.4...v2.7.0)

## v2.6.4 (2026-01-15) [#v264-2026-01-15]

### ✨ New [#-new-39]

* feat: add a `disable-experimental` preset to quickly opt out of experimental rules by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1403](https://github.com/Rel1cx/eslint-react/pull/1403)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.6.2...v2.6.4](https://github.com/Rel1cx/eslint-react/compare/v2.6.2...v2.6.4)

## v2.6.2 (2026-01-14) [#v262-2026-01-14]

### 🐞 Fixes [#-fixes-73]

* Fix `no-unnecessary-key` false positives on JSX elements inside render props by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1402](https://github.com/Rel1cx/eslint-react/pull/1402)
* Enhance `no-unnecessary-use-ref` rule tests and improve handling of ref references by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1399](https://github.com/Rel1cx/eslint-react/pull/1399)
* Support v3 and v4 zod versions by @DoctorFTB in [https://github.com/Rel1cx/eslint-react/pull/1400](https://github.com/Rel1cx/eslint-react/pull/1400)

## New Contributors [#new-contributors-5]

* @DoctorFTB made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1400](https://github.com/Rel1cx/eslint-react/pull/1400)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.6.0...v2.6.2](https://github.com/Rel1cx/eslint-react/compare/v2.6.0...v2.6.2)

## v2.6.0 (2026-01-14) [#v260-2026-01-14]

### ✨ New [#-new-40]

* Add `no-unnecessary-use-ref` rule, closes #1394 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1397](https://github.com/Rel1cx/eslint-react/pull/1397)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-6]

The new [`no-unnecessary-use-ref`](https://eslint-react.xyz/docs/rules/no-unnecessary-use-ref) rule is included in the strict presets.

This rule reports unnecessary uses of `useRef` when the ref is only used within a single effect which the value can be co-located inside the effect itself. Thanks to @SukkaW for purposing it!

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.5.7...v2.6.0](https://github.com/Rel1cx/eslint-react/compare/v2.5.7...v2.6.0)

## v2.5.7 (2026-01-13) [#v257-2026-01-13]

### 🪄 Improvements [#-improvements-37]

* Enhance `no-unnecessary-key` to catch constant keys outside of map calls, closes #1377 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1393](https://github.com/Rel1cx/eslint-react/pull/1393)

### 🐞 Fixes [#-fixes-74]

* Revert 'Remove `no-implicit-key` rule from recommended presets' by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1392](https://github.com/Rel1cx/eslint-react/pull/1392)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-7]

The `no-implicit-key` rule has been re-added to the recommended presets.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.5.5...v2.5.7](https://github.com/Rel1cx/eslint-react/compare/v2.5.5...v2.5.7)

## v2.5.5 (2026-01-12) [#v255-2026-01-12]

### 🐞 Fixes [#-fixes-75]

* Remove `no-unnecessary-key` rule from strict presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1386](https://github.com/Rel1cx/eslint-react/pull/1386)
* Remove `no-duplicate-key` rule from recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1387](https://github.com/Rel1cx/eslint-react/pull/1387)
* ~~Remove `no-implicit-key` rule from recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1388](https://github.com/Rel1cx/eslint-react/pull/1388)~~

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-8]

The following rules have been removed from the strict and recommended presets:

* `no-unnecessary-key`
* `no-duplicate-key`
* ~~`no-implicit-key`~~

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.5.3...v2.5.5](https://github.com/Rel1cx/eslint-react/compare/v2.5.3...v2.5.5)

## v2.5.3 (2026-01-09) [#v253-2026-01-09]

### 🐞 Fixes [#-fixes-76]

* Enhance context and ref naming rules with additional cases covered by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1378](https://github.com/Rel1cx/eslint-react/pull/1378)
* Update `naming-convention/context-name` rule to include React version checks; closes #1382 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1384](https://github.com/Rel1cx/eslint-react/pull/1384)
* Update `naming-convention/ref-name` to allow "ref" as a ref name by @ocavue in [https://github.com/Rel1cx/eslint-react/pull/1380](https://github.com/Rel1cx/eslint-react/pull/1380)
* Fix `jsx-key-before-spread`: should only be enabled in JSX automatic runtime; update related docs and tests; closes #1381 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1383](https://github.com/Rel1cx/eslint-react/pull/1383)

## New Contributors [#new-contributors-6]

* @ocavue made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1380](https://github.com/Rel1cx/eslint-react/pull/1380)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.5.1...v2.5.3](https://github.com/Rel1cx/eslint-react/compare/v2.5.1...v2.5.3)

## v2.5.1 (2026-01-05) [#v251-2026-01-05]

### 🐞 Fixes [#-fixes-77]

* Fix `naming-convention/ref-name` false positive with immediate deref, closes #1375 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1376](https://github.com/Rel1cx/eslint-react/pull/1376)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.5.0...v2.5.1](https://github.com/Rel1cx/eslint-react/compare/v2.5.0...v2.5.1)

## v2.5.0 (2025-12-31) [#v250-2025-12-31]

### ✨ New [#-new-41]

* feat: add `naming-convention/use-ref-name` rule by @amir-rahmanii in [https://github.com/Rel1cx/eslint-react/pull/1366](https://github.com/Rel1cx/eslint-react/pull/1366)
* Rename `naming-convention/use-ref-name` rule to `naming-convention/ref-name` and add it to recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1367](https://github.com/Rel1cx/eslint-react/pull/1367)

### 🪄 Improvements [#-improvements-38]

* Add `verify-rules-metas` script & minor docs fixes by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1355](https://github.com/Rel1cx/eslint-react/pull/1355)
* docs(use-state): add examples for `enforceAssignment` by @amir-rahmanii in [https://github.com/Rel1cx/eslint-react/pull/1363](https://github.com/Rel1cx/eslint-react/pull/1363)

## New Contributors [#new-contributors-7]

* @amir-rahmanii made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1363](https://github.com/Rel1cx/eslint-react/pull/1363)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.4.0...v2.5.0](https://github.com/Rel1cx/eslint-react/compare/v2.4.0...v2.5.0)

## v2.4.0 (2025-12-24) [#v240-2025-12-24]

### ✨ New [#-new-42]

* Add `enforceAssignment` and `enforceSetterName` options to `naming-convention/use-state` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1346](https://github.com/Rel1cx/eslint-react/pull/1346)

### 🐞 Fixes [#-fixes-78]

* Fix False positive in `naming-convention/use-state` for state with no setters, closes #1342, closes #1352 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1346](https://github.com/Rel1cx/eslint-react/pull/1346)
* Fix fumadocs theme issues by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1347](https://github.com/Rel1cx/eslint-react/pull/1347)

### 🪄 Improvements [#-improvements-39]

* Update `typescript-eslint` to `8.50.1` across all packages

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.13...v2.4.0](https://github.com/Rel1cx/eslint-react/compare/v2.3.13...v2.4.0)

## v2.3.13 (2025-12-09) [#v2313-2025-12-09]

### 🐞 Fixes [#-fixes-79]

* Clean up the code structure of the AST utils and fix an issue where `isNodeEqual` did not handle `as` expressions correctly, closes #1340 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1341](https://github.com/Rel1cx/eslint-react/pull/1341)

### 🪄 Improvements [#-improvements-40]

* Update next and react to latest versions across all packages

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.12...v2.3.13](https://github.com/Rel1cx/eslint-react/compare/v2.3.12...v2.3.13)

## v2.3.12 (2025-12-03) [#v2312-2025-12-03]

### ✨ New [#-new-43]

* Add `allowEmptyFragment` option to `no-useless-fragment`, closes #1265 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1335](https://github.com/Rel1cx/eslint-react/pull/1335)

### 🐞 Fixes [#-fixes-80]

* Fix `web-api/no-leaked-event-listener` false positive when using React Native `BackHandler`, closes #1323 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1336](https://github.com/Rel1cx/eslint-react/pull/1336)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.11...v2.3.12](https://github.com/Rel1cx/eslint-react/compare/v2.3.11...v2.3.12)

## v2.3.11 (2025-12-02) [#v2311-2025-12-02]

### 🐞 Fixes [#-fixes-81]

* Fix readonly type detection for class and interface extends, closes #1326 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1329](https://github.com/Rel1cx/eslint-react/pull/1329)
* Fix and cleanup `prefer-read-only-props` rule, closes #1326 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1331](https://github.com/Rel1cx/eslint-react/pull/1331)
* Fix `forwardRef`'s `ref` should be excluded from check, closes #1332 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1333](https://github.com/Rel1cx/eslint-react/pull/1333)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.9...v2.3.11](https://github.com/Rel1cx/eslint-react/compare/v2.3.9...v2.3.11)

## v2.3.9 (2025-11-26) [#v239-2025-11-26]

### ✨ New [#-new-44]

* feat: Disallow a function wrapped in `useCallback` or a variable wrapped in `useMemo` yet only used in `useEffect` and only in one `useEffect`, closes #1278 by @possum-enjoyer in [https://github.com/Rel1cx/eslint-react/pull/1321](https://github.com/Rel1cx/eslint-react/pull/1321)

### 🐞 Fixes [#-fixes-82]

* docs: fix severity for `no-unsafe-iframe-sandbox` in rule docs by @JstnMcBrd in [https://github.com/Rel1cx/eslint-react/pull/1327](https://github.com/Rel1cx/eslint-react/pull/1327)
* chore: correct peer dependencies by @ha1fstack in [https://github.com/Rel1cx/eslint-react/pull/1328](https://github.com/Rel1cx/eslint-react/pull/1328)

## New Contributors [#new-contributors-8]

* @JstnMcBrd made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1327](https://github.com/Rel1cx/eslint-react/pull/1327)
* @ha1fstack made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1328](https://github.com/Rel1cx/eslint-react/pull/1328)
* @possum-enjoyer made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1321](https://github.com/Rel1cx/eslint-react/pull/1321)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.7...v2.3.9](https://github.com/Rel1cx/eslint-react/compare/v2.3.7...v2.3.9)

## v2.3.7 (2025-11-21) [#v237-2025-11-21]

### 🐞 Fixes [#-fixes-83]

* `web-api/no-leaked-event-listener` does not report event listeners with `signal`, closes #1282 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1325](https://github.com/Rel1cx/eslint-react/pull/1325)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.5...v2.3.7](https://github.com/Rel1cx/eslint-react/compare/v2.3.5...v2.3.7)

## v2.3.5 (2025-11-13) [#v235-2025-11-13]

### 🐞 Fixes [#-fixes-84]

* fix: rule names in `disable-conflict-eslint-plugin-react`, closes #1315 by @jkbdk in [https://github.com/Rel1cx/eslint-react/pull/1316](https://github.com/Rel1cx/eslint-react/pull/1316)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.4...v2.3.5](https://github.com/Rel1cx/eslint-react/compare/v2.3.4...v2.3.5)

## v2.3.4 (2025-11-10) [#v234-2025-11-10]

### ✨ New [#-new-45]

* feat(no-unstable-default-props): add `safeDefaultProps` option, closes #1312 by @christopher-buss in [https://github.com/Rel1cx/eslint-react/pull/1313](https://github.com/Rel1cx/eslint-react/pull/1313)
* feat(no-forbidden-props): Mark this rule as deprecated by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1304](https://github.com/Rel1cx/eslint-react/pull/1304)

### 🐞 Fixes [#-fixes-85]

* Remove `type-fest` from shared package, closes #1306 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1307](https://github.com/Rel1cx/eslint-react/pull/1307)
* Remove 'NodeJS.Require' type from shared package, closes #1308 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1309](https://github.com/Rel1cx/eslint-react/pull/1309)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.1...v2.3.4](https://github.com/Rel1cx/eslint-react/compare/v2.3.1...v2.3.4)

## v2.3.1 (2025-11-02) [#v231-2025-11-02]

### 🐞 Fixes [#-fixes-86]

* Improve location reporting for `jsx-dollar` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1303](https://github.com/Rel1cx/eslint-react/pull/1303)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.3.0...v2.3.1](https://github.com/Rel1cx/eslint-react/compare/v2.3.0...v2.3.1)

## v2.3.0 (2025-11-02) [#v230-2025-11-02]

### ✨ New [#-new-46]

* Add `jsx-dollar` rule, closes #1300 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1302](https://github.com/Rel1cx/eslint-react/pull/1302)

### 🪄 Improvements [#-improvements-41]

* Enable `strictNullChecks` in tsconfig samples, closes #1299 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1301](https://github.com/Rel1cx/eslint-react/pull/1301)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.2.4...v2.3.0](https://github.com/Rel1cx/eslint-react/compare/v2.2.4...v2.3.0)

## v2.2.4 (2025-10-27) [#v224-2025-10-27]

### 🐞 Fixes [#-fixes-87]

* Add `main`, `module`, and `types` fields to `package.json` for multiple packages, closes #1288, closes #1283 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1294](https://github.com/Rel1cx/eslint-react/pull/1294)
* Require "Context" suffix for context providers in `no-context-provider` rule, closes #1295 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1296](https://github.com/Rel1cx/eslint-react/pull/1296)

### 🪄 Improvements [#-improvements-42]

* Add info on `dom/no-string-style-prop` to migration docs by @silverwind in [https://github.com/Rel1cx/eslint-react/pull/1293](https://github.com/Rel1cx/eslint-react/pull/1293)

## New Contributors [#new-contributors-9]

* @silverwind made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1293](https://github.com/Rel1cx/eslint-react/pull/1293)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.2.3...v2.2.4](https://github.com/Rel1cx/eslint-react/compare/v2.2.3...v2.2.4)

## v2.2.3 (2025-10-22) [#v223-2025-10-22]

### 🐞 Fixes [#-fixes-88]

* Re-add missing rule `jsx-key-before-spread` to presets, closes #1290 by @jkbdk in [https://github.com/Rel1cx/eslint-react/pull/1291](https://github.com/Rel1cx/eslint-react/pull/1291)

### 🪄 Improvements [#-improvements-43]

* Add FAQ entry for plugin selection guidance, closes #1280 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1281](https://github.com/Rel1cx/eslint-react/pull/1281)
* Simplify "Which one should I use? Unified plugin or individual plugins?" by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1286](https://github.com/Rel1cx/eslint-react/pull/1286)
* Add `strict` preset severity to rules overview, closes #1284 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1285](https://github.com/Rel1cx/eslint-react/pull/1285)
* Modify `display-name` rule entry in migration docs by @danielrentz in [https://github.com/Rel1cx/eslint-react/pull/1287](https://github.com/Rel1cx/eslint-react/pull/1287)

## New Contributors [#new-contributors-10]

* @jkbdk made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1291](https://github.com/Rel1cx/eslint-react/pull/1291)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.2.2...v2.2.3](https://github.com/Rel1cx/eslint-react/compare/v2.2.2...v2.2.3)

## v2.2.2 (2025-10-14) [#v222-2025-10-14]

### 🐞 Fixes [#-fixes-89]

* Remove remaining code in the unified plugin used for legacy config compatibility by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1277](https://github.com/Rel1cx/eslint-react/pull/1277)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.2.1...v2.2.2](https://github.com/Rel1cx/eslint-react/compare/v2.2.1...v2.2.2)

## v2.2.1 (2025-10-13) [#v221-2025-10-13]

### 🪄 Improvements [#-improvements-44]

* Unified plugin no longer includes the `eslint-plugin-react-debug` plugin to reduce its deps by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1276](https://github.com/Rel1cx/eslint-react/pull/1276)
* Merge `@eslint-react/kit` package into `@eslint-react/shared` package to consolidate shared utilities and reduce package fragmentation by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1275](https://github.com/Rel1cx/eslint-react/pull/1275)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.1.1...v2.2.1](https://github.com/Rel1cx/eslint-react/compare/v2.1.1...v2.2.1)

## v2.1.1 (2025-10-13) [#v211-2025-10-13]

### ✨ New [#-new-47]

* Add `strict`, `strict-typescript`, and `strict-type-checked` presets by @Rel1cx
* Add `no-deprecated` preset to enable all rules that report deprecated React APIs by @Rel1cx

### 🐞 Fixes [#-fixes-90]

* Disallow extra properties in rule options by @andreww2012 in [https://github.com/Rel1cx/eslint-react/pull/1263](https://github.com/Rel1cx/eslint-react/pull/1263)

### 🪄 Improvements [#-improvements-45]

* Move some rules from `recommended` presets to `strict` presets by @Rel1cx, closes #1262
  * `no-unstable-context-value`
  * `no-unstable-default-props`
  * `no-unused-class-component-members`
  * `no-unused-state`
  * `dom/no-missing-button-type`
  * `dom/no-missing-iframe-sandbox`
  * `dom/no-unsafe-iframe-sandbox`
  * `dom/no-unsafe-target-blank`
* Change `typescript` peer dependency version range from `^5.9.2` to `^5` by @Rel1cx

## New Contributors [#new-contributors-11]

* @andreww2012 made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1263](https://github.com/Rel1cx/eslint-react/pull/1263)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.0.6...v2.1.1](https://github.com/Rel1cx/eslint-react/compare/v2.0.6...v2.1.1)

## v2.0.6 (2025-10-03) [#v206-2025-10-03]

### 🐞 Fixes [#-fixes-91]

* Fix 'all' preset, closes #1260 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1261](https://github.com/Rel1cx/eslint-react/pull/1261)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.0.5...v2.0.6](https://github.com/Rel1cx/eslint-react/compare/v2.0.5...v2.0.6)

## v2.0.5 (2025-10-02) [#v205-2025-10-02]

### 🪄 Improvements [#-improvements-46]

* Move error marker from `dangerouslySetInnerHTML` to children in `dom/no-dangerously-set-innerhtml-with-children` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1256](https://github.com/Rel1cx/eslint-react/pull/1256)
* Update default React version in settings from `19.1.0` to `19.2.0` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1259](https://github.com/Rel1cx/eslint-react/pull/1259)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.0.4...v2.0.5](https://github.com/Rel1cx/eslint-react/compare/v2.0.4...v2.0.5)

## v2.0.4 (2025-10-01) [#v204-2025-10-01]

### ✨ New [#-new-48]

* Enables `naming-convention/use-state` rule in recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1252](https://github.com/Rel1cx/eslint-react/pull/1252)

### 🐞 Fixes [#-fixes-92]

* Adds `hooks-extra/no-direct-set-state-in-use-effect` rule to recommended presets, closes #1251 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1252](https://github.com/Rel1cx/eslint-react/pull/1252)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.0.3...v2.0.4](https://github.com/Rel1cx/eslint-react/compare/v2.0.3...v2.0.4)

## v2.0.3 (2025-09-30) [#v203-2025-09-30]

### 🐞 Fixes [#-fixes-93]

* Fix `dom/prefer-namespace-import` missing in `react-dom` plugin by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1249](https://github.com/Rel1cx/eslint-react/pull/1249)
* Fix false positive for `dom/no-missing-button-type` when specifying non-trivial expression as value of `type` attribute, closes #1247 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1250](https://github.com/Rel1cx/eslint-react/pull/1250)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.0.2...v2.0.3](https://github.com/Rel1cx/eslint-react/compare/v2.0.2...v2.0.3)

## v2.0.2 (2025-09-29) [#v202-2025-09-29]

### 🪄 Improvements [#-improvements-47]

* Refine migration table from `eslint-plugin-react`, closes #1154 by @outslept in [https://github.com/Rel1cx/eslint-react/pull/1242](https://github.com/Rel1cx/eslint-react/pull/1242)
* Fix dead link for `hooks-extra/no-direct-set-state-in-use-layout-effect` by @tnir in [https://github.com/Rel1cx/eslint-react/pull/1245](https://github.com/Rel1cx/eslint-react/pull/1245)
* Cleanup unused deps, closes #1244 by @Rel1cx, @outslept in [https://github.com/Rel1cx/eslint-react/pull/1246](https://github.com/Rel1cx/eslint-react/pull/1246)

## New Contributors [#new-contributors-12]

* @outslept made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1242](https://github.com/Rel1cx/eslint-react/pull/1242)
* @tnir made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1245](https://github.com/Rel1cx/eslint-react/pull/1245)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.0.1...v2.0.2](https://github.com/Rel1cx/eslint-react/compare/v2.0.1...v2.0.2)

## v2.0.1 (2025-09-27) [#v201-2025-09-27]

### 🐞 Fixes [#-fixes-94]

* Add `ts-api-utils` to unified plugin deps, closes #1239 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1240](https://github.com/Rel1cx/eslint-react/pull/1240)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v2.0.0...v2.0.1](https://github.com/Rel1cx/eslint-react/compare/v2.0.0...v2.0.1)

## v2.0.0 (2025-09-26) [#v200-2025-09-26]

### 💥 Breaking Changes [#-breaking-changes-11]

**Target Environment Updates: Now ESM and ESLint Flat Config Only**

* Drop support for CommonJS (CJS) module format, packages are now distributed only as ECMAScript Modules (ESM)
* Drop support for ESLint legacy config system, packages now support only ESLint Flat Config (`eslint.config.js`)
* Drop support for Node.js 18, minimum required version is now Node.js 20
* Drop support for ESLint 8, minimum required version is now ESLint 9.3.6
* Drop support for TypeScript 4, minimum required version is now TypeScript 5.9.2

**Removed Rules**

| Rule                                                   | Replaced by                                                                                                    | Reason       |
| :----------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :----------- |
| `avoid-shorthand-boolean`                              | `jsx-shorthand-boolean`                                                                                        | consolidated |
| `avoid-shorthand-fragment`                             | `jsx-shorthand-fragment`                                                                                       | consolidated |
| `ensure-forward-ref-using-ref`                         | [`no-forward-ref`](https://eslint-react.xyz/docs/rules/no-forward-ref)                                         | renamed      |
| `no-duplicate-props`                                   | `jsx-no-duplicate-props`                                                                                       | renamed      |
| `no-comment-textnodes`                                 | [`jsx-no-comment-textnodes`](https://eslint-react.xyz/docs/rules/jsx-no-comment-textnodes)                     | renamed      |
| `no-complicated-conditional-rendering`                 |                                                                                                                | discontinued |
| `no-nested-components`                                 | [`no-nested-component-definitions`](https://eslint-react.xyz/docs/rules/no-nested-component-definitions)       | renamed      |
| `prefer-react-namespace-import`                        | [`prefer-namespace-import`](https://eslint-react.xyz/docs/rules/prefer-namespace-import)                       | renamed      |
| `prefer-shorthand-boolean`                             | `jsx-shorthand-boolean`                                                                                        | consolidated |
| `prefer-shorthand-fragment`                            | `jsx-shorthand-fragment`                                                                                       | consolidated |
| `use-jsx-vars`                                         | `jsx-uses-vars`                                                                                                | renamed      |
| `dom/no-children-in-void-dom-elements`                 | [`dom/no-void-elements-with-children`](https://eslint-react.xyz/docs/rules/dom-no-void-elements-with-children) | renamed      |
| `hooks-extra/no-direct-set-state-in-use-layout-effect` | `hooks-extra/no-direct-set-state-in-use-effect`                                                                | consolidated |
| `hooks-extra/no-unnecessary-use-callback`              | [`no-unnecessary-use-callback`](https://eslint-react.xyz/docs/rules/no-unnecessary-use-callback)               | relocated    |
| `hooks-extra/no-unnecessary-use-memo`                  | [`no-unnecessary-use-memo`](https://eslint-react.xyz/docs/rules/no-unnecessary-use-memo)                       | relocated    |
| `hooks-extra/no-unnecessary-use-prefix`                | [`no-unnecessary-use-prefix`](https://eslint-react.xyz/docs/rules/no-unnecessary-use-prefix)                   | relocated    |
| `hooks-extra/prefer-use-state-lazy-initialization`     | [`use-state`](https://eslint-react.xyz/docs/rules/use-state)                                                   | relocated    |

**Removed Presets**

| Preset    | Replaced by   | Reason  |
| :-------- | :------------ | :------ |
| `core`    | `x`           | renamed |
| `off-dom` | `disable-dom` | renamed |

**Removed Settings**

| Setting                | Replaced by | Reason       |
| :--------------------- | :---------- | :----------- |
| `additionalComponents` |             | discontinued |
| `additionalHooks`      |             | discontinued |
| `skipImportCheck`      |             | discontinued |

Rules previously using these settings have been refactored to use improved heuristics and no longer require manual configuration.

### ✨ New [#-new-49]

**Added the following new rules:**

* `jsx-shorthand-boolean`: Enforces a consistent style for boolean attributes by @Rel1cx
* `jsx-shorthand-fragment`: Enforces a consistent style for React Fragments by @Rel1cx
* `no-forbidden-props`: Disallows specific props on components by @reteps
* `no-unnecessary-key`: Reports unnecessary `key` props on elements by @Rel1cx, @kachkaev
* `no-unused-props`: Reports unused props in components by @ulrichstark
* `dom/no-string-style-prop`: Disallows string values for the `style` prop by @Rel1cx, @karlhorky
* `dom/prefer-namespace-import`: Enforces using a namespace import for `react-dom` by @Rel1cx

**Added the following new rule to the `recommended-type-checked` preset:**

* `no-unused-props`: Reports unused props in components

**The following rules now support Codemod features:**

* `no-component-did-update` by @Rel1cx
* `no-component-will-receive-props` by @Rel1cx
* `no-component-will-update` by @Rel1cx
* `no-context-provider` by @Rel1cx
* `no-forward-ref` by @Rel1cx
* `no-string-refs` by @Rel1cx

**The following rules now support auto-fix:**

* `no-missing-context-display-name` by @k-yle

**The following rules now support suggestion fixes:**

* `dom/no-missing-button-type` by @Rel1cx
* `dom/no-missing-iframe-sandbox` by @Rel1cx
* `dom/no-unsafe-target-blank` by @Rel1cx

**New configuration preset added:**

* `disable-conflict-eslint-plugin-react`: Disable rules in `eslint-plugin-react` that conflict with rules in our plugins by @reteps

### 🐞 Fixes [#-fixes-95]

* fix(no-unnecessary-use-prefix): fix false positive of React Hooks defined within the callback function of `vi.mock(...)` in Vitest test files by @Rel1cx
* fix(react-web-api/no-leaked-event-listener): fix `useEffect` setup function check to handle `React.useEffect()` calls correctly by @Rel1cx
* fix(react-naming-convention/filename): fix false positive on well-known filenames like `404.tsx`, `_app.tsx`, `[slug].tsx` by @Rel1cx

### 🪄 Improvements [#-improvements-48]

* refactor: simplify React APIs detection logic by @Rel1cx
* refactor: cleanup utilities and simplify rule implementations by @Rel1cx
* docs: add comparison table between `eslint-plugin-react` and `eslint-react` rules by @reteps, @outslept
* docs: replace `tseslint.config` with `defineConfig` in all examples by @Rel1cx
* build: migrate build system from `tsup` to `tsdown` for better performance by @Rel1cx

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.53.1...v2.0.0](https://github.com/Rel1cx/eslint-react/compare/v1.53.1...v2.0.0)

## v1.53.1 (2025-09-11) [#v1531-2025-09-11]

### 🐞 Fixes [#-fixes-96]

* fix: fix useEffect setup function check in `web-api/no-leaked-event-listener`, closes #1228 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1229](https://github.com/Rel1cx/eslint-react/pull/1229)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.53.0...v1.53.1](https://github.com/Rel1cx/eslint-react/compare/v1.53.0...v1.53.1)

## v1.53.0 (2025-09-04) [#v1530-2025-09-04]

### ✨ New [#-new-50]

* feat: update naming convention rules default excepts to include common patterns by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1216](https://github.com/Rel1cx/eslint-react/pull/1216)

### 🪄 Improvements [#-improvements-49]

* build: replace `tsup` with `tsdown` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1213](https://github.com/Rel1cx/eslint-react/pull/1213)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.8...v1.53.0](https://github.com/Rel1cx/eslint-react/compare/v1.52.8...v1.53.0)

## v1.52.9 (2025-08-31) [#v1529-2025-08-31]

### 🐞 Fixes [#-fixes-97]

* fix: issue introduced in version [v1.52.7](https://github.com/Rel1cx/eslint-react/releases/tag/v1.52.7) where the `react-hooks-extra` rules were not exported, closes #1207 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1208](https://github.com/Rel1cx/eslint-react/pull/1208)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.8...v1.52.9](https://github.com/Rel1cx/eslint-react/compare/v1.52.8...v1.52.9)

## v1.52.8 (2025-08-29) [#v1528-2025-08-29]

### 🐞 Fixes [#-fixes-98]

* fix: restore ESLint legacy config compatibility, closes #1203 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1204](https://github.com/Rel1cx/eslint-react/pull/1204)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.7...v1.52.8](https://github.com/Rel1cx/eslint-react/compare/v1.52.7...v1.52.8)

## v1.52.7 (2025-08-29) [#v1527-2025-08-29]

### 🐞 Fixes [#-fixes-99]

* fix: add ESLint compatibility types and update plugins exports, closes #1200 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/commit/f3083c78f680d486f8894532b7714d1bdf8f9cd7](https://github.com/Rel1cx/eslint-react/commit/f3083c78f680d486f8894532b7714d1bdf8f9cd7)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.6...v1.52.7](https://github.com/Rel1cx/eslint-react/compare/v1.52.6...v1.52.7)

## v1.52.6 (2025-08-18) [#v1526-2025-08-18]

### 🐞 Fixes [#-fixes-100]

* fix: correct logic in `naming-convention/component-name` validation to continue on valid names, closes #1176 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1177](https://github.com/Rel1cx/eslint-react/pull/1177)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.5...v1.52.6](https://github.com/Rel1cx/eslint-react/compare/v1.52.5...v1.52.6)

## v1.52.5 (2025-08-15) [#v1525-2025-08-15]

### 🐞 Fixes [#-fixes-101]

* fix: refactor `is-from-react` utility in `debug/is-from-react` rule and improve `no-forward-ref` rule autofix handling, closes #1172 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1173](https://github.com/Rel1cx/eslint-react/pull/1173)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.4...v1.52.5](https://github.com/Rel1cx/eslint-react/compare/v1.52.4...v1.52.5)

## v1.52.4 (2025-08-13) [#v1524-2025-08-13]

### 🐞 Fixes [#-fixes-102]

* fix: improve logic for detecting significant children in JSX elements, closes #1163 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1165](https://github.com/Rel1cx/eslint-react/pull/1165)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.3...v1.52.4](https://github.com/Rel1cx/eslint-react/compare/v1.52.3...v1.52.4)

## v1.52.3 (2025-07-13) [#v1523-2025-07-13]

### 🐞 Fixes [#-fixes-103]

* fix: remove `bun` engine requirement from `package.json` files, closes #1157 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1158](https://github.com/Rel1cx/eslint-react/pull/1158)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.2...v1.52.3](https://github.com/Rel1cx/eslint-react/compare/v1.52.2...v1.52.3)

## v1.52.2 (2025-06-12) [#v1522-2025-06-12]

### 🐞 Fixes [#-fixes-104]

* fix: `no-default-props` should report only function components, closes #1131 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/commit/681b10a7873e4764336a9e7a49dfd33c8bf1fbef](https://github.com/Rel1cx/eslint-react/commit/681b10a7873e4764336a9e7a49dfd33c8bf1fbef)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.52.1...v1.52.2](https://github.com/Rel1cx/eslint-react/compare/v1.52.1...v1.52.2)

## v1.52.1 (2025-06-11) [#v1521-2025-06-11]

### ✨ New [#-new-51]

* feat: add autofix for `no-missing-context-display-name` by @k-yle in [https://github.com/Rel1cx/eslint-react/pull/1128](https://github.com/Rel1cx/eslint-react/pull/1128)

### New Contributors [#new-contributors-13]

* @k-yle made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1128](https://github.com/Rel1cx/eslint-react/pull/1128)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.51.3...v1.52.1](https://github.com/Rel1cx/eslint-react/compare/v1.51.3...v1.52.1)

## v1.51.3 (2025-06-09) [#v1513-2025-06-09]

### 🐞 Fixes [#-fixes-105]

* fix: update messages for `jsx-no-iife` and `jsx-uses-vars` rules by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1127](https://github.com/Rel1cx/eslint-react/pull/1127)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.51.2...v1.51.3](https://github.com/Rel1cx/eslint-react/compare/v1.51.2...v1.51.3)

## v1.51.2 (2025-06-08) [#v1512-2025-06-08]

### 🐞 Fixes [#-fixes-106]

* fix: skip function components without name in `prefer-read-only-props` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1125](https://github.com/Rel1cx/eslint-react/pull/1125)

### 🪄 Improvements [#-improvements-50]

* docs: update references from 'Language Config' to 'Project Config' across documentation by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1126](https://github.com/Rel1cx/eslint-react/pull/1126)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.51.1...v1.51.2](https://github.com/Rel1cx/eslint-react/compare/v1.51.1...v1.51.2)

## v1.51.1 (2025-06-06) [#v1511-2025-06-06]

### 🐞 Fixes [#-fixes-107]

* fix: fixed jsx detection method not respect SkipEmptyArray hint, closes #1122 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1124](https://github.com/Rel1cx/eslint-react/pull/1124)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.51.0...v1.51.1](https://github.com/Rel1cx/eslint-react/compare/v1.51.0...v1.51.1)

## v1.51.0 (2025-06-03) [#v1510-2025-06-03]

### ✨ New [#-new-52]

* feat(react-x): add `jsx-no-iife` rule, closes #1112 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1113](https://github.com/Rel1cx/eslint-react/pull/1113)

### 🐞 Fixes [#-fixes-108]

* fix: fixed `no-direct-set-state-in-use-effect` deferred setState calls detection, closes #1117 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1119](https://github.com/Rel1cx/eslint-react/pull/1119)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.50.0...v1.51.0](https://github.com/Rel1cx/eslint-react/compare/v1.50.0...v1.51.0)

## v1.50.0 (2025-05-25) [#v1500-2025-05-25]

### 🐞 Fixes [#-fixes-109]

* fix: `polymorphicPropName` not work with `no-void-elements-with-children` by @huynhducduy in [https://github.com/Rel1cx/eslint-react/pull/1108](https://github.com/Rel1cx/eslint-react/pull/1108)
* fix: use stable version `zod`, closes #1110

### New Contributors [#new-contributors-14]

* @huynhducduy made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/1108](https://github.com/Rel1cx/eslint-react/pull/1108)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.49.0...v1.50.0](https://github.com/Rel1cx/eslint-react/compare/v1.49.0...v1.50.0)

## v1.49.0 (2025-05-05) [#v1490-2025-05-05]

### ✨ New [#-new-53]

* feat: add `jsx-key-before-spread`, closes #1093, closes #1087 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1105](https://github.com/Rel1cx/eslint-react/pull/1105)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.48.5...v1.49.0](https://github.com/Rel1cx/eslint-react/compare/v1.48.5...v1.49.0)

## v1.48.5 (2025-04-25) [#v1485-2025-04-25]

### 🐞 Fixes [#-fixes-110]

* fix: fixed named export 'JsxEmit' not found, closes #1095 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1096](https://github.com/Rel1cx/eslint-react/pull/1096)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.48.4...v1.48.5](https://github.com/Rel1cx/eslint-react/compare/v1.48.4...v1.48.5)

## v1.48.4 (2025-04-19) [#v1484-2025-04-19]

### 🐞 Fixes [#-fixes-111]

* fix: update fallback react version in settings to "19.1.0"

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.48.3...v1.48.4](https://github.com/Rel1cx/eslint-react/compare/v1.48.3...v1.48.4)

## v1.48.3 (2025-04-17) [#v1483-2025-04-17]

### 🪄 Improvements [#-improvements-51]

* refactor: improve settings handling by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1080](https://github.com/Rel1cx/eslint-react/pull/1080)
* docs: add more examples to `web-api/no-leaked-event-listener` docs by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1082](https://github.com/Rel1cx/eslint-react/pull/1082)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.48.2...v1.48.3](https://github.com/Rel1cx/eslint-react/compare/v1.48.2...v1.48.3)

## v1.48.2 (2025-04-16) [#v1482-2025-04-16]

### 🐞 Fixes [#-fixes-112]

* fix: could not find `hooks-extra/no-direct-set-state-in-use-effect` in plugin `react-hooks-extra`, closes #1077 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1078](https://github.com/Rel1cx/eslint-react/pull/1078)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.48.1...v1.48.2](https://github.com/Rel1cx/eslint-react/compare/v1.48.1...v1.48.2)

## v1.48.1 (2025-04-16) [#v1481-2025-04-16]

### 🐞 Fixes [#-fixes-113]

* fix: rewrite react api detection to better align with `eslint-plugin-react-hook` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1074](https://github.com/Rel1cx/eslint-react/pull/1074)
* fix: use preferred loc in error maker in `hooks-extra/no-unnecessary-use-prefix` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1073](https://github.com/Rel1cx/eslint-react/pull/1073)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.47.4...v1.48.0](https://github.com/Rel1cx/eslint-react/compare/v1.47.4...v1.48.0)

## v1.47.4 (2025-04-15) [#v1474-2025-04-15]

### 🐞 Fixes [#-fixes-114]

* fix: update `hooks-extra/no-unnecessary-use-prefix` to skip well-known hooks like `useMDXComponents` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1072](https://github.com/Rel1cx/eslint-react/pull/1072)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.47.3...v1.47.4](https://github.com/Rel1cx/eslint-react/compare/v1.47.3...v1.47.4)

## v1.47.3 (2025-04-15) [#v1473-2025-04-15]

### 🐞 Fixes [#-fixes-115]

* fix: fixed potential false negatives in `no-leaked-conditional-rendering` when logical expressions are wrapped by type expressions by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1068](https://github.com/Rel1cx/eslint-react/pull/1068)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.47.2...v1.47.3](https://github.com/Rel1cx/eslint-react/compare/v1.47.2...v1.47.3)

## v1.47.2 (2025-04-14) [#v1472-2025-04-14]

### 🐞 Fixes [#-fixes-116]

* fix: use smaller error marker range to reduce visual noise by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1064](https://github.com/Rel1cx/eslint-react/pull/1064)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.47.1...v1.47.2](https://github.com/Rel1cx/eslint-react/compare/v1.47.1...v1.47.2)

## v1.47.1 (2025-04-14) [#v1471-2025-04-14]

### 🐞 Fixes [#-fixes-117]

* fix: better debug rules message formatting by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1062](https://github.com/Rel1cx/eslint-react/pull/1062)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.47.0...v1.47.1](https://github.com/Rel1cx/eslint-react/compare/v1.47.0...v1.47.1)

## v1.47.0 (2025-04-14) [#v1470-2025-04-14]

### 🪄 Improvements [#-improvements-52]

* refactor: remove `@eslint-react/jsx` package and move functionality to `@eslint-react/core` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1060](https://github.com/Rel1cx/eslint-react/pull/1060)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.46.0...v1.47.0](https://github.com/Rel1cx/eslint-react/compare/v1.46.0...v1.47.0)

## v1.46.0 (2025-04-13) [#v1460-2025-04-13]

### ✨ New [#-new-54]

* feat: use json for diagnostic output format of debug rules by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1058](https://github.com/Rel1cx/eslint-react/pull/1058)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.45.3...v1.45.4](https://github.com/Rel1cx/eslint-react/compare/v1.45.3...v1.45.4)

## v1.45.4 (2025-04-13) [#v1454-2025-04-13]

### 🪄 Improvements [#-improvements-53]

* perf: replace `Map` with `WeakMap` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1057](https://github.com/Rel1cx/eslint-react/pull/1057)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.45.3...v1.45.4](https://github.com/Rel1cx/eslint-react/compare/v1.45.3...v1.45.4)

## v1.45.3 (2025-04-12) [#v1453-2025-04-12]

### 🪄 Improvements [#-improvements-54]

* pref: replace `picomatch.makeRe` with `RE.toRegExp` for pattern matching by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1055](https://github.com/Rel1cx/eslint-react/pull/1055)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.45.2...v1.45.3](https://github.com/Rel1cx/eslint-react/compare/v1.45.2...v1.45.3)

## v1.45.2 (2025-04-12) [#v1452-2025-04-12]

### 🪄 Improvements [#-improvements-55]

* docs: add table of contents to the README by @Rel1cx in [https://github.com/Rel1cx/eslint-react/commit/b880cb95d2245f7034f47e883d944c9a8b4ecf5f](https://github.com/Rel1cx/eslint-react/commit/b880cb95d2245f7034f47e883d944c9a8b4ecf5f)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.45.1...v1.45.2](https://github.com/Rel1cx/eslint-react/compare/v1.45.1...v1.45.2)

## v1.45.1 (2025-04-12) [#v1451-2025-04-12]

### 🐞 Fixes [#-fixes-118]

* fix: fixed `hooks-extra/no-unnecessary-use-prefix` case sensitivity fails, closes #1053 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1054](https://github.com/Rel1cx/eslint-react/pull/1054)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.45.0...v1.45.1](https://github.com/Rel1cx/eslint-react/compare/v1.45.0...v1.45.1)

## v1.45.0 (2025-04-11) [#v1450-2025-04-11]

### ✨ New [#-new-55]

* feat: add `no-misused-capture-owner-stack` rule, closes #1049 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1047](https://github.com/Rel1cx/eslint-react/pull/1047)
* feat: add `no-nested-lazy-component-declarations` rule, closes #1048 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1052](https://github.com/Rel1cx/eslint-react/pull/1052)
* feat: add `no-nested-lazy-component-declarations` rule to recommended presets by @Rel1cx

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.44.0...v1.45.0](https://github.com/Rel1cx/eslint-react/compare/v1.44.0...v1.45.0)

## v1.44.0 (2025-04-11) [#v1440-2025-04-11]

### ✨ New [#-new-56]

* feat: add JSX fragment factory to error message of `avoid-shorthand-fragment` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1051](https://github.com/Rel1cx/eslint-react/pull/1051)

### 🪄 Improvements [#-improvements-56]

* perf: replace `valibot` with `@zod/mini` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1050](https://github.com/Rel1cx/eslint-react/pull/1050)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.43.0...v1.44.0](https://github.com/Rel1cx/eslint-react/compare/v1.43.0...v1.44.0)

## v1.43.0 (2025-04-10) [#v1430-2025-04-10]

### ✨ New [#-new-57]

* feat: add codemod feature to `no-string-refs`, closes #1044 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1045](https://github.com/Rel1cx/eslint-react/pull/1045)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.42.1...v1.43.0](https://github.com/Rel1cx/eslint-react/compare/v1.42.1...v1.43.0)

## v1.42.1 (2025-04-08) [#v1421-2025-04-08]

### ✨ New [#-new-58]

* feat: rename `core` preset to `x` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1042](https://github.com/Rel1cx/eslint-react/pull/1042)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-9]

The following presets have been renamed:

* `core` to `x`
* `core-legacy` to `x-legacy`

The old preset names will still be available until the next major update to avoid breaking changes.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.41.0...v1.42.1](https://github.com/Rel1cx/eslint-react/compare/v1.41.0...v1.42.1)

## v1.41.0 (2025-04-08) [#v1410-2025-04-08]

### ✨ New [#-new-59]

* feat: add `debug/jsx` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1041](https://github.com/Rel1cx/eslint-react/pull/1041)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.40.4...1.41.0](https://github.com/Rel1cx/eslint-react/compare/v1.40.4...1.41.0)

## v1.40.4 (2025-04-07) [#v1404-2025-04-07]

### 🐞 Fixes [#-fixes-119]

* fix: refactor JSX runtime annotation handling by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1038](https://github.com/Rel1cx/eslint-react/pull/1038)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.40.3...v1.40.4](https://github.com/Rel1cx/eslint-react/compare/v1.40.3...v1.40.4)

## v1.40.3 (2025-04-04) [#v1403-2025-04-04]

### 🐞 Fixes [#-fixes-120]

* fix: fixed `no-useless-fragment` false positive when using `&nbsp;`, closes #1035 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1036](https://github.com/Rel1cx/eslint-react/pull/1036)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.40.2...v1.40.3](https://github.com/Rel1cx/eslint-react/compare/v1.40.2...v1.40.3)

## v1.40.2 (2025-04-03) [#v1402-2025-04-03]

### 🐞 Fixes [#-fixes-121]

* fix(react-x): fixed `jsx-uses-react` rule for `preserve` mode by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1031](https://github.com/Rel1cx/eslint-react/pull/1031)
* fix: use initial release year and consistent username in LICENSE by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1032](https://github.com/Rel1cx/eslint-react/pull/1032)

### 🪄 Improvements [#-improvements-57]

* refactor(kit): simplify `LanguagePreferenceSchema` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1033](https://github.com/Rel1cx/eslint-react/pull/1033)
* refactor(website): reorganize CSS and improve theme by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1034](https://github.com/Rel1cx/eslint-react/pull/1034)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.40.1...v1.40.2](https://github.com/Rel1cx/eslint-react/compare/v1.40.1...v1.40.2)

## v1.40.1 (2025-04-01) [#v1401-2025-04-01]

### ✨ New [#-new-60]

* feat(react-x): enhance `jsx-uses-react` rule to support `@jsx` and `@jsxFrag` annotation comments by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1029](https://github.com/Rel1cx/eslint-react/pull/1029)
* feat(kit): add `LanguagePreference` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1028](https://github.com/Rel1cx/eslint-react/pull/1028)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.40.0...v1.40.1](https://github.com/Rel1cx/eslint-react/compare/v1.40.0...v1.40.1)

## v1.40.0 (2025-04-01) [#v1400-2025-04-01]

### ✨ New [#-new-61]

* feat(react-x): add `jsx-uses-react` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1027](https://github.com/Rel1cx/eslint-react/pull/1027)
* feat: enable `jsx-uses-react` rule in recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1027](https://github.com/Rel1cx/eslint-react/pull/1027)
* feat: enable `naming-convention/context-name` rule in recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1024](https://github.com/Rel1cx/eslint-react/pull/1024)
* feat(kit): add `JsxRuntime` module by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1025](https://github.com/Rel1cx/eslint-react/pull/1025)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.38.4...v1.40.0](https://github.com/Rel1cx/eslint-react/compare/v1.38.4...v1.40.0)

## v1.38.4 (2025-03-29) [#v1384-2025-03-29]

### 🪄 Improvements [#-improvements-58]

* chore: update default React version to 19.1.0 in documentation and settings by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1023](https://github.com/Rel1cx/eslint-react/pull/1023)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.38.3...v1.38.4](https://github.com/Rel1cx/eslint-react/compare/v1.38.3...v1.38.4)

## v1.38.3 (2025-03-28) [#v1383-2025-03-28]

### 🪄 Improvements [#-improvements-59]

* docs: switch back to the original slogan by @Rel1cx in [https://github.com/Rel1cx/eslint-react/commit/e0e4d460c](https://github.com/Rel1cx/eslint-react/commit/e0e4d460c)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.38.2...v1.38.3](https://github.com/Rel1cx/eslint-react/compare/v1.38.2...v1.38.3)

## v1.38.2 (2025-03-27) [#v1382-2025-03-27]

### 🐞 Fixes [#-fixes-122]

* fix(eslint-plugin): disable `prefer-shorthand-*` rules in `all` config by @Rel1cx in [https://github.com/Rel1cx/eslint-react/commit/a9e6ef9f97f968bb9366af3e5b40138fb4b6b679](https://github.com/Rel1cx/eslint-react/commit/a9e6ef9f97f968bb9366af3e5b40138fb4b6b679)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.38.0...v1.38.2](https://github.com/Rel1cx/eslint-react/compare/v1.38.0...v1.38.2)

## v1.38.0 (2025-03-25) [#v1380-2025-03-25]

### ✨ New [#-new-62]

* feat: add `jsx-no-undef` rule, closes #1016 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1018](https://github.com/Rel1cx/eslint-react/pull/1018)
* feat: add `hooks-extra/prefer-use-state-lazy-initialization` rule to recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1019](https://github.com/Rel1cx/eslint-react/pull/1019)
* docs: add experimental status to rules overview by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1012](https://github.com/Rel1cx/eslint-react/pull/1012)

### 🪄 Improvements [#-improvements-60]

* refactor: undeprecate `jsx-uses-vars` and `jsx-no-duplicate-props` rules by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1017](https://github.com/Rel1cx/eslint-react/pull/1017)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.37.3...v1.38.0](https://github.com/Rel1cx/eslint-react/compare/v1.37.3...v1.38.0)

## v1.37.3 (2025-03-22) [#v1373-2025-03-22]

### 🐞 Fixes [#-fixes-123]

* fix: the requested module `ts-api-utils` does not provide an export named `unionConstituents`, closes #1009 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1010](https://github.com/Rel1cx/eslint-react/pull/1010)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.37.2...v1.37.3](https://github.com/Rel1cx/eslint-react/compare/v1.37.2...v1.37.3)

## v1.37.2 (2025-03-22) [#v1372-2025-03-22]

### 🐞 Fixes [#-fixes-124]

* fix: `prefer-read-only-props` false positive using React types, closes #962 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1008](https://github.com/Rel1cx/eslint-react/pull/1008)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.37.1...v1.37.2](https://github.com/Rel1cx/eslint-react/compare/v1.37.1...v1.37.2)

## v1.37.1 (2025-03-22) [#v1371-2025-03-22]

### 🐞 Fixes [#-fixes-125]

* fix: enhance `hooks-extra/prefer-use-state-lazy-initialization` to correctly detect other hooks called within `useState(...)` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1006](https://github.com/Rel1cx/eslint-react/pull/1006)

### 🪄 Improvements [#-improvements-61]

* docs: improve rule description and error message by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1003](https://github.com/Rel1cx/eslint-react/pull/1003) and [https://github.com/Rel1cx/eslint-react/pull/1007](https://github.com/Rel1cx/eslint-react/pull/1007)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.37.0...v1.37.1](https://github.com/Rel1cx/eslint-react/compare/v1.37.0...v1.37.1)

## v1.37.0 (2025-03-20) [#v1370-2025-03-20]

### 🪄 Improvements [#-improvements-62]

* refactor: remove `hooks-extra/prefer-use-state-lazy-initialization` from recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1001](https://github.com/Rel1cx/eslint-react/pull/1001)
  > Based on feedback of this rule, the current implementation produces more false positives than expected, so to ensure the overall quality of the rules in the recommended presets we provide, I'm removing it from the presets for now, and should add it back after we implement a better heuristic for deciding which function calls should be allowed.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.36.3...v1.37.0](https://github.com/Rel1cx/eslint-react/compare/v1.36.3...v1.37.0)

## v1.36.3 (2025-03-20) [#v1363-2025-03-20]

### 🐞 Fixes [#-fixes-126]

* fix: `hooks-extra/prefer-use-state-lazy-initialization` false positive on `useState(use(promise))` closes #999 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/1000](https://github.com/Rel1cx/eslint-react/pull/1000)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.36.2...v1.36.3](https://github.com/Rel1cx/eslint-react/compare/v1.36.2...v1.36.3)

## v1.36.2 (2025-03-20) [#v1362-2025-03-20]

No notable changes have been made in this release.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.36.1...v1.36.2](https://github.com/Rel1cx/eslint-react/compare/v1.36.1...v1.36.2)

## v1.36.1 (2025-03-19) [#v1361-2025-03-19]

### 🪄 Improvements [#-improvements-63]

* refactor(naming-convention/use-state): enhance error messaging and docs, closes #980 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/997](https://github.com/Rel1cx/eslint-react/pull/997)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.35.0...v1.36.1](https://github.com/Rel1cx/eslint-react/compare/v1.35.0...v1.36.1)

## v1.35.0 (2025-03-18) [#v1350-2025-03-18]

### ✨ New [#-new-63]

* feat(plugins/dom): add `no-render` rule to replace `ReactDOM.render()` with `createRoot(node).render()`, closes #972 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/993](https://github.com/Rel1cx/eslint-react/pull/993)
* feat(plugins/dom): add `no-hydrate` rule to replace `ReactDOM.hydrate()` with `hydrateRoot()`, closes #973 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/995](https://github.com/Rel1cx/eslint-react/pull/995)

### 🪄 Improvements [#-improvements-64]

* refactor: rename `hooks-extra/no-useless-custom-hooks` to `hooks-extra/no-unnecessary-use-prefix` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/996](https://github.com/Rel1cx/eslint-react/pull/996)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-10]

The following rules have been renamed:

* `hooks-extra/no-useless-custom-hooks` to `hooks-extra/no-unnecessary-use-prefix`
* `@eslint-react/hooks-extra/no-useless-custom-hooks` to `@eslint-react/hooks-extra/no-unnecessary-use-prefix`

The old rule names will still be available until the next major update to avoid breaking changes.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.34.1...v1.35.0](https://github.com/Rel1cx/eslint-react/compare/v1.34.1...v1.35.0)

## v1.34.1 (2025-03-15) [#v1341-2025-03-15]

### 🐞 Fixes [#-fixes-127]

* fix: false positive in `no-context-provider` on symbols named `Provider` which are imported from third-party libs, closes #991 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/992](https://github.com/Rel1cx/eslint-react/pull/992)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.34.0...v1.34.1](https://github.com/Rel1cx/eslint-react/compare/v1.34.0...v1.34.1)

## v1.34.0 (2025-03-15) [#v1340-2025-03-15]

### 🪄 Improvements [#-improvements-65]

* refactor: export the create function of each rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/989](https://github.com/Rel1cx/eslint-react/pull/989)
* refactor(plugins/x): rename `no-nested-components` rule to `no-nested-component-definitions` and update related docs by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/990](https://github.com/Rel1cx/eslint-react/pull/990)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-11]

The following rules have been renamed:

* `no-nested-components` to `no-nested-component-definitions`
* `@eslint-react/no-nested-components` to `@eslint-react/no-nested-component-definitions`

The old rule names will still be available until the next major update to avoid breaking changes.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.33.0...v1.34.0](https://github.com/Rel1cx/eslint-react/compare/v1.33.0...v1.34.0)

## v1.33.0 (2025-03-14) [#v1330-2025-03-14]

### 🐞 Fixes [#-fixes-128]

* fix: update rule severity for `no-flush-sync` and `no-void-elements-with-children` in recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/988](https://github.com/Rel1cx/eslint-react/pull/988)

### 🪄 Improvements [#-improvements-66]

* refactor(plugins/x): rename `ensure-forward-ref-using-ref` to `no-useless-forward-ref` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/987](https://github.com/Rel1cx/eslint-react/pull/987)

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-12]

The following rules have been renamed:

* `ensure-forward-ref-using-ref` to `no-useless-forward-ref`
* `@eslint-react/ensure-forward-ref-using-ref` to `@eslint-react/no-useless-forward-ref`

The old rule names will still be available until the next major update to avoid breaking changes.

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.32.1...v1.33.0](https://github.com/Rel1cx/eslint-react/compare/v1.32.1...v1.33.0)

## v1.32.1 (2025-03-13) [#v1321-2025-03-13]

### 🐞 Fixes [#-fixes-129]

* fix: fixed `no-context-provider` replaces `<Provider>` with `<>`, closes #984 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/985](https://github.com/Rel1cx/eslint-react/pull/985)

## v1.32.0 (2025-03-12) [#v1320-2025-03-12]

### ✨ New [#-new-64]

* feat: revert 'feat: add naming-convention/use-state and naming-convention/context-name to recommended presets by @Rel1cx in #956' by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/982](https://github.com/Rel1cx/eslint-react/pull/982)

### 🪄 Improvements [#-improvements-67]

* docs: update eslint configs in examples to use extends by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/978](https://github.com/Rel1cx/eslint-react/pull/978)
* docs: update ts configs in examples to use project references by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/979](https://github.com/Rel1cx/eslint-react/pull/979)

## v1.31.0 (2025-03-07) [#v1310-2025-03-07]

### ✨ New [#-new-65]

* feat: enhance regex handling in naming convention rules by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/969](https://github.com/Rel1cx/eslint-react/pull/969)

### 🪄 Improvements [#-improvements-68]

* docs: improve rules descriptions by @Rel1cx

## v1.30.2 (2025-03-05) [#v1302-2025-03-05]

### 🐞 Fixes [#-fixes-130]

* fix(plugins/hooks-extra): misidentification of `set` function in IIFE inside of hooks as its inside of `useEffect`, `useLayoutEffect`, closes [#967](https://github.com/Rel1cx/eslint-react/issues/967) by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/968](https://github.com/Rel1cx/eslint-react/pull/968)

## v1.30.1 (2025-03-04) [#v1301-2025-03-04]

### 🐞 Fixes [#-fixes-131]

* fix(utilities/var): fix variable init node retrieval, fixes [#964](https://github.com/Rel1cx/eslint-react/pull/964) by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/965](https://github.com/Rel1cx/eslint-react/pull/965)

### 🪄 Improvements [#-improvements-69]

* refactor(plugins/hooks-extra): improve code reusability by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/963](https://github.com/Rel1cx/eslint-react/pull/963)

### New Contributors [#new-contributors-15]

* @mrginglymus made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/964](https://github.com/Rel1cx/eslint-react/pull/964)

## v1.30.0 (2025-03-03) [#v1300-2025-03-03]

### ✨ New [#-new-66]

* feat: add `naming-convention/use-state` and `naming-convention/context-name` to recommended presets by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/956](https://github.com/Rel1cx/eslint-react/pull/956)

### 🐞 Fixes [#-fixes-132]

* fix: correct readonly checks and test cases in `prefer-read-only-props` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/957](https://github.com/Rel1cx/eslint-react/pull/957)
* fix: rework `naming-convention/component-name` rule to follow [eslint-plugin-react-hooks@5.0](https://github.com/facebook/react/releases/tag/eslint-plugin-react-hooks%405.0.0) by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/959](https://github.com/Rel1cx/eslint-react/pull/959)
  > Component names now need to start with an uppercase letter instead of a non-lowercase letter. This means `_Button` or `_component` are no longer valid.
* fix: `naming-convention/use-state` fails with multiple words, closes #960 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/961](https://github.com/Rel1cx/eslint-react/pull/961)

## v1.29.0 (2025-03-01) [#v1290-2025-03-01]

### ✨ New [#-new-67]

* feat(plugins/naming-convention): add `context-name` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/952](https://github.com/Rel1cx/eslint-react/pull/952)

### 🐞 Fixes [#-fixes-133]

* fix: fixed `naming-convention/use-state` works in components only, closes #953 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/954](https://github.com/Rel1cx/eslint-react/pull/954)

### 🪄 Improvements [#-improvements-70]

* docs: use `recommended-typescript` for typescript files by @bluwy in [https://github.com/Rel1cx/eslint-react/pull/949](https://github.com/Rel1cx/eslint-react/pull/949)

### New Contributors [#new-contributors-16]

* @bluwy made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/949](https://github.com/Rel1cx/eslint-react/pull/949)

## v1.28.0 (2025-02-26) [#v1280-2025-02-26]

### ✨ New [#-new-68]

* feat(plugins/dom): add `no-flush-sync` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/942](https://github.com/Rel1cx/eslint-react/pull/942)
* feat: add [`skipImportCheck`](https://eslint-react.xyz/docs/configurations#skipimportcheck) setting by @Rel1cx

### 🪄 Improvements [#-improvements-71]

* refactor: code optimization by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/945](https://github.com/Rel1cx/eslint-react/pull/945)
* refactor: consistent ordering of arguments to context-aware utility functions by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/946](https://github.com/Rel1cx/eslint-react/pull/946)

## v1.27.0 (2025-02-21) [#v1270-2025-02-21]

### ✨ New [#-new-69]

* feat: add presets exports to modular plugins by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/940](https://github.com/Rel1cx/eslint-react/pull/940)
* feat: add `no-missing-context-display-name` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/941](https://github.com/Rel1cx/eslint-react/pull/941)

### 🪄 Improvements [#-improvements-72]

* refactor: improve error messages by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/936](https://github.com/Rel1cx/eslint-react/pull/936) and [https://github.com/Rel1cx/eslint-react/pull/937](https://github.com/Rel1cx/eslint-react/pull/937)
* refactor: add `useEffect` to `additionalHooks` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/938](https://github.com/Rel1cx/eslint-react/pull/938)
* refactor: change severity of `no-duplicate-key` rule from `error` to `warn` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/939](https://github.com/Rel1cx/eslint-react/pull/939)

## v1.26.2 (2025-02-06) [#v1262-2025-02-06]

### 🐞 Fixes [#-fixes-134]

* fix(plugins/x): enhance `no-context-provider` rule to include context name in error messages by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/935](https://github.com/Rel1cx/eslint-react/pull/935)

## v1.26.1 (2025-02-03) [#v1261-2025-02-03]

No notable changes have been made in this release.

## v1.26.0 (2025-01-31) [#v1260-2025-01-31]

### ✨ New [#-new-70]

* feat(plugins/x): add 'no-use-context', closes #930 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/931](https://github.com/Rel1cx/eslint-react/pull/931)

## v1.25.0 (2025-01-27) [#v1250-2025-01-27]

### ✨ New [#-new-71]

* feat(no-useless-fragment): auto fix support, closes #899 by @hyoban in [https://github.com/Rel1cx/eslint-react/pull/926](https://github.com/Rel1cx/eslint-react/pull/926)
* docs: add [setup guide](https://eslint-react.xyz/docs/getting-started/typescript-with-alternative-parser) for `ts-blank-eslint-parser` by @Rel1cx
* docs: add [setup example](https://github.com/Rel1cx/eslint-react/blob/98f3a6ccc83132c2e0a82c0f500dc88dcd1dcfc7/examples/vite-react-dom-with-ts-blank-eslint-parser-app/eslint.config.js) for `ts-blank-eslint-parser` by @Rel1cx

### 🐞 Fixes [#-fixes-135]

* fix(no-forward-ref): loose fix by @hyoban in [https://github.com/Rel1cx/eslint-react/pull/925](https://github.com/Rel1cx/eslint-react/pull/925)

### 🪄 Improvements [#-improvements-73]

* refactor(website): switch from nextra to fumadocs by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/928](https://github.com/Rel1cx/eslint-react/pull/928)

## v1.24.1 (2025-01-22) [#v1241-2025-01-22]

### 🐞 Fixes [#-fixes-136]

* fix: fixed invalid rules for `disable-debug`, `disable-dom`, and `disable-web-apis` configs, closes [https://github.com/Rel1cx/eslint-react/issues/923](https://github.com/Rel1cx/eslint-react/issues/923) by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/924](https://github.com/Rel1cx/eslint-react/pull/924)

## v1.24.0 (2025-01-21) [#v1240-2025-01-21]

### 🪄 Improvements [#-improvements-74]

* perf: overhaul performance optimizations

## v1.23.2 (2025-01-07) [#v1232-2025-01-07]

### ✨ New [#-new-72]

* feat(plugins/x): add auto-fix to `prefer-shorthand-fragment`, closes #898 (#902)

## v1.23.1 (2025-01-03) [#v1231-2025-01-03]

### 🐞 Fixes [#-fixes-137]

* fix(plugins/x): fixed false positives in `no-unstable-context-value` and `no-unstable-default-props` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/896](https://github.com/Rel1cx/eslint-react/pull/896)

## v1.23.0 (2024-12-31) [#v1230-2024-12-31]

### 🪄 Improvements [#-improvements-75]

* refactor: JSX fragments related rules no longer rely on `jsxPragma` and `jsxPragmaFrag` settings to perform their checks by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/893](https://github.com/Rel1cx/eslint-react/pull/893)
* refactor: improve applicability of the `no-useless-fragment` and `prefer-shorthand-fragment` rules
* refactor: deprecate `settings["react-x"].jsxPragma` and `settings["react-x"].jsxPragmaFrag` as they are no longer needed by any rules
* refactor: replace `short-unique-id` w/ `uid` by @SukkaW in [https://github.com/Rel1cx/eslint-react/pull/894](https://github.com/Rel1cx/eslint-react/pull/894)

### 🐞 Fixes [#-fixes-138]

* fix(plugins/hooks-extra): fix `call` and `new` expression related false positives in `no-unnecessary-use-memo` and `no-unnecessary-use-callback` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/895](https://github.com/Rel1cx/eslint-react/pull/895)

## v1.22.2 (2024-12-30) [#v1222-2024-12-30]

### 🪄 Improvements [#-improvements-76]

* perf: re-implement `no-duplicate-key` rule to improve its performance @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/891](https://github.com/Rel1cx/eslint-react/pull/891) and [33ab3cc](https://github.com/Rel1cx/eslint-react/commit/33ab3cc6ca11bf8412e07efa35f640dfbad77f6e)
* refactor: prevent potential interference from TypeScript's `as`, `satisfies`, and non-null assertion operator in various rules

## v1.22.1 (2024-12-24) [#v1221-2024-12-24]

### 🪄 Improvements [#-improvements-77]

* docs: add getting started guides for JavaScript, TypeScript, and JavaScript with Babel
* docs: improve code samples in rules docs
* docs: improve `eslint.config.js` examples in README.md, docs and the examples folder
* docs: improve the error message and description of various rules
* refactor(website): better website layout and navigation experience

### 📝 Changes in examples [#-changes-in-examples]

The `eslint.config.js` in the examples now uses `tsconfig`'s `includes` and `excludes` as the SSoT glob patterns for ESLint's `files` and `ignores` fields.

This approach can fundamentally avoid the errors\[[1](https://typescript-eslint.io/troubleshooting/typed-linting/#i-get-errors-telling-me-the-file-must-be-included-in-at-least-one-of-the-projects-provided), [2](https://typescript-eslint.io/troubleshooting/typed-linting/#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file), [3](https://typescript-eslint.io/troubleshooting/typed-linting/#i-get-errors-telling-me--was-not-found-by-the-project-service-consider-either-including-it-in-the-tsconfigjson-or-including-it-in-allowdefaultproject)] caused by mismatched config scopes between `tsconfig.json` and `eslint.config.js` when using type-checked rules.

## v1.22.0 (2024-12-22) [#v1220-2024-12-22]

### 🪄 Improvements [#-improvements-78]

* refactor(plugins/x): rename `jsx-use-vars` to `use-jsx-vars`
* refactor(plugins/x): rename `jsx-no-duplicate-props` to `no-duplicate-jsx-props`
* refactor(plugins/dom): rename `no-children-in-void-dom-elements` to `no-void-elements-with-children`

### 📝 Changes you should be aware of [#-changes-you-should-be-aware-of-13]

The following rules have been renamed:

* `jsx-uses-vars` to `use-jsx-vars`
* `jsx-no-duplicate-props` to `no-duplicate-jsx-props`
* `dom/no-children-in-void-dom-elements` to `dom/no-void-elements-with-children`

The new rule names are aligned with the same rules in the [biomejs/rules-sources/#eslint-plugin-react](https://biomejs.dev/linter/rules-sources/#eslint-plugin-react) (if any) to enhance consistency. The old rule names will still be available until the next major update to avoid breaking changes.

## v1.21.0 (2024-12-20) [#v1210-2024-12-20]

### ✨ New [#-new-73]

* feat(plugins/hooks-extra): add `no-useless-custom-hooks` rule by @Rel1cx

### 🪄 Improvements [#-improvements-79]

* refactor(plugins/hooks-extra): deprecate rule `no-redundant-custom-hook` in favor of `no-useless-custom-hooks` (the previous rule will still be available until the next major update to avoid breaking changes)

### 📝 Changes in Rule implementation [#-changes-in-rule-implementation]

`no-useless-custom-hooks` now detects Hook calls within comments and the following code no longer triggers a warning:

```tsx
// ✅ Good: A Hook that will likely use some other Hooks later
function useAuth() {
  // TODO: Replace with this line when authentication is implemented:
  // return useContext(Auth);
  return TEST_USER;
}
```

## v1.20.1 (2024-12-18) [#v1201-2024-12-18]

### 🪄 Improvements [#-improvements-80]

* refactor(shared): replace `local-pkg` package with node built-in API by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/881](https://github.com/Rel1cx/eslint-react/pull/881)

## v1.20.0 (2024-12-16) [#v1200-2024-12-16]

### ✨ New [#-new-74]

* feat(plugins/x): add codemod-autofix to `no-component-will-*` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/879](https://github.com/Rel1cx/eslint-react/pull/879)

### 🪄 Improvements [#-improvements-81]

* refactor: use default settings when no settings are provided in `settings["react-x"]` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/commit/40ca3bd1cd7adc44f40841b5b4635e0200b73a54](https://github.com/Rel1cx/eslint-react/commit/40ca3bd1cd7adc44f40841b5b4635e0200b73a54)
* docs: update `no-context-provider.mdx` by @danielrentz in [https://github.com/Rel1cx/eslint-react/pull/877](https://github.com/Rel1cx/eslint-react/pull/877)
* docs: add 'Min. React' column to rules overview page by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/880](https://github.com/Rel1cx/eslint-react/pull/880)
* docs: add features section to rules overview page by @Rel1cx

### New Contributors [#new-contributors-17]

* @danielrentz made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/877](https://github.com/Rel1cx/eslint-react/pull/877)

## v1.19.0 (2024-12-10) [#v1190-2024-12-10]

### ✨ New [#-new-75]

* feat(plugins/x): add `no-context-provider` rule by @Rel1cx
* feat(plugins/x): add autofix for `no-forward-ref` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/874](https://github.com/Rel1cx/eslint-react/pull/874)
* feat(plugins/eslint-plugin): add `no-forward-ref` and `no-context-provider` to recommended presets by @Rel1cx

### 🪄 Improvements [#-improvements-82]

* refactor(plugins/eslint-plugin): remove `prefer-read-only-props` from `recommended-type-checked` preset by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/872](https://github.com/Rel1cx/eslint-react/pull/872)
* refactor(plugins/eslint-plugin): hide `avoid-shorthand-boolean` and `avoid-shorthand-fragment` from presets and docs by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/876](https://github.com/Rel1cx/eslint-react/pull/876)
* Update `@typescript-eslint`'s packages to `^8.18.0`

## v1.18.0 (2024-12-08) [#v1180-2024-12-08]

### ✨ New [#-new-76]

* feat(plugins/x): add `no-forward-ref` rule by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/870](https://github.com/Rel1cx/eslint-react/pull/870)

### 🪄 Improvements [#-improvements-83]

* perf(plugins/dom): improve performance of `no-void-elements-with-children` by @Rel1cx

## v1.17.3 (2024-12-03) [#v1173-2024-12-03]

### 🐞 Fixes [#-fixes-139]

* fix(plugins/web-api): add 'forEach' support to 'no-leaked-event-listener', closes #842 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/867](https://github.com/Rel1cx/eslint-react/pull/867)
* fix(plugins/web-api): add 'for of' support to 'no-leaked-event-listener', closes #842 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/869](https://github.com/Rel1cx/eslint-react/pull/869)
* fix(plugins/x): 'no-array-index-key' mistaking 'foo.bar.map' for 'Rea… by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/868](https://github.com/Rel1cx/eslint-react/pull/868)

### 🪄 Improvements [#-improvements-84]

* Update `@typescript-eslint`'s packages to `^8.17.0`

## v1.17.2 (2024-12-01) [#v1172-2024-12-01]

### 🪄 Improvements [#-improvements-85]

* Update `eslint`'s packages to `^9.16.0`
* Update `@typescript-eslint`'s packages to `^8.16.0`
* Update `ts-api-utils` to `^2.0.0`

## v1.17.1 (2024-11-22) [#v1171-2024-11-22]

### ✨ New [#-new-77]

* feat(shared): add version detection logic;

### 🐞 Fixes [#-fixes-140]

* fix(plugins/x): 'no-leaked-conditional-rendering' should also warn 'anyStringVar' when react version is lower than 18, closes #853 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/864](https://github.com/Rel1cx/eslint-react/pull/864)
* fix(plugins/dom): add popover api props to 'no-unknown-property', closes #855 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/865](https://github.com/Rel1cx/eslint-react/pull/865)
* fix(plugins/debug): 'is-from-react' use correct settings when calling 'isInitializedFromReact', by @Rel1cx

## v1.17.0 (2024-11-21) [#v1170-2024-11-21]

### ✨ New [#-new-78]

* feat(plugins/naming-convention): add 'ignoreFilesWithoutCode' option to 'filename-extension'

### 🐞 Fixes [#-fixes-141]

* refactor(plugins/x): xhtml entities should be allowed inside of 'no-useless-fragment', closes: #850
* fix(plugins/eslint-plugin): unexpected top-level property 'name' in legacy presets, closes #863
* fix(plugins/eslint-plugin): rules list in 'debug' and 'disable-debug' presets

## v1.16.2 (2024-11-20) [#v1162-2024-11-20]

### 🐞 Fixes [#-fixes-142]

* fix(plugins/x): 'no-leaked-conditional-rendering' report empty string, closes #853 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/857](https://github.com/Rel1cx/eslint-react/pull/857)

### 🪄 Improvements [#-improvements-86]

* refactor: update the default behavior of import check, closes #858 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/860](https://github.com/Rel1cx/eslint-react/pull/860)

## v1.16.1 (2024-11-10) [#v1161-2024-11-10]

### ✨ New [#-new-79]

* feat(plugins/x): add `jsx-no-duplicate-props` by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/851](https://github.com/Rel1cx/eslint-react/pull/851)

### 🪄 Improvements [#-improvements-87]

* docs: use correct link for `prefer-react-namespace-import` in rule list by @rakleed in [https://github.com/Rel1cx/eslint-react/pull/849](https://github.com/Rel1cx/eslint-react/pull/849)

## v1.16.0 (2024-11-01) [#v1160-2024-11-01]

### ✨ New [#-new-80]

* feat(plugins/react-x): add `jsx-uses-vars`, closes #834 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/845](https://github.com/Rel1cx/eslint-react/pull/845)
* feat(plugins/react-dom): add `no-unknown-property`, closes #846 by @Rel1cx
* feat: add `recommended-typescript` and `recommended-typescript-legacy` presets by @Rel1cx

### 🪄 Improvements [#-improvements-88]

* Update `@typescript-eslint`'s packages to `^8.12.2`

## v1.15.2 (2024-10-29) [#v1152-2024-10-29]

### 🪄 Improvements [#-improvements-89]

* Update `@typescript-eslint`'s packages to `^8.12.1`

## v1.15.1 (2024-10-26) [#v1151-2024-10-26]

### ✨ New [#-new-81]

* feat: added code fixer to `avoid-shorthand-boolean` and `prefer-shorthand-fragment` by @Rel1cx

### 🐞 Fixes [#-fixes-143]

* fix(plugins/react-x): respect semicolon by @hyoban in [https://github.com/Rel1cx/eslint-react/pull/841](https://github.com/Rel1cx/eslint-react/pull/841)
* fix(utilities/ast): added missing ts `as` and `satisfies` expressions handling to `getFunctionIdentifier` by @Rel1cx , closes [https://github.com/Rel1cx/eslint-react/issues/843](https://github.com/Rel1cx/eslint-react/issues/843)

## v1.15.0 (2024-10-12) [#v1150-2024-10-12]

### ✨ New [#-new-82]

* feat: add support for constructors in `hooks-extra/prefer-use-state-lazy-initialization` by @imjordanxd in [https://github.com/Rel1cx/eslint-react/pull/829](https://github.com/Rel1cx/eslint-react/pull/829)
* feat: add `prefer-react-namespace-import`, closes #803 by @imjordanxd in [https://github.com/Rel1cx/eslint-react/pull/832](https://github.com/Rel1cx/eslint-react/pull/832)
* feat: add support for `allowExpressions` in `no-useless-fragment` by @imjordanxd in [https://github.com/Rel1cx/eslint-react/pull/836](https://github.com/Rel1cx/eslint-react/pull/836)

### 🐞 Fixes [#-fixes-144]

* fix: Fix false positives when 'web-api/no-leaked-event-listener' passes a signal to an intermediate variable, closes #838

### 🪄 Improvements [#-improvements-90]

* docs: Update `hooks-extra-no-direct-set-state-in-use-effect.mdx` by @neovov in [https://github.com/Rel1cx/eslint-react/pull/831](https://github.com/Rel1cx/eslint-react/pull/831)
* docs: use a standard mono-width font for the docs, closes #835 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/837](https://github.com/Rel1cx/eslint-react/pull/837)
* Undeprecate `hooks-extra-no-direct-set-state-in-use-layout-effect` and remove it from recommended presets, closes #839 by @Rel1cx in [https://github.com/Rel1cx/eslint-react/pull/840](https://github.com/Rel1cx/eslint-react/pull/840)

### New Contributors [#new-contributors-18]

* @imjordanxd made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/829](https://github.com/Rel1cx/eslint-react/pull/829)
* @neovov made their first contribution in [https://github.com/Rel1cx/eslint-react/pull/831](https://github.com/Rel1cx/eslint-react/pull/831)

**Full Changelog**: [https://github.com/Rel1cx/eslint-react/compare/v1.14.3...v1.15.0](https://github.com/Rel1cx/eslint-react/compare/v1.14.3...v1.15.0)

## v1.14.3 (2024-09-29) [#v1143-2024-09-29]

### 🪄 Improvements [#-improvements-91]

* Update `@typescript-eslint`'s packages to `^8.7.0`

## v1.14.2 (2024-09-20) [#v1142-2024-09-20]

### 🪄 Improvements [#-improvements-92]

* Update `@typescript-eslint`'s packages to `^8.6.0`

## v1.14.1 (2024-09-12) [#v1141-2024-09-12]

### 🐞 Fixes [#-fixes-145]

* Fixed false positives in rule `web-api/no-leaked-resize-observer`

## v1.14.0 (2024-09-10) [#v1140-2024-09-10]

### 🐞 Fixes [#-fixes-146]

* Fixed modular plugins missing default export
* Fixed component name detection when the component name starts with a underscore

### 🪄 Improvements [#-improvements-93]

* Update `@typescript-eslint`'s packages to `^8.5.0`

## v1.13.1 (2024-09-09) [#v1131-2024-09-09]

### 🐞 Fixes [#-fixes-147]

* Fixed `hooks-extra/no-unnecessary-use-callback` and `hooks-extra/no-unnecessary-use-memo` false positives when there are references from nested scopes

## v1.13.0 (2024-09-04) [#v1130-2024-09-04]

### ✨ New [#-new-83]

* Added `web-api/no-leaked-resize-observer` rule to prevent leaked `ResizeObserver`

### 🐞 Fixes [#-fixes-148]

* `hooks-extra/no-redundant-custom-hook` should allow custom Hooks with empty body

### 🪄 Improvements [#-improvements-94]

* Rename `debug/react-hooks` to `debug/hook`
* Rename `hooks-extra/ensure-custom-using-hooks` to `hooks-extra/no-redundant-custom-hook`
* Rename `hooks-extra/ensure-use-memo-has-non-empty-deps` to `hooks-extra/no-unnecessary-use-memo`
* Rename `hooks-extra/ensure-use-callback-has-non-empty-deps` to `hooks-extra/no-unnecessary-use-callback`
* Upgrade `@typescript-eslint`'s packages to `^8.4.0`

(The rules that were renamed in this release will still be available until the next major update to avoid breaking changes.)

## v1.12.4 (2024-08-31) [#v1124-2024-08-31]

### ✨ New [#-new-84]

* Added `useLayoutEffect` and `useInsertionEffect` support to `hooks-extra/no-direct-set-state-in-use-effect`

### 🪄 Improvements [#-improvements-95]

* Deprecate rule `hooks-extra/no-direct-set-state-in-use-layout-effect` in favor of `hooks-extra/no-direct-set-state-in-use-effect` (the previous rule will still be available until the next major update to avoid breaking changes)

## v1.12.3 (2024-08-29) [#v1123-2024-08-29]

### ✨ New [#-new-85]

* Added support for detecting event listeners removed by abort signal in rule `web-api/no-leaked-event-listener`

### 🐞 Fixes [#-fixes-149]

* Fixed `no-duplicate-key` rule false positives when the key is a variable
* Fixed `web-api/no-leaked-set-timeout` and `web-api/no-leaked-set-interval` false positives when a timer is assigned to a variable declared by `let` but not initialized

## v1.12.3 (2024-08-29) [#v1123-2024-08-29-1]

### ✨ New [#-new-86]

* Added support for detecting event listeners removed by abort signal in rule `web-api/no-leaked-event-listener`

### 🐞 Fixes [#-fixes-150]

* Fixed `no-duplicate-key` rule false positives when the key is an variable
* Fixed `web-api/no-leaked-set-timeout` and `web-api/no-leaked-set-interval` false positives when a timer is assigned to a variable declared by `let` but not initialized

### 🪄 Improvements [#-improvements-96]

* Allow upper case letters in the rule `naming-convention/component-name` when the component name is less than 4 characters, e.g., `UI`, `CSS`, `SVG`

## v1.12.2 (2024-08-27) [#v1122-2024-08-27]

### ✨ New [#-new-87]

* Added type declarations for `react-x` settings to the `@typescript-eslint/utils/ts-eslint` module via the `SharedConfigurationSettings` interface

### 🪄 Improvements [#-improvements-97]

* Improve the performance of the `no-missing-key` and `no-duplicate-key` rules
* Upgrade `@typescript-eslint`'s packages to `^8.3.0`

## v1.12.1 (2024-08-22) [#v1121-2024-08-22]

### ✨ New [#-new-88]

* Add the options `allowAllCaps`, `allowNamespace`, `allowLeadingUnderscore` to `naming-convention/component-name` and set their default values to `false`

### 🪄 Improvements [#-improvements-98]

* Normalize the component name in rule `naming-convention/component-name` before checking it against the pattern

## v1.12.0 (2024-08-21) [#v1120-2024-08-21]

### ✨ New [#-new-89]

* Added `hooks-extra` rules to `recommended` and `recommended-legacy` presets

## v1.11.0 (2024-08-20) [#v1110-2024-08-20]

### ✨ New [#-new-90]

* Added `eslint-plugin-react-web-api` - A plugin that provides rules for interacting with Web APIs in React applications
* Added `web-api/no-leaked-timeout` rule to prevent leaked `setTimeout`
* Added `web-api/no-leaked-interval` rule to prevent leaked `setInterval`
* Added `web-api/no-leaked-event-listener` rule to prevent leaked `addEventListener`
* Added `web-api` and `web-api-legacy` presets to enable all rules provided by `eslint-plugin-react-web-api`
* Added `web-api/no-leaked-event-listener` to `recommended` and `recommended-legacy` presets

### 🪄 Improvements [#-improvements-99]

* Improve performance by skipping unnecessary checks when possible
* Improve dts generation of the `@eslint-react/eslint-plugin` package
* Improve website and documentation
* Upgrade `@typescript-eslint`'s packages to `^8.2.0`

## v1.10.1 (2024-08-13) [#v1101-2024-08-13]

### 🐞 Fixes [#-fixes-151]

* Fixed `hooks-extra/prefer-use-state-lazy-initialization` false positive when using an initializer function

### 🪄 Improvements [#-improvements-100]

* Improve rule `no-implicit-key` error marker position and range
* Upgrade `@typescript-eslint`'s packages to `^8.1.0`
* Improve website and documentation

## v1.10.0 (2024-08-11) [#v1100-2024-08-11]

### ✨ New [#-new-91]

* Added `disable-type-checked` and `disable-type-checked-legacy` presets to disable all type-checked rules

### 🪄 Improvements [#-improvements-101]

* Rename `off-dom` and `off-dom-legacy` presets to `disable-dom` and `disable-dom-legacy` (the old names will still be available until the next major update to avoid breaking changes)

## v1.9.1 (2024-08-08) [#v191-2024-08-08]

### 🐞 Fixes [#-fixes-152]

* Fixed `dom/no-missing-iframe-sandbox` false positive when the `sandbox` attribute is set to `sandbox=""`
* Fixed `all` and `all-legacy` presets not including `hooks-extra` rules

## v1.9.0 (2024-08-06) [#v190-2024-08-06]

### ✨ New [#-new-92]

* Add `core` preset that includes the most essential rules

### 🪄 Improvements [#-improvements-102]

* Upgrade `@typescript-eslint`'s packages to `8.0.1`

## v1.8.2 (2024-08-03) [#v182-2024-08-03]

### 🐞 Fixes [#-fixes-153]

* Fixed legacy presets not being exported correctly in `@eslint-react/eslint-plugin`

## v1.8.1 (2024-08-03) [#v181-2024-08-03]

### 🪄 Improvements [#-improvements-103]

* Enhance rule `hooks-extra/no-direct-set-state-in-use-effect` and `hooks-extra/no-direct-set-state-in-use-layout-effect` to support `set` function directly passed to `useCallback` and `useMemo` without explicitly calling it
* Improve website and documentation

## v1.8.0 (2024-08-02) [#v180-2024-08-02]

### 🐞 Fixes [#-fixes-154]

* Fixed `ESLintReactSettings` type not being exported correctly
* Fixed the `set` function calls that are wrapped in a `useMemo` or `useCallback` like hook not being detected by `hooks-extra/no-direct-set-state-in-use-effect` and `hooks-extra/no-direct-set-state-in-use-layout-effect`

### 🪄 Improvements [#-improvements-104]

* Upgrade `@typescript-eslint`'s packages to `8.0.0`
* Improve website and documentation

## v1.7.1 (2024-07-31) [#v171-2024-07-31]

### 🐞 Fixes [#-fixes-155]

* Fixed the spread attributes support for dom related rules
* Fixed the issue where the overridden value was retrieved when there were duplicate attributes on a JSX element

### 🪄 Improvements [#-improvements-105]

* Rule `no-leaked-conditional-rendering` now allows a falsy boolean literal to be used on the left side of the logical expression
* Tweaked the default settings shipped with various presets
* Overall performance improvements

## v1.7.0 (2024-07-30) [#v170-2024-07-30]

### ✨ New [#-new-93]

* Add `settings["react-x"].polymorphicPropName` setting to specify the name of the prop that is used to determine the component type

### 🪄 Improvements [#-improvements-106]

* Dropped the current incomplete lint support for `React.createElement` to improve performance and subsequent code maintainability

## v1.6.0 (2024-07-27) [#v160-2024-07-27]

### ✨ New [#-new-94]

* Add `controlled` setting to `settings["react-x"].additionalComponents`' `attributes` object to set whether it is controlled or not
* Add glob support to `settings["react-x"].additionalComponents`' `name` setting
* Add default settings for `react-x` settings to presets
* Undeprecate rule `no-implicit-key` and improve its usefulness
* Undeprecate rule `no-complicated-conditional-rendering` and rename it to `no-complex-conditional-rendering` (the previous rule will still be available until the next major update to avoid breaking changes)

### 🐞 Fixes [#-fixes-156]

* `no-direct-set-state-in-use-(layout?)-effect` should warn only for the `set` function

### 🪄 Improvements [#-improvements-107]

* Remove `no-direct-set-state-in-use-(layout?)-effect` from recommended presets

## v1.5.30 (2024-07-22) [#v1530-2024-07-22]

### 🐞 Fixes [#-fixes-157]

* Revert ~~change `@typescript-eslint`'s packages in `dependencies` to `"^7.16.1 || ^rc-v8"`~~ as this format is not supported by all package managers

## v1.5.29 (2024-07-22) [#v1529-2024-07-22]

### ✨ New [#-new-95]

* Add rule `no-prop-types`
* Add rule `no-default-props`
* Add experimental `settings["react-x"].additionalComponents` settings (currently only the `no-unsafe-target-blank` rule uses it, but more rules will use it in the future)

### 🪄 Improvements [#-improvements-108]

* Add rule `no-prop-types` to recommended presets
* Add rule `no-default-props` to recommended presets
* Remove rule `no-useless-fragment` from recommended presets
* Optimize performance of rule `no-create-ref`
* Change `@typescript-eslint`' packages in `dependencies` to `"^7.16.1 || ^rc-v8"`

## v1.5.28 (2024-07-20) [#v1528-2024-07-20]

### 🐞 Fixes [#-fixes-158]

* Fix false positives and negatives in rule `hooks-extra/no-direct-set-state-in-use-effect`
* Fix false positives and negatives in rule `hooks-extra/no-direct-set-state-in-use-layout-effect`
* Fix rule `prefer-read-only-props` reports only the first component in a file

### 🪄 Improvements [#-improvements-109]

* Improve website and documentation

## v1.5.27 (2024-07-16) [#v1527-2024-07-16]

### 🐞 Fixes [#-fixes-159]

* Fix rule `prefer-read-only-props` that was accidentally added to the recommended type-checked presets
* Fix false negatives in rule `hooks-extra/no-direct-set-state-in-use-effect` when call `set` function inside a non-function scope
* Fix false negatives in rule `hooks-extra/no-direct-set-state-in-use-layout-effect` when call `set` function inside a non-function scope

### 🪄 Improvements [#-improvements-110]

* Rule `no-leaked-conditional-rendering` now supports BigInt literals on the left side of the logical expression
* Rule `no-leaked-conditional-rendering` now allows a truthy number literal to be used on the left side of the logical expression
* Optimize bundle size

## v1.5.26 (2024-07-15) [#v1526-2024-07-15]

### ✨ New [#-new-96]

* Add rule `hooks-extra/no-direct-set-state-in-use-effect`
* Add rule `hooks-extra/no-direct-set-state-in-use-layout-effect`

### 🐞 Fixes [#-fixes-160]

* Fix false positives in rule `hooks-extra/ensure-use-memo-has-non-empty-deps` when referencing component block scope
* Fix false positives in rule `hooks-extra/no-unnecessary-use-callback` when referencing component block scope

### 🪄 Improvements [#-improvements-111]

* Add rule `hooks-extra/no-direct-set-state-in-use-effect` to recommended presets
* Add rule `hooks-extra/no-direct-set-state-in-use-layout-effect` to recommended presets
* Add rule `hooks-extra/prefer-use-state-lazy-initialization` to recommended presets

## v1.5.25 (2024-07-13) [#v1525-2024-07-13]

### 🪄 Improvements [#-improvements-112]

* Optimize bundle size

## v1.5.24 (2024-07-11) [#v1524-2024-07-11]

### 🐞 Fixes [#-fixes-161]

* Fix rule `prefer-read-only-props` false positive when using `ObjectPattern` in function arguments

### 🪄 Improvements [#-improvements-113]

* Change `typescript` version in `peerDependencies` to `"^4.9.5 || ^5.3.3"`

## v1.5.23 (2024-07-07) [#v1523-2024-07-07]

### 🐞 Fixes [#-fixes-162]

* Fix rule `prefer-read-only-props` false negative when using `ObjectPattern` in function arguments

### 🪄 Improvements [#-improvements-114]

* Improve website and documentation

## v1.5.22 (2024-07-05) [#v1522-2024-07-05]

### ✨ New [#-new-97]

* Add rule `prefer-read-only-props`

### 🪄 Improvements [#-improvements-115]

* Downgrade `@typescript-eslint`'s packages to v7, due to stability issues with v8

## v1.5.21 (2024-07-03) [#v1521-2024-07-03]

### 🐞 Fixes [#-fixes-163]

* Add missing dependencies to `@eslint-react/eslint-plugin`
* Fix rule `no-nested-components` false negative when placing components inside JSX props

### 🪄 Improvements [#-improvements-116]

* Update `@typescript-eslint`'s packages to v8
* Improve rule `no-leaked-conditional-rendering` compatibility with different versions of `typescript-eslint`

## v1.5.20 (2024-07-02) [#v1520-2024-07-02]

### 🐞 Fixes [#-fixes-164]

* Fix rule `prefer-destructuring-assignment` false positive when the function looks like a component

### 🪄 Improvements [#-improvements-117]

* Improve `utilities/jsx/is-jsx-value` to better distinguish between normal values and JSX values
* Improve `core/component-collector` to better distinguish between normal functions and components
* Prevent potential function component detection related false positives
* Switch to a more appropriate value for `DEFAULT_COMPONENT_DETECTION_HINT`

## v1.5.19 (30 Sun Jun 2024) [#v1519-30-sun-jun-2024]

### 🪄 Improvements [#-improvements-118]

* Reduce the number of dependencies by inlining tree-shaking optimized code while bundling
* Deprecate `reactOptions` in favor of `react-x` in [ESLint Shared Settings](https://eslint.org/docs/latest/use/configure/configuration-files#configuring-shared-settings)

## v1.5.18 (28 Fri Jun 2024) [#v1518-28-fri-jun-2024]

### 🐞 Fixes [#-fixes-165]

* Fix rule `no-useless-fragment` not respecting `jsxPragma` settings

### 🪄 Improvements [#-improvements-119]

* Update documentation for rule `no-useless-fragment` to reflect the actual behavior of the rule

## v1.5.17 (2024-06-26) [#v1517-2024-06-26]

### 🪄 Improvements [#-improvements-120]

* Remove rule `no-children-prop` from recommended presets
* Improve documentation for rule `no-useless-fragment`

## v1.5.16 (2024-06-17) [#v1516-2024-06-17]

### 🐞 Fixes [#-fixes-166]

* Fix debug rules not exporting correctly in `@eslint-react/eslint-plugin`

### 🪄 Improvements [#-improvements-121]

* Remove rule `prefer-shorthand-boolean` from recommended presets
* Remove rule `prefer-shorthand-fragment` from recommended presets
* Remove rule `prefer-destructuring-assignment` from recommended presets

## v1.5.15 (2024-06-08) [#v1515-2024-06-08]

### 🐞 Fixes [#-fixes-167]

* Remove `languageOptions.parser` from presets
* Remove `@typescript-eslint/parser` from peer dependencies
* Rule `no-leaked-conditional-rendering`: object should be considered as valid left-hand type

## v1.5.14 (2024-05-30) [#v1514-2024-05-30]

### ✨ New [#-new-98]

* Add rule `avoid-shorthand-boolean`
* Add rule `avoid-shorthand-fragment`

### 🐞 Fixes [#-fixes-168]

* Fix rule `dom/no-missing-button-type` false positive when using `type` attribute in a JSX expression

## v1.5.13 (2024-05-28) [#v1513-2024-05-28]

### 🐞 Fixes [#-fixes-169]

* Fix components that use `getDerivedStateFromError` should not be warned by rule `no-class-component`

### 🪄 Improvements [#-improvements-122]

* Update `@typescript-eslint`'s packages to `7.11.0`

## v1.5.12 (2024-05-17) [#v1512-2024-05-17]

### 🐞 Fixes [#-fixes-170]

* Fix ESLint peer dependency range in `package.json`

### 🪄 Improvements [#-improvements-123]

* Update `@typescript-eslint`'s packages to `7.9.0`
* Minor improvements

## v1.5.11 (2024-05-08) [#v1511-2024-05-08]

### ✨ New [#-new-99]

* Rule `no-class-component` rule now allows class components with a `componentDidCatch` method
* Settings `reactOptions` now supports `importSource` to specify the import source for React

### 🗑️ Deprecations [#️-deprecations]

* Deprecate rule `no-implicit-key` because it is stylistic and opinionated
* Deprecate rule `no-complicated-conditional-rendering` because it is stylistic and opinionated

### 🪄 Improvements [#-improvements-124]

* Refactor React pragma and import name retrieval utils to support custom import source
* Update `@typescript-eslint`'s packages to `7.8.0`

## v1.5.10 (2024-04-28) [#v1510-2024-04-28]

### 🪄 Improvements [#-improvements-125]

* Update `react` to `18.3.1`
* Update `@typescript-eslint`'s packages to `7.7.1`
* Use a wider range of peerDependencies

## v1.5.9 (2024-04-19) [#v159-2024-04-19]

### 🪄 Improvements [#-improvements-126]

* Optimize error messages of rules
* Update `@typescript-eslint`'s packages to `7.7.0`

## v1.5.8 (2024-04-11) [#v158-2024-04-11]

### 🪄 Improvements [#-improvements-127]

* Update `@typescript-eslint`'s packages to `7.6.0`

## v1.5.7 (2024-03-28) [#v157-2024-03-28]

### 🪄 Improvements [#-improvements-128]

* Update `@typescript-eslint`'s packages to `7.4.0`

## v1.5.6 (2024-03-12) [#v156-2024-03-12]

### 🪄 Improvements [#-improvements-129]

* Update `@typescript-eslint`'s packages to `7.2.0`

## v1.5.5 (2024-02-18) [#v155-2024-02-18]

### 🐞 Fixes [#-fixes-171]

* Fix rule `no-component-will-receive-props` not working as expected

### 🪄 Improvements [#-improvements-130]

* Improve error messages and code samples in rule docs

## v1.5.4 (2024-02-16) [#v154-2024-02-16]

### 🐞 Fixes [#-fixes-172]

* Fix rule `dom/no-render-return-value` not renamed in v1.0.0

### 🪄 Improvements [#-improvements-131]

* Improve code samples in rule docs
* Update `effect` to `2.3.5`
* Update `@typescript-eslint`'s packages to `7.0.1`

## v1.5.3 (2024-02-10) [#v153-2024-02-10]

### 🪄 Improvements [#-improvements-132]

* Improve diagnostic messages
* Remove needless deps from `peerDependencies`
* Update `@typescript-eslint`'s packages to `6.21.0`

## v1.5.2 (2024-01-31) [#v152-2024-01-31]

### 🪄 Improvements [#-improvements-133]

* Remove needless deps from `peerDependencies`
* Update `@typescript-eslint`'s packages to `6.20.0`
* Update `effect` to `2.2.3`

## v1.5.2-beta.2 (2024-01-31) [#v152-beta2-2024-01-31]

### 🪄 Improvements [#-improvements-134]

* Update `effect` to `2.2.3`
* Remove needless deps from `peerDependencies`

## v1.5.2-beta.0 (2024-01-30) [#v152-beta0-2024-01-30]

### 🪄 Improvements [#-improvements-135]

* Update `@typescript-eslint`'s packages to `6.20.0`

## v1.5.1 (2024-01-29) [#v151-2024-01-29]

### ✨ New [#-new-100]

* Add `off-dom` and `off-dom-legacy` presets to disable all DOM related rules

### 🪄 Improvements [#-improvements-136]

* Reduce dependencies size

## v1.5.0 (2024-01-29) [#v150-2024-01-29]

### 💥 Breaking Changes [#-breaking-changes-12]

* Remove rule `max-depth`
* Rename rule `no-spreading-key` to `no-implicit-key`
* Rename rule `no-constructed-context-value` to `no-unstable-context-value`
* Rename rule `no-unstable-nested-components` to `no-nested-components`
* Switch to new name prefix of rules in `@eslint-react/eslint-plugin`
  * Replace `jsx/` with \`\` in rule names
  * Replace `react/` with \`\` in rule names
  * Replace `react-dom/` with `dom/` in rule names
  * Replace `react-hooks/` with `hooks-extra/` in rule names
* Switch to new settings schema
  * Put settings under `reactOptions` instead of `eslintReact`
  * Replace `jsx.pragma` with `jsxPragma`
  * Replace `jsx.fragment` with `jsxPragmaFrag`
  * Replace `react.version` with `version`
  * Remove `jsx.extensions`

## v1.0.2 (2024-01-27) [#v102-2024-01-27]

### 🐞 Fixes [#-fixes-173]

* Fix rule `dom/no-namespace` not renamed in v1.0.0
* Fix rule `dom/no-void-elements-with-children` not renamed in v1.0.0

### 🪄 Improvements [#-improvements-137]

* Improve rules overview page on website
* Remove `jsx` and `hooks` presets from documentation

## v1.0.1 (2024-01-27) [#v101-2024-01-27]

### 🪄 Improvements [#-improvements-138]

* Improve `jsx` and `jsx-legacy` presets
* Improve `core` and `core-legacy` presets
* Improve `recommended` and `recommended-legacy` presets
* Improve `recommended-type-checked` and `recommended-type-checked-legacy` presets

## v1.0.0 (2024-01-27) [#v100-2024-01-27]

### 💥 Breaking Changes [#-breaking-changes-13]

#### All DOM related rules are moved to `react-dom` namespace [#all-dom-related-rules-are-moved-to-react-dom-namespace]

* Rename rule `react/no-void-elements-with-children` to `dom/no-void-elements-with-children`
* Rename rule `react/no-dangerously-set-innerhtml-with-children` to `dom/no-dangerously-set-innerhtml-with-children`
* Rename rule `react/no-dangerously-set-innerhtml` to `dom/no-dangerously-set-innerhtml`
* Rename rule `react/no-find-dom-node` to `dom/no-find-dom-node`
* Rename rule `react/no-missing-button-type` to `dom/no-missing-button-type`
* Rename rule `react/no-missing-iframe-sandbox` to `dom/no-missing-iframe-sandbox`
* Rename rule `react/no-namespace` to `dom/no-namespace`
* Rename rule `react/no-render-return-value` to `dom/no-render-return-value`
* Rename rule `react/no-script-url` to `dom/no-script-url`
* Rename rule `react/no-unsafe-iframe-sandbox` to `dom/no-unsafe-iframe-sandbox`
* Rename rule `react/no-unsafe-target-blank` to `dom/no-unsafe-target-blank`

### ✨ New [#-new-101]

* Make `dom` an alias of `react-dom` preset
* Make `hooks` an alias of `react-hooks` preset
* Add preset `jsx` and `jsx-legacy`
* Add preset `react-dom` and `dom-legacy`
* Add preset `core` and `core-legacy`
* Add preset `react-hooks` and `hooks-legacy`

### 🐞 Fixes [#-fixes-174]

* Fix the lint message for rule `dom/no-dangerously-set-innerhtml`

## v1.0.0-beta.3 (2024-01-26) [#v100-beta3-2024-01-26]

### 🐞 Fixes [#-fixes-175]

* Fix the name prefix for react-dom rules

## v1.0.0-beta.2 (2024-01-26) [#v100-beta2-2024-01-26]

### ✨ New [#-new-102]

* Make `dom` an alias of `react-dom` preset
* Make `hooks` an alias of `react-hooks` preset

## v1.0.0-beta.1 (2024-01-26) [#v100-beta1-2024-01-26]

### ✨ New [#-new-103]

* Add preset `jsx` and `jsx-legacy`
* Add preset `dom` and `dom-legacy`
* Add preset `core` and `core-legacy`
* Add preset `hooks` and `hooks-legacy`

## v1.0.0-beta.0 (2024-01-26) [#v100-beta0-2024-01-26]

### 💥 Breaking Changes [#-breaking-changes-14]

#### All DOM related rules are moved to `react-dom` namespace [#all-dom-related-rules-are-moved-to-react-dom-namespace-1]

* Rename rule `react/no-dangerously-set-innerhtml` to `dom/no-dangerously-set-innerhtml`
* Rename rule `react/no-dangerously-set-innerhtml-with-children` to `dom/no-dangerously-set-innerhtml-with-children`
* Rename rule `react/no-find-dom-node` to `dom/no-find-dom-node`
* Rename rule `react/no-missing-button-type` to `dom/no-missing-button-type`
* Rename rule `react/no-missing-iframe-sandbox` to `dom/no-missing-iframe-sandbox`
* Rename rule `react/no-script-url` to `dom/no-script-url`
* Rename rule `react/no-unsafe-iframe-sandbox` to `dom/no-unsafe-iframe-sandbox`
* Rename rule `react/no-unsafe-target-blank` to `dom/no-unsafe-target-blank`

## v0.10.12 (2024-01-21) [#v01012-2024-01-21]

### 🪄 Improvements [#-improvements-139]

* Remove unnecessary `parserOptions` fields from presets

## v0.10.12-beta.0 (2024-01-21) [#v01012-beta0-2024-01-21]

### 🪄 Improvements [#-improvements-140]

* Remove unnecessary `parserOptions` fields from presets

## v0.10.11 (2024-01-20) [#v01011-2024-01-20]

### ✨ New [#-new-104]

* Add rule `react/no-access-state-in-setstate`

### 🪄 Improvements [#-improvements-141]

* Improve rule `react/no-unused-state` to respect the usage of `getDerivedStateFromProps`
* Update `@typescript-eslint`'s packages to `6.19.0`

## v0.10.11-beta.2 (2024-01-19) [#v01011-beta2-2024-01-19]

### ✨ New [#-new-105]

* Add rule `react/no-access-state-in-setstate`

## v0.10.11-beta.1 (2024-01-16) [#v01011-beta1-2024-01-16]

### 🪄 Improvements [#-improvements-142]

* Update `@typescript-eslint`'s packages to `6.19.0`

## v0.10.11-beta.0 (2024-01-15) [#v01011-beta0-2024-01-15]

### 🪄 Improvements [#-improvements-143]

* Improve rule `react/no-unused-state` to respect the usage of `getDerivedStateFromProps`

## v0.10.10 (2024-01-14) [#v01010-2024-01-14]

### 🪄 Improvements [#-improvements-144]

* Improve rule `react/no-unused-state` to support checking for more cases
* Improve rule `react/no-direct-mutation-state` to support checking for more cases
* Improve rule `react/no-unused-class-component-members` to support checking for more cases

## v0.10.10-beta.0 (2024-01-14) [#v01010-beta0-2024-01-14]

### 🪄 Improvements [#-improvements-145]

* Improve rule `react/no-unused-state` to support checking for more cases
* Improve rule `react/no-direct-mutation-state` to support checking for more cases
* Improve rule `react/no-unused-class-component-members` to support checking for more cases

## v0.10.9 (2024-01-12) [#v0109-2024-01-12]

### 🐞 Fixes [#-fixes-176]

* Fix bundle size is larger than expected

## v0.10.8 (2024-01-11) [#v0108-2024-01-11]

### 🐞 Fixes [#-fixes-177]

* Fix version format in v0.10.7's package.json

## v0.10.7 (2024-01-11) [#v0107-2024-01-11]

### ✨ New [#-new-106]

* Add rule `react/no-unused-state`

## v0.10.6 (2024-01-09) [#v0106-2024-01-09]

### 🐞 Fixes [#-fixes-178]

* Fix an issue where `react/no-constructed-context-value` and `react/no-unstable-default-props` would report false negatives when using LogicalExpression and ConditionalExpression

## v0.10.6-beta.0 (2024-01-08) [#v0106-beta0-2024-01-08]

### 🐞 Fixes [#-fixes-179]

* Fix an issue where `react/no-constructed-context-value` and `react/no-unstable-default-props` would report false negatives when using LogicalExpression and ConditionalExpression

## v0.10.5 (2024-01-08) [#v0105-2024-01-08]

### ✨ New [#-new-107]

* Add rule `react/no-unused-class-component-members`

### 🪄 Improvements [#-improvements-146]

* Update `@typescript-eslint`'s packages to `6.18.0`

## v0.10.5-beta.0 (2024-01-07) [#v0105-beta0-2024-01-07]

### ✨ New [#-new-108]

* Add rule `react/no-unused-class-component-members`

### 🪄 Improvements [#-improvements-147]

* Update `@typescript-eslint`'s packages to `6.18.0`

## v0.10.4 (2024-01-06) [#v0104-2024-01-06]

### 🪄 Improvements [#-improvements-148]

* Improve rule `react/no-unstable-default-props` to support checking for ObjectPatterns within VariableDeclarators that occur on props
* Improve function component detection in rule `react/no-unstable-nested-components` and `debug/function-component`

### 🐞 Fixes [#-fixes-180]

* Fix same kind of error inside a component should not only be reported once in rule `react/no-create-ref` and `react/no-constructed-context-value`
* Fix an issue where render functions wrapped in `useCallback` were accidentally detected as function components in rules `react/no-unstable-nested-components` and `debug/function-component`

## v0.10.4-beta.1 (2024-01-06) [#v0104-beta1-2024-01-06]

### 🪄 Improvements [#-improvements-149]

* Improve function component detection in rule `react/no-unstable-nested-components` and `debug/function-component`

### 🐞 Fixes [#-fixes-181]

* Fix an issue where render functions wrapped in `useCallback` were accidentally detected as function components in rules `react/no-unstable-nested-components` and `debug/function-component`

## v0.10.4-beta.0 (2024-01-06) [#v0104-beta0-2024-01-06]

### 🪄 Improvements [#-improvements-150]

* Improve rule `react/no-unstable-default-props` to support checking for ObjectPatterns within VariableDeclarators that occur on props

### 🐞 Fixes [#-fixes-182]

* Fix same kind of error inside a component should not only be reported once in rule `react/no-create-ref` and `react/no-constructed-context-value`

## v0.10.3 (2024-01-05) [#v0103-2024-01-05]

### 🪄 Improvements [#-improvements-151]

* Update `@typescript-eslint`'s packages to `6.17.0`

## v0.10.3-beta.0 (2024-01-02) [#v0103-beta0-2024-01-02]

### 🪄 Improvements [#-improvements-152]

* Update `@typescript-eslint`'s packages to `6.17.0`

## v0.10.2 (2023-12-30) [#v0102-2023-12-30]

### ✨ New [#-new-109]

* Add [`reactHooks.alias`](https://eslint-react.xyz/docs/configuration#reacthooksalias) setting support

## v0.10.2-beta.0 (2023-12-30) [#v0102-beta0-2023-12-30]

### ✨ New [#-new-110]

* Add [`reactHooks.alias`](https://eslint-react.xyz/docs/configuration#reacthooksalias) setting support

## v0.10.1 (2023-12-27) [#v0101-2023-12-27]

### 🪄 Improvements [#-improvements-153]

* Add `react/no-clone-element` to `recommended` and `recommended-legacy` presets
* Improve rule `react/no-unstable-nested-components`, make its behavior closer to [react-hooks/no-nested-components](https://github.com/facebook/react/pull/25360)
* Update `@typescript-eslint`'s packages to `6.16.0`

## v0.10.1-beta.1 (2023-12-26) [#v0101-beta1-2023-12-26]

### 🪄 Improvements [#-improvements-154]

* Update `@typescript-eslint`'s packages to `6.16.0`

## v0.10.1-beta.0 (2023-12-25) [#v0101-beta0-2023-12-25]

### 🪄 Improvements [#-improvements-155]

* Add `react/no-clone-element` to `recommended` and `recommended-legacy` presets
* Improve rule `react/no-unstable-nested-components`, make its behavior closer to [react-hooks/no-nested-components](https://github.com/facebook/react/pull/25360)

## v0.10.0 (2023-12-21) [#v0100-2023-12-21]

### ✨ New [#-new-111]

* Add rule `jsx/max-depth`

### 🪄 Improvements [#-improvements-156]

* Improve `recommended` and `recommended-legacy` presets

## v0.10.0-beta.0 (2023-12-21) [#v0100-beta0-2023-12-21]

### ✨ New [#-new-112]

* Add rule `jsx/max-depth`

### 🪄 Improvements [#-improvements-157]

* Improve `recommended` and `recommended-legacy` presets

## v0.9.8 (2023-12-19) [#v098-2023-12-19]

### ✨ New [#-new-113]

* Add rule `react/ensure-forward-ref-using-ref`

### 🪄 Improvements [#-improvements-158]

* Reduce false positives in rule `react/no-unstable-nested-components`
* Reduce false positives in rule `debug/function-component`
* Optimize `recommended` and `recommended-legacy` presets
* Update `@typescript-eslint`'s packages to `6.15.0`

## v0.9.8-beta.2 (2023-12-19) [#v098-beta2-2023-12-19]

### 🪄 Improvements [#-improvements-159]

* Optimize `recommended` and `recommended-legacy` presets

## v0.9.8-beta.1 (2023-12-19) [#v098-beta1-2023-12-19]

### 🪄 Improvements [#-improvements-160]

* Minor improvements

## v0.9.8-beta.0 (2023-12-17) [#v098-beta0-2023-12-17]

### ✨ New [#-new-114]

* Add rule `react/ensure-forward-ref-using-ref`

### 🪄 Improvements [#-improvements-161]

* Reduce false positives in rule `react/no-unstable-nested-components`

* Reduce false positives in rule `debug/function-component`

## v0.9.7 (2023-12-17) [#v097-2023-12-17]

### 💥 Breaking Changes [#-breaking-changes-15]

* Rule `named-convention/filename-extension` rename `rule` option to `allow`

### 🐞 Fixes [#-fixes-183]

* Fix where functions in `<Component footer={() => <div />} />` or `<Component Footer={() => <div />} />` are treated as components
* Fix false positive in rule `react/no-unstable-nested-components`
* Fix false positive in rule `debug/function-component`

### 🪄 Improvements [#-improvements-162]

* Rules now support reading JSX extensions from `settings.eslintReact.jsx.extensions`

* Replace ❌ Incorrect and ✅ Correct with Failing and Passing in rule docs

## v0.9.7-beta.2 (2023-12-16) [#v097-beta2-2023-12-16]

### 🐞 Fixes [#-fixes-184]

* Update default rule option in `named-convention/filename` to `PascalCase`

## v0.9.7-beta.1 (2023-12-14) [#v097-beta1-2023-12-14]

### 🪄 Improvements [#-improvements-163]

* Minor improvements

## v0.9.7-beta.0 (2023-12-14) [#v097-beta0-2023-12-14]

### 💥 Breaking Changes [#-breaking-changes-16]

* Rule `named-convention/filename-extension` rename `rule` option to `allow`

✨ New

* Rule `named-convention/filename` add `extensions` option
* Rule `named-convention/filename-extension` add `extensions` option

## v0.9.6 (2023-12-12) [#v096-2023-12-12]

### ✨ New [#-new-115]

* Add rule `react-hooks/prefer-use-state-lazy-initialization`

### 🪄 Improvements [#-improvements-164]

* Rule `named-convention/component-name` add both `string` and `object` options support
* Rule `named-convention/filename` add both `string` and `object` options support
* Rule `named-convention/filename-extension` add both `string` and `object` options support
* Rule `debug/react-hooks` reports `hookCalls.length` instead of `cost`
* Update `@typescript-eslint`'s packages to `6.14.0`

## v0.9.6-beta.5 (2023-12-12) [#v096-beta5-2023-12-12]

### 🪄 Improvements [#-improvements-165]

* Update `@typescript-eslint`'s packages to `6.14.0`

## v0.9.6-beta.4 (2023-12-11) [#v096-beta4-2023-12-11]

### 🪄 Improvements [#-improvements-166]

* Rule `named-convention/component-name` add both `string` and `object` options support
* Rule `named-convention/filename` add both `string` and `object` options support
* Rule `named-convention/filename-extension` add both `string` and `object` options support

## v0.9.6-beta.3 (2023-12-11) [#v096-beta3-2023-12-11]

### 🪄 Improvements [#-improvements-167]

* Remove rule `react-hooks/prefer-use-state-lazy-initialization` from `recommended` and `recommended-legacy` presets

## v0.9.6-beta.2 (2023-12-11) [#v096-beta2-2023-12-11]

### ✨ New [#-new-116]

* Add rule `react-hooks/prefer-use-state-lazy-initialization`

### 🪄 Improvements [#-improvements-168]

* Rule `named-convention/filename-extension` switch options format from object to string

## v0.9.6-beta.1 (2023-12-11) [#v096-beta1-2023-12-11]

### 🪄 Improvements [#-improvements-169]

* Rule `debug/react-hooks` reports `hookCalls.length` instead of `cost`

## v0.9.5 (2023-12-11) [#v095-2023-12-11]

### 🪄 Improvements [#-improvements-170]

* Improve rule `jsx/no-leaked-conditional-rendering` error marker position and range
* Improve rule `react/no-missing-button-type` error marker position and range
* Improve rule `react/no-missing-iframe-sandbox` error marker position and range
* Improve rule `react/no-unsafe-iframe-sandbox` error marker position and range

## v0.9.4 (2023-12-08) [#v094-2023-12-08]

### 🪄 Improvements [#-improvements-171]

* Improve rule docs

## v0.9.3 (2023-12-08) [#v093-2023-12-08]

### ✨ New [#-new-117]

* Add rule `react/no-direct-mutation-state`
* Add rule `naming-convention/use-state`

### 🪄 Improvements [#-improvements-172]

* Update `recommended` and `recommended-legacy` presets
* Improve rules overview page

## v0.9.2 (2023-12-06) [#v092-2023-12-06]

### ✨ New [#-new-118]

* Add rule `react/no-component-will-update`
* Add rule `react/no-unsafe-component-will-update`
* Add rule `react/no-component-will-receive-props`
* Add rule `react/no-unsafe-component-will-receive-props`
* Add rule `react/no-set-state-in-component-did-mount`
* Add rule `react/no-set-state-in-component-did-update`
* Add rule `react/no-set-state-in-component-will-update`

## v0.9.1 (2023-12-05) [#v091-2023-12-05]

### ✨ New [#-new-119]

* Add rule `react/no-component-will-mount`
* Add rule `react/no-unsafe-component-will-mount`

## v0.9.0 (2023-12-01) [#v090-2023-12-01]

### 💥 Breaking Changes [#-breaking-changes-17]

* `@eslint-react/eslint-plugin-jsx`
  * Remove `allowExpressions` option from rule `jsx/no-useless-fragment`
* `@eslint-react/jsx`
  * Remove `isFragmentWithOnlyTextAndIsNotChild`, `isFragmentHasLessThanTwoChildren`, `isFragmentWithSingleExpression` from `@eslint-react/jsx`'s API

### ✨ New [#-new-120]

* Add rule `react/no-redundant-should-component-update`

### 🪄 Improvements [#-improvements-173]

* Update Options of rule `jsx/no-useless-fragment`
* Optimize bundle size


# Community (/docs/community)





## OSS Projects Using ESLint React [#oss-projects-using-eslint-react]

<GitHubRepoGrid repos="projects" />

<small>
  *Data collected from the [GitHub dependents network](https://github.com/Rel1cx/eslint-react/network/dependents). If there is any mismatch or outdated information, feel free to [open an issue](https://github.com/Rel1cx/eslint-react/issues/new?assignees=\&labels=type%3A+documentation\&projects=\&template=docs_report.md\&title=%5Bdocs%5D+) or a pull request.*
</small>

{/* Temporarily disabled to avoid Bluesky API rate limits.
  ## Adoption Feedback on Social Media

  <BskyPost handle="tkdodo.eu" id="3lbn55t5d5s24" />
  */}

***

## See Also [#see-also]

**Community-Maintained Presets That Use ESLint React**

<GitHubRepoGrid repos="presets" />


# Contributing (/docs/contributing)







<Callout type="warn" title="Under Construction">
  This page is under construction.
</Callout>

Contributions are welcome!

This project does not have contributing guidelines. Explore the [repository](https://github.com/Rel1cx/eslint-react) to learn how to contribute.

<InlineTOC items="toc">
  Table of Contents
</InlineTOC>

## Monorepo Structure [#monorepo-structure]

This section provides a reference to the repository structure and the relationships between different components.

<Mermaid chart="flowchart TB\n    %% Monorepo\n    subgraph &#x22;Monorepo&#x22;\n        %% Apps Subgraph\n        subgraph &#x22;Apps&#x22;\n            Website[&#x22;Website&#x22;]:::apps\n            Playground[&#x22;Playground&#x22;]:::apps\n        end\n\n        %% Examples Subgraph\n        subgraph &#x22;Examples&#x22;\n            ExampleNext[&#x22;Next.js Example&#x22;]:::examples\n            ExamplePreact[&#x22;Preact Example&#x22;]:::examples\n            ExamplePreactCompat[&#x22;Preact Compat Example&#x22;]:::examples\n            ExampleReactDOM[&#x22;React DOM Example&#x22;]:::examples\n            ExampleReactDOMJS[&#x22;React DOM JS Example&#x22;]:::examples\n            ExampleReactDOMCustom[&#x22;React DOM Custom Rules Example&#x22;]:::examples\n        end\n\n        %% Packages Subgraph\n        subgraph &#x22;Packages&#x22;\n            Core[&#x22;Core Functionality&#x22;]:::packages\n            Shared[&#x22;Shared Utilities&#x22;]:::packages\n            ESLint[&#x22;ESLint Types & Utils&#x22;]:::packages\n            Kit[&#x22;Kit Module&#x22;]:::packages\n\n            %% Utilities Subgraph\n            subgraph &#x22;Utilities Modules&#x22;\n                AST[&#x22;AST Module&#x22;]:::utilities\n                Var[&#x22;Var Module&#x22;]:::utilities\n                JSX[&#x22;JSX Module&#x22;]:::utilities\n            end\n\n            %% ESLint Plugins Subgraph\n            subgraph &#x22;ESLint Plugins&#x22;\n                ReactX[&#x22;eslint-plugin-react-x&#x22;]:::plugins\n                ReactJSX[&#x22;eslint-plugin-react-jsx&#x22;]:::plugins\n                ReactRSC[&#x22;eslint-plugin-react-rsc&#x22;]:::plugins\n                ReactDOM[&#x22;eslint-plugin-react-dom&#x22;]:::plugins\n                ReactWebAPI[&#x22;eslint-plugin-react-web-api&#x22;]:::plugins\n                ReactNamingConvention[&#x22;eslint-plugin-react-naming-convention&#x22;]:::plugins\n                ReactDebug[&#x22;eslint-plugin-react-debug&#x22;]:::plugins\n                ReactAggregated[&#x22;Aggregated Plugin&#x22;]:::plugins\n            end\n        end\n\n        %% Scripts & Configurations\n        Scripts[&#x22;Scripts & Configurations&#x22;]:::external\n\n        %% Tests\n        Tests[&#x22;Tests&#x22;]:::external\n    end\n\n    %% Relationships\n    %% Plugins depend on Core and Shared\n    Core -->|&#x22;dependency&#x22;| ReactX\n    Core -->|&#x22;dependency&#x22;| ReactJSX\n    Core -->|&#x22;dependency&#x22;| ReactRSC\n    Core -->|&#x22;dependency&#x22;| ReactDOM\n    Core -->|&#x22;dependency&#x22;| ReactWebAPI\n    Core -->|&#x22;dependency&#x22;| ReactNamingConvention\n    Core -->|&#x22;dependency&#x22;| ReactDebug\n\n    Shared -->|&#x22;dependency&#x22;| ReactX\n    Shared -->|&#x22;dependency&#x22;| ReactJSX\n    Shared -->|&#x22;dependency&#x22;| ReactRSC\n    Shared -->|&#x22;dependency&#x22;| ReactDOM\n    Shared -->|&#x22;dependency&#x22;| ReactWebAPI\n    Shared -->|&#x22;dependency&#x22;| ReactNamingConvention\n    Shared -->|&#x22;dependency&#x22;| ReactDebug\n\n    %% Utilities used by Core and Plugins\n    AST ---|&#x22;provides&#x22;| Core\n    Var ---|&#x22;provides&#x22;| Core\n    JSX ---|&#x22;provides&#x22;| Core\n\n    AST ---|&#x22;provides&#x22;| ReactX\n    Var ---|&#x22;provides&#x22;| ReactX\n    JSX ---|&#x22;provides&#x22;| ReactX\n    JSX ---|&#x22;provides&#x22;| ReactDOM\n    JSX ---|&#x22;provides&#x22;| ReactJSX\n    AST ---|&#x22;provides&#x22;| ReactDebug\n    Var ---|&#x22;provides&#x22;| ReactDebug\n    JSX ---|&#x22;provides&#x22;| ReactDebug\n\n    %% Kit dependencies\n    AST ---|&#x22;provides&#x22;| Kit\n    Core -->|&#x22;dependency&#x22;| Kit\n    Shared -->|&#x22;dependency&#x22;| Kit\n\n    %% Aggregation of Plugins\n    ReactX -->|&#x22;aggregated&#x22;| ReactAggregated\n    ReactJSX -->|&#x22;aggregated&#x22;| ReactAggregated\n    ReactRSC -->|&#x22;aggregated&#x22;| ReactAggregated\n    ReactDOM -->|&#x22;aggregated&#x22;| ReactAggregated\n    ReactWebAPI -->|&#x22;aggregated&#x22;| ReactAggregated\n    ReactNamingConvention -->|&#x22;aggregated&#x22;| ReactAggregated\n\n    %% Website Documentation uses Core and Shared docs\n    Website -->|&#x22;docs&#x22;| Core\n    Website -->|&#x22;docs&#x22;| Shared\n\n    %% Scripts & CI automation interactions\n    Scripts -->|&#x22;CI/CD&#x22;| Core\n    Scripts -->|&#x22;CI/CD&#x22;| Shared\n    Scripts -->|&#x22;CI/CD&#x22;| ESLint\n    Scripts -->|&#x22;CI/CD&#x22;| Kit\n    Scripts -->|&#x22;CI/CD&#x22;| AST\n    Scripts -->|&#x22;CI/CD&#x22;| Var\n    Scripts -->|&#x22;CI/CD&#x22;| JSX\n    Scripts -->|&#x22;CI/CD&#x22;| ReactX\n    Scripts -->|&#x22;CI/CD&#x22;| ReactJSX\n    Scripts -->|&#x22;CI/CD&#x22;| ReactRSC\n    Scripts -->|&#x22;CI/CD&#x22;| ReactDOM\n    Scripts -->|&#x22;CI/CD&#x22;| ReactWebAPI\n    Scripts -->|&#x22;CI/CD&#x22;| ReactNamingConvention\n    Scripts -->|&#x22;CI/CD&#x22;| ReactDebug\n    Scripts -->|&#x22;CI/CD&#x22;| ReactAggregated\n    Scripts -->|&#x22;CI/CD&#x22;| Tests\n\n    %% Click Events\n    click Website &#x22;https://github.com/Rel1cx/eslint-react/tree/main/apps/website&#x22;\n    click Playground &#x22;https://github.com/Rel1cx/eslint-react/tree/main/apps/playground&#x22;\n    click ExampleNext &#x22;https://github.com/Rel1cx/eslint-react/tree/main/examples/next&#x22;\n    click ExamplePreact &#x22;https://github.com/Rel1cx/eslint-react/tree/main/examples/preact&#x22;\n    click ExamplePreactCompat &#x22;https://github.com/Rel1cx/eslint-react/tree/main/examples/preact-compat&#x22;\n    click ExampleReactDOM &#x22;https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom&#x22;\n    click ExampleReactDOMJS &#x22;https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom-js&#x22;\n    click ExampleReactDOMCustom &#x22;https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom-with-custom-rules&#x22;\n    click Core &#x22;https://github.com/Rel1cx/eslint-react/tree/main/packages/core&#x22;\n    click Shared &#x22;https://github.com/Rel1cx/eslint-react/tree/main/packages/shared&#x22;\n    click ESLint &#x22;https://github.com/Rel1cx/eslint-react/tree/main/packages/eslint&#x22;\n    click Kit &#x22;https://github.com/Rel1cx/eslint-react/tree/main/packages/kit&#x22;\n    click AST &#x22;https://github.com/Rel1cx/eslint-react/tree/main/packages/ast&#x22;\n    click Var &#x22;https://github.com/Rel1cx/eslint-react/tree/main/packages/var&#x22;\n    click JSX &#x22;https://github.com/Rel1cx/eslint-react/tree/main/packages/jsx&#x22;\n    click ReactX &#x22;https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x&#x22;\n    click ReactJSX &#x22;https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx&#x22;\n    click ReactRSC &#x22;https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-rsc&#x22;\n    click ReactDOM &#x22;https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom&#x22;\n    click ReactWebAPI &#x22;https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api&#x22;\n    click ReactNamingConvention &#x22;https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention&#x22;\n    click ReactDebug &#x22;https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug&#x22;\n    click ReactAggregated &#x22;https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin&#x22;\n    click Scripts &#x22;https://github.com/Rel1cx/eslint-react/tree/main/scripts&#x22;\n    click Tests &#x22;https://github.com/Rel1cx/eslint-react/tree/main/test&#x22;\n\n    %% Styles\n    classDef apps fill:#f9e79f,stroke:#7d6608,stroke-width:2px;\n    classDef examples fill:#fad7a0,stroke:#7e5109,stroke-width:2px;\n    classDef packages fill:#aed6f1,stroke:#1b4f72,stroke-width:2px;\n    classDef utilities fill:#a9dfbf,stroke:#145a32,stroke-width:2px;\n    classDef plugins fill:#f5b7b1,stroke:#78281f,stroke-width:2px;\n    classDef external fill:#d2b4de,stroke:#4a235a,stroke-width:2px;" />

## Packages Summary [#packages-summary]

This section provides a summary of the packages in the monorepo.

### Local Packages [#local-packages]

* [`.pkgs/configs`](https://github.com/Rel1cx/eslint-react/tree/main/.pkgs/configs): Workspace config bases
* [`.pkgs/eff`](https://github.com/Rel1cx/eslint-react/tree/main/.pkgs/eff): JavaScript and TypeScript utilities
* [`.pkgs/samples`](https://github.com/Rel1cx/eslint-react/tree/main/.pkgs/samples): Sample fixtures and configs

### Internal Packages [#internal-packages]

* **Utilities**
  * [`packages/ast`](https://github.com/Rel1cx/eslint-react/tree/main/packages/ast): TSESTree AST utility module for static analysis
  * [`packages/var`](https://github.com/Rel1cx/eslint-react/tree/main/packages/var): TSESTree AST utility module for static analysis of variables
  * [`packages/jsx`](https://github.com/Rel1cx/eslint-react/tree/main/packages/jsx): TSESTree JSX utility module for static analysis of JSX patterns
* **Core & Shared**
  * [`packages/core`](https://github.com/Rel1cx/eslint-react/tree/main/packages/core): Utility module for static analysis of React core APIs and patterns
  * [`packages/eslint`](https://github.com/Rel1cx/eslint-react/tree/main/packages/eslint): ESLint types and utilities
  * [`packages/shared`](https://github.com/Rel1cx/eslint-react/tree/main/packages/shared): Shared constants, types and functions

### Public Packages [#public-packages]

* **Utilities**
  * [`packages/kit`](https://github.com/Rel1cx/eslint-react/tree/main/packages/kit): Utility module for building custom React rules with JavaScript functions
* **ESLint Plugins**
  * [`plugins/eslint-plugin-react-x`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x): Core React rules
  * [`plugins/eslint-plugin-react-jsx`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx): React Flavored JSX rules
  * [`plugins/eslint-plugin-react-rsc`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-rsc): React Server Components rules
  * [`plugins/eslint-plugin-react-dom`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom): React DOM rules
  * [`plugins/eslint-plugin-react-web-api`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api): Web API interaction rules
  * [`plugins/eslint-plugin-react-naming-convention`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention): Naming convention rules
  * [`plugins/eslint-plugin-react-debug`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug): Debugging rules for inspecting React patterns in code
  * [`plugins/eslint-plugin`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin) (npm: `@eslint-react/eslint-plugin`): A unified plugin that combines all individual plugins into one

### Examples [#examples]

* [`examples/next`](https://github.com/Rel1cx/eslint-react/tree/main/examples/next): Next.js example
* [`examples/preact`](https://github.com/Rel1cx/eslint-react/tree/main/examples/preact): Preact example
* [`examples/preact-compat`](https://github.com/Rel1cx/eslint-react/tree/main/examples/preact-compat): Preact compat example
* [`examples/react-dom`](https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom): React DOM example
* [`examples/react-dom-js`](https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom-js): React DOM JS example
* [`examples/react-dom-with-custom-rules`](https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom-with-custom-rules): React DOM with custom rules example

### Documentation [#documentation]

* [`apps/website`](https://github.com/Rel1cx/eslint-react/tree/main/apps/website): Documentation website
* [`apps/playground`](https://github.com/Rel1cx/eslint-react/tree/main/apps/playground): Interactive playground (placeholder)


# Examples (/docs/examples)



<Callout type="warn" title="Under Construction">
  This page is under construction.
</Callout>

## Example Projects [#example-projects]

If you prefer to start from a working setup, you can use one of the official example projects:

* [Next.js](https://github.com/Rel1cx/eslint-react/tree/main/examples/next)
* [Preact](https://github.com/Rel1cx/eslint-react/tree/main/examples/preact)
* [Preact (React Compat)](https://github.com/Rel1cx/eslint-react/tree/main/examples/preact-compat)
* [React DOM (TypeScript)](https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom)
* [React DOM (JavaScript)](https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom-js)
* [React DOM with Custom Rules](https://github.com/Rel1cx/eslint-react/tree/main/examples/react-dom-with-custom-rules)

You can also browse all examples in one place:

* [All examples](https://github.com/Rel1cx/eslint-react/tree/main/examples)


# FAQ (/docs/faq)



## Why? [#why]

**ESLint React supports modern React ecosystems across multiple renderers.** While `eslint-plugin-react` focuses primarily on React DOM, ESLint React is designed to work with alternative renderers like React Native, React Three Fiber, and custom renderers by treating DOM as one of many supported targets.

Our solution treats DOM as one of many supported targets rather than the default assumption. This paradigm shift enables:

* **Context-aware linting**: Adapting to different runtime environments
* **Future-proof architecture**: Compatibility with emerging React platforms
* **Unified code quality standards**: Consistent linting across diverse projects

## What's included? [#whats-included]

Currently, it includes the following:

**Local Packages**

* `.pkgs/configs`: Workspace config bases
* `.pkgs/eff`: JavaScript and TypeScript utilities

**Internal Packages**

* **Utilities**
  * `packages/ast`: TSESTree AST utility module for static analysis
  * `packages/var`: TSESTree AST utility module for static analysis of variables
  * `packages/jsx`: TSESTree JSX utility module for static analysis of JSX patterns
* **Core & Shared**
  * `packages/core`: Utility module for static analysis of React core APIs and patterns
  * `packages/shared`: Shared constants, types and functions

**Public Packages**

* **Utilities**
  * `packages/kit`: Utility module for building custom React rules with JavaScript functions
* **ESLint Plugins**
  * [`eslint-plugin-react-x`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x) - Core React rules.
  * [`eslint-plugin-react-jsx`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx) - React Flavored JSX rules.
  * [`eslint-plugin-react-rsc`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-rsc) - React Server Components rules.
  * [`eslint-plugin-react-dom`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom) - React DOM rules.
  * [`eslint-plugin-react-web-api`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api) - Web API interaction rules.
  * [`eslint-plugin-react-naming-convention`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention) - Naming convention rules.
  * [`eslint-plugin-react-debug`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug) - Debugging rules for inspecting React patterns in code.
  * [`@eslint-react/eslint-plugin`](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin) - A unified plugin that combines all individual plugins into one.

**Documentation**

* `apps/website`: Documentation website
* `apps/playground`: Interactive playground (placeholder)

You can view our long-term plans on the [roadmap](/docs/roadmap).

## Why isn't there a 'jsx-runtime' preset? [#why-isnt-there-a-jsx-runtime-preset]

ESLint React automatically detects your JSX runtime type from the compiler options in your `tsconfig.json` or `jsconfig.json` file, as well as from JSX pragma comments (e.g., `/** @jsxRuntime automatic */`) in each file. This means you don't need to set a preset for the JSX runtime.

For more information, see the [JSX Transform](/docs/configuration/configure-project-config#jsx-transform) section on the [Configure Project Config](/docs/configuration/configure-project-config) page.

## Which one should I use? Unified plugin or individual plugins? [#which-one-should-i-use-unified-plugin-or-individual-plugins]

For users who use the presets we provide (such as `recommended` or `strict`), it is recommended to use the unified plugin `@eslint-react/eslint-plugin`. This simplifies configuration and ensures that all relevant rules are enabled correctly.

For users who need more fine-grained control or build and maintain an ESLint configuration for themselves or their organization, it is recommended to use individual plugins. This allows you to freely select plugins and compose rules as needed, without being limited by presets.

<Callout type="warn">
  The unified plugin (`@eslint-react/eslint-plugin`) contains some historical decisions and internal behaviors that were originally made to be compatible with both [Legacy Config](https://eslint.org/docs/v8.x/use/configure/configuration-files) and [Flat Config](https://eslint.org/docs/v8.x/use/configure/configuration-files-new). Reducing external package dependencies on it is better in the long run.
</Callout>

## Is there anything to note about migrating from 'eslint-plugin-react'? [#is-there-anything-to-note-about-migrating-from-eslint-plugin-react]

Please be aware that some rules may behave differently when transitioning to ESLint React. The rules in ESLint React are more closely aligned with the guidelines provided by [react.dev](https://react.dev). This alignment is due to ESLint React adopting [react.dev](https://react.dev) as its primary reference, rather than `eslint-plugin-react`.

For a comprehensive migration guide with a complete rule comparison table, see our [Migration Guide](/docs/migrating-from-eslint-plugin-react). This guide covers all rules from `eslint-plugin-react`, their ESLint React equivalents, missing functionality, and migration tips.

To smoothly transition, we suggest reviewing the rules in ESLint React and running a comprehensive linting check on your codebase to identify and address any discrepancies introduced by the migration.

## How can I help ESLint React analyze my code more accurately? [#how-can-i-help-eslint-react-analyze-my-code-more-accurately]

ESLint React performs static analysis on your source code, so it can only reason about values and calls that are visible at compile time. Computed property access such as `obj["foo"]()` or `React["createElement"]()` hides the actual member name from the analyzer, which may cause rules to miss calls they would otherwise detect.

To keep code analyzer-friendly, we recommend enabling the following TypeScript ESLint rules alongside ESLint React:

* [`@typescript-eslint/dot-notation`](https://typescript-eslint.io/rules/dot-notation/) — prefers `obj.foo` over `obj["foo"]` when the property name is a valid identifier, making method calls easier for rules to resolve.
* [`@typescript-eslint/no-unnecessary-template-expression`](https://typescript-eslint.io/rules/no-unnecessary-template-expression/) — removes unnecessary template literals such as `` `foo` ``, keeping callee names plain strings where possible.

Using these rules together reduces reliance on computed member expressions and helps ESLint React rules match calls consistently.

Additionally, configuring ESLint React and your project settings correctly ensures the analyzer understands your specific environment:

* **Configure Analyzer Settings**: Customize static analysis behavior via the `react-x` key in your ESLint `settings` object:

  * **React Version**: Set `version` (e.g., `"detect"` or `"19.2.7"`) to ensure semantic analysis matches your available React features.
  * **React Compiler**: Align `compilationMode` with your React Compiler configuration so rules respect its optimization strategies.
  * **Custom Hooks**: Use `additionalRefHooks`, `additionalStateHooks` and `additionalEffectHooks` regex patterns to help the analyzer recognize and validate your custom hooks as standard ref, state or effect hooks.
  * **Polymorphic Components**: Define `polymorphicPropName` (e.g., `"as"`) so rules can correctly infer the rendered underlying element type.
  * **Custom Import Sources**: Specify `importSource` if you use non-standard distributions (like `"@pika/react"`).

  See [Configure Analyzer](/docs/configuration/configure-analyzer) for more details.

* **Leverage Type Information**:
  * Set up `parserOptions.project` or `parserOptions.projectService` in your ESLint config to enable powerful type-aware rules (like `react-x/no-leaked-conditional-rendering` and `react-x/no-implicit-children`).
  * Enable `strictNullChecks` in your `tsconfig.json` or `jsconfig.json` to significantly improve the accuracy of these type-aware rules.
  * Ensure your JSX transform options (`jsx`, `jsxImportSource`, etc.) are properly defined in your TypeScript config so ESLint React can automatically detect them.

## What does 90% human-written mean? [#what-does-90-human-written-mean]

Of every 100 rules, 10 are written or ported by LLMs and reviewed by humans, while 90 are written or ported by humans and reviewed by LLMs.


# Glossary (/docs/glossary)



## P [#p]

### Project Config [#project-config]

The configuration file specifies the root files and the compiler options required to compile the project.

For TypeScript or JavaScript files, the Project Config is typically named `tsconfig.json` or `jsconfig.json` and is located in the root of a project.

For MDX files, the Project Config is the `"mdx"` property in the `tsconfig.json` or `jsconfig.json` file.

ESLint React uses the Project Config to provide information (e.g., [JSX Transform](/docs/configuration/configure-project-config#jsx-transform)) about the code it is linting.

### Project Rules [#project-rules]

Custom ESLint rules built with [`@eslint-react/kit`](/docs/packages/kit) to enforce project-specific conventions and requirements. Unlike built-in rules, Project Rules are owned by your team and can be tailored to match your specific coding standards.

Project Rules are defined as functions that return a rule implementation, and are registered using the `eslintReactKit().use()` builder API. The rule name is automatically derived from the function name (e.g., `functionComponentDefinition` → `@eslint-react/kit/function-component-definition`).

See [Configure Project Rules](/docs/configuration/configure-project-rules) for setup instructions and [Recipes](/docs/recipes) for ready-to-use examples.

## R [#r]

### Recipe [#recipe]

Ready-to-use custom ESLint rule definitions built with [`@eslint-react/kit`](/docs/packages/kit). Recipes are designed to be **copied and pasted** directly into your project, allowing you to customize the implementation to match your team's conventions.

See [Recipes](/docs/recipes) for available recipes.


# Migrating from eslint-plugin-react-hooks (/docs/migrating-from-eslint-plugin-react-hooks)





<Callout type="info">
  This guide provides a comprehensive comparison between [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) and ESLint React rules to help you migrate your existing configuration.
</Callout>

<InlineTOC items="toc">
  Table of Contents
</InlineTOC>

## Overview [#overview]

ESLint React provides direct equivalents for the core rules in `eslint-plugin-react-hooks`, including both the classic hooks linting rules (`exhaustive-deps`, `rules-of-hooks`) and many of the newer React Compiler diagnostic rules introduced in the latest versions of the plugin.

Rules specific to the React Compiler runtime (such as `config`, `gating`, `incompatible-library`, and `preserve-manual-memoization`) do not have equivalents in ESLint React, as they validate compiler-specific configuration and behavior.

## Rule Comparison Table [#rule-comparison-table]

### Legend [#legend]

* 🔧 **Fully supported** - Rule is supported, and has an auto-fix
* 🟢 **Mostly supported** - Rule is supported but doesn't have an auto-fix
* 🟡 **Partial support** - Similar but not identical functionality
* 🔴 **Not supported** - No equivalent rule
* 🧪 **Experimental** - Rule is supported but marked as experimental

### Table [#table]

The following table compares all rules from `eslint-plugin-react-hooks` with their ESLint React equivalents:

| `eslint-plugin-react-hooks` Rule Name                                                                                    | New Rule Name                                            | Prev Status | Status |
| :----------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------- | :---------- | :----- |
| [`exhaustive-deps`](https://react.dev/reference/eslint-plugin-react-hooks/lints/exhaustive-deps)                         | [`exhaustive-deps`](/docs/rules/exhaustive-deps)         | 🟢          | 🔧     |
| [`rules-of-hooks`](https://react.dev/reference/eslint-plugin-react-hooks/lints/rules-of-hooks)                           | [`rules-of-hooks`](/docs/rules/rules-of-hooks)           | 🟢          | 🔧     |
| [`config`](https://react.dev/reference/eslint-plugin-react-hooks/lints/config)                                           |                                                          | 🟢          | 🔴     |
| [`error-boundaries`](https://react.dev/reference/eslint-plugin-react-hooks/lints/error-boundaries)                       | [`error-boundaries`](/docs/rules/error-boundaries)       | 🟢          | 🟢     |
| [`gating`](https://react.dev/reference/eslint-plugin-react-hooks/lints/gating)                                           |                                                          | 🟢          | 🔴     |
| [`globals`](https://react.dev/reference/eslint-plugin-react-hooks/lints/globals)                                         | [`globals`](/docs/rules/globals)                         | 🟢          | 🟡 🧪  |
| [`immutability`](https://react.dev/reference/eslint-plugin-react-hooks/lints/immutability)                               | [`immutability`](/docs/rules/immutability)               | 🟢          | 🟡 🧪  |
| [`incompatible-library`](https://react.dev/reference/eslint-plugin-react-hooks/lints/incompatible-library)               |                                                          | 🟢          | 🔴     |
| [`preserve-manual-memoization`](https://react.dev/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization) |                                                          | 🟢          | 🔴     |
| [`purity`](https://react.dev/reference/eslint-plugin-react-hooks/lints/purity)                                           | [`purity`](/docs/rules/purity)                           | 🟢          | 🟡 🧪  |
| [`refs`](https://react.dev/reference/eslint-plugin-react-hooks/lints/refs)                                               | [`refs`](/docs/rules/refs)                               | 🟢          | 🟡 🧪  |
| [`set-state-in-effect`](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect)                 | [`set-state-in-effect`](/docs/rules/set-state-in-effect) | 🟢          | 🟢     |
| [`set-state-in-render`](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-render)                 | [`set-state-in-render`](/docs/rules/set-state-in-render) | 🟢          | 🧪     |
| [`static-components`](https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components)                     | [`static-components`](/docs/rules/static-components)     | 🟢          | 🧪     |
| [`unsupported-syntax`](https://react.dev/reference/eslint-plugin-react-hooks/lints/unsupported-syntax)                   | [`unsupported-syntax`](/docs/rules/unsupported-syntax)   | 🟢          | 🟢     |
| [`use-memo`](https://react.dev/reference/eslint-plugin-react-hooks/lints/use-memo)                                       | [`use-memo`](/docs/rules/use-memo)                       | 🟢          | 🟢     |

### ESLint React Column [#eslint-react-column]

* Rule names link to ESLint React documentation
* Multiple rules separated by `+` indicate that together they provide equivalent functionality
* Rules marked 🧪 are experimental and their behavior may change in future releases
* Rules marked 🔴 are React Compiler-specific and have no equivalent in ESLint React

## Migration Preset [#migration-preset]

ESLint React provides a preset to disable conflicting rules from `eslint-plugin-react-hooks`:

* `disable-conflict-eslint-plugin-react-hooks` - Disables all rules from `eslint-plugin-react-hooks` that have equivalents in ESLint React (e.g., `react-hooks/exhaustive-deps`, `react-hooks/rules-of-hooks`, etc.)

This preset is useful when migrating from `eslint-plugin-react-hooks` to ESLint React, as it prevents rule conflicts while you transition your configuration.


# Migrating from eslint-plugin-react (/docs/migrating-from-eslint-plugin-react)





<Callout type="info">
  This guide provides a comprehensive comparison between [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react) and ESLint React rules to help you migrate your existing configuration.
</Callout>

<InlineTOC items="toc">
  Table of Contents
</InlineTOC>

## Overview [#overview]

ESLint React is a collection of ESLint plugins and utilities for React, with a focus on performance, TypeScript integration, and alignment with [react.dev](https://react.dev) guidelines. It offers a different set of rules and design choices compared to `eslint-plugin-react`.

## Rule Comparison Table [#rule-comparison-table]

<Callout type="warn">
  Not all rules have direct equivalents, and some behave differently.
</Callout>

### Legend [#legend]

* 🔧 **Fully supported** - Rule is supported, and has an auto-fix
* 🟢 **Mostly supported** - Rule is supported but doesn't have an auto-fix
* 🟡 **Partial support** - Similar but not identical functionality
* 🔴 **Not supported** - No equivalent rule
* ➡️ **External plugin** - Rule is available in another ESLint plugin
* 🚫 **Legacy** - Rule is not applicable in modern TypeScript React development (e.g., class-based components, `propTypes`)
* ⚠️ **Warning** - Rule has been deprecated in `eslint-plugin-react`
* 🔄 **Codemod** - Rule is supported as a codemod (safe AST transformation)
* 💭 **Requires type checking** - Rule requires TypeScript type-aware linting to function correctly
* 🧰 &#x2A;*Supported via [`@eslint-react/kit`](/docs/packages/kit)** - Rule is supported as a custom rule via [`@eslint-react/kit`](/docs/packages/kit)

A variety of rules are marked **legacy**, but still have equivalent rules. This distinction was done to more accurately assess
migration for React written with function components and no longer use `propTypes`.

### Table [#table]

The following table compares all rules from `eslint-plugin-react` with their ESLint React (or external) equivalents:

| `eslint-plugin-react` Rule Name                                                                                                                              | New Rule Name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Prev Status | Status |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :----- |
| [`boolean-prop-naming`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/boolean-prop-naming.md)                                     | [`@eslint-react/kit/boolean-prop-naming`](#boolean-prop-naming) report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | 🟢          | 💭     |
| [`button-has-type`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md)                                             | [`dom-no-missing-button-type`](/docs/rules/dom-no-missing-button-type)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 🟢          | 🔧     |
| [`checked-requires-onchange-or-readonly`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/checked-requires-onchange-or-readonly.md) | [`@eslint-react/kit/checked-requires-onchange-or-readonly`](#checked-requires-onchange-or-readonly) report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🧰     |
| [`default-props-match-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md)               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`destructuring-assignment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md)                           | [`@eslint-react/kit`](#destructuring-assignment) (custom rule)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 🔧          | 🧰     |
| [`display-name`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md)                                                   | [`no-missing-component-display-name`](/docs/rules/no-missing-component-display-name) + [`no-missing-context-display-name`](/docs/rules/no-missing-context-display-name)                                                                                                                                                                                                                                                                                                                                                                                        | 🟢          | 🟡     |
| [`forbid-component-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md)                               | [`@eslint-react/kit/forbid-component-props`](#forbid-component-props) report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | 🟢          | 🧰     |
| [`forbid-dom-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md)                                           | [`@eslint-react/kit/forbid-dom-props`](#forbid-dom-props) report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 🟢          | 🧰     |
| [`forbid-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md)                                             | [`@eslint-react/kit/forbid-elements`](#forbid-elements) report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 🟢          | 🧰     |
| [`forbid-foreign-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-foreign-prop-types.md)                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`forbid-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md)                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`forward-ref-uses-ref`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forward-ref-uses-ref.md)                                   | [`no-forward-ref`](/docs/rules/no-forward-ref)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 🟢          | 🔄     |
| [`function-component-definition`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md)                 | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule, e.g. [`@eslint-react/kit/function-component-definition`](#function-component-definition); report-only by default, autofix depends on your implementation)                                                                                                                                                                                                                                                                                         | 🟢          | 🔧     |
| [`hook-use-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/hook-use-state.md)                                               | [`use-state`](/docs/rules/use-state)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 🟢          | 🟢     |
| [`iframe-missing-sandbox`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/iframe-missing-sandbox.md)                               | [`dom-no-missing-iframe-sandbox`](/docs/rules/dom-no-missing-iframe-sandbox)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 🟢          | 🔧     |
| [`jsx-boolean-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)                                         | [`@eslint-react/kit/jsx-boolean-value`](#jsx-boolean-value) includes autofix                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 🔧          | 🔧     |
| [`jsx-child-element-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-child-element-spacing.md)                         | [`@stylistic/jsx-child-element-spacing`](https://eslint.style/rules/jsx-child-element-spacing)                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 🟢          | ➡️     |
| [`jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)                   | [`@stylistic/jsx-closing-bracket-location`](https://eslint.style/rules/jsx-closing-bracket-location)                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 🔧          | ➡️     |
| [`jsx-closing-tag-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md)                           | [`@stylistic/jsx-closing-tag-location`](https://eslint.style/rules/jsx-closing-tag-location)                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 🔧          | ➡️     |
| [`jsx-curly-brace-presence`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md)                           | [`@stylistic/jsx-curly-brace-presence`](https://eslint.style/rules/jsx-curly-brace-presence)                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 🔧          | ➡️     |
| [`jsx-curly-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md)                                         | [`@stylistic/jsx-curly-newline`](https://eslint.style/rules/jsx-curly-newline)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 🔧          | ➡️     |
| [`jsx-curly-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md)                                         | [`@stylistic/jsx-curly-spacing`](https://eslint.style/rules/jsx-curly-spacing)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 🔧          | ➡️     |
| [`jsx-equals-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md)                                       | [`@stylistic/jsx-equals-spacing`](https://eslint.style/rules/jsx-equals-spacing)                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🔧          | ➡️     |
| [`jsx-first-prop-new-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md)                             | [`@stylistic/jsx-first-prop-new-line`](https://eslint.style/rules/jsx-first-prop-new-line)                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | 🔧          | ➡️     |
| [`jsx-fragments`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md)                                                 | [`@eslint-react/kit/jsx-fragments`](#jsx-fragments)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 🔧          | 🔧     |
| [`jsx-handler-names`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md)                                         | [`@eslint-react/kit/jsx-handler-names`](#jsx-handler-names)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | 🟢          | 🧰     |
| [`jsx-indent`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md)                                                       | [`@stylistic/jsx-indent`](https://eslint.style/rules/jsx-indent)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🔧          | ➡️     |
| [`jsx-indent-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md)                                           | [`@stylistic/jsx-indent-props`](https://eslint.style/rules/jsx-indent-props)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 🔧          | ➡️     |
| [`jsx-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md)                                                             | [`no-missing-key`](/docs/rules/no-missing-key) + [`no-duplicate-key`](/docs/rules/no-duplicate-key) + [`no-implicit-key`](/docs/rules/no-implicit-key)                                                                                                                                                                                                                                                                                                                                                                                                         | 🟢          | 🟢     |
| [`jsx-max-depth`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-depth.md)                                                 | [`@eslint-react/kit/jsx-max-depth`](#jsx-max-depth)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | 🟢          | 🧰     |
| [`jsx-max-props-per-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md)                               | [`@stylistic/jsx-max-props-per-line`](https://eslint.style/rules/jsx-max-props-per-line)                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 🔧          | ➡️     |
| [`jsx-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-newline.md)                                                     | [`@stylistic/jsx-newline`](https://eslint.style/rules/jsx-newline)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🔧          | ➡️     |
| [`jsx-no-bind`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)                                                     | [`@eslint-react/kit/jsx-no-bind`](#jsx-no-bind); report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 🟢          | 🧰     |
| [`jsx-no-comment-textnodes`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-comment-textnodes.md)                           | [`jsx-no-comment-textnodes`](/docs/rules/jsx-no-comment-textnodes)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🟢          | 🟢     |
| [`jsx-no-constructed-context-values`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-constructed-context-values.md)         | [`no-unstable-context-value`](/docs/rules/no-unstable-context-value)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 🟢          | 🟢     |
| [`jsx-no-duplicate-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md)                               | [`@eslint-react/kit/jsx-no-duplicate-props`](#jsx-no-duplicate-props)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | 🟢          | 🧰     |
| [`jsx-no-leaked-render`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md)                                   | [`no-leaked-conditional-rendering`](/docs/rules/no-leaked-conditional-rendering)                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🔧          | 🟢     |
| [`jsx-no-literals`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md)                                             | [`@eslint-react/kit/jsx-no-literals`](#jsx-no-literals)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | 🟢          | 🧰     |
| [`jsx-no-script-url`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md)                                         | [`dom-no-script-url`](/docs/rules/dom-no-script-url)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 🟢          | 🟢     |
| [`jsx-no-target-blank`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md)                                     | [`dom-no-unsafe-target-blank`](/docs/rules/dom-no-unsafe-target-blank)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 🔧          | 🟢     |
| [`jsx-no-undef`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md)                                                   | N/A (ESLint v10.0.0+ now tracks JSX references natively)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 🟢          | 🔴     |
| [`jsx-no-useless-fragment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md)                             | [`jsx-no-useless-fragment`](/docs/rules/jsx-no-useless-fragment)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🔧          | 🟢     |
| [`jsx-one-expression-per-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-one-expression-per-line.md)                     | [`@stylistic/jsx-one-expression-per-line`](https://eslint.style/rules/jsx-one-expression-per-line)                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🔧          | ➡️     |
| [`jsx-pascal-case`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)                                             | [`@eslint-react/kit/jsx-pascal-case`](#jsx-pascal-case)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | 🟢          | 🧰     |
| [`jsx-props-no-multi-spaces`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-multi-spaces.md)                         | [`@stylistic/jsx-props-no-multi-spaces`](https://eslint.style/rules/jsx-props-no-multi-spaces)                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 🔧          | ➡️     |
| [`jsx-props-no-spread-multi`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spread-multi.md)                         | [`@eslint-react/kit/jsx-props-no-spread-multi`](#jsx-props-no-spread-multi)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | 🟢          | 🧰     |
| [`jsx-props-no-spreading`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md)                               | [`@eslint-react/kit/jsx-props-no-spreading`](#jsx-props-no-spreading); report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🟢          | 🧰     |
| [`jsx-sort-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-default-props.md)                               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | ⚠️          |        |
| [`jsx-sort-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md)                                               | [`@stylistic/jsx-sort-props`](https://eslint.style/rules/jsx-sort-props)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 🔧          | ➡️     |
| [`jsx-space-before-closing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md)                           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | ⚠️          |        |
| [`jsx-tag-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md)                                             | [`@stylistic/jsx-tag-spacing`](https://eslint.style/rules/jsx-tag-spacing)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | 🔧          | ➡️     |
| [`jsx-uses-react`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md)                                               | N/A (ESLint v10.0.0+ now tracks JSX references natively)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 🟢          | 🔴     |
| [`jsx-uses-vars`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md)                                                 | N/A (ESLint v10.0.0+ now tracks JSX references natively)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 🟢          | 🔴     |
| [`jsx-wrap-multilines`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md)                                     | [`@stylistic/jsx-wrap-multilines`](https://eslint.style/rules/jsx-wrap-multilines)                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🔧          | ➡️     |
| [`no-access-state-in-setstate`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md)                     | [`no-access-state-in-setstate`](/docs/rules/no-access-state-in-setstate)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 🟢          | 🟢     |
| [`no-adjacent-inline-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-adjacent-inline-elements.md)                     | [`@eslint-react/kit/no-adjacent-inline-elements`](#no-adjacent-inline-elements)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🧰     |
| [`no-array-index-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md)                                       | [`no-array-index-key`](/docs/rules/no-array-index-key)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 🟢          | 🟢     |
| [`no-arrow-function-lifecycle`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-arrow-function-lifecycle.md)                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🔧          | 🚫     |
| [`no-children-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md)                                           | [`jsx-no-children-prop`](/docs/rules/jsx-no-children-prop)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | 🟢          | 🟢     |
| [`no-danger`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger.md)                                                         | [`dom-no-dangerously-set-innerhtml`](/docs/rules/dom-no-dangerously-set-innerhtml)                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🟢          | 🟢     |
| [`no-danger-with-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md)                             | [`dom-no-dangerously-set-innerhtml-with-children`](/docs/rules/dom-no-dangerously-set-innerhtml-with-children)                                                                                                                                                                                                                                                                                                                                                                                                                                                 | 🟢          | 🟢     |
| [`no-deprecated`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md)                                                 | [`no-component-will-mount`](/docs/rules/no-component-will-mount) + [`no-component-will-receive-props`](/docs/rules/no-component-will-receive-props) + [`no-component-will-update`](/docs/rules/no-component-will-update) + [`no-create-ref`](/docs/rules/no-create-ref) + [`no-forward-ref`](/docs/rules/no-forward-ref) + [`dom-no-render`](/docs/rules/dom-no-render) + [`dom-no-render-return-value`](/docs/rules/dom-no-render-return-value) + [`dom-no-hydrate`](/docs/rules/dom-no-hydrate) + [`dom-no-find-dom-node`](/docs/rules/dom-no-find-dom-node) | 🟢          | 🟡     |
| [`no-did-mount-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md)                               | [`no-set-state-in-component-did-mount`](/docs/rules/no-set-state-in-component-did-mount)                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 🟢          | 🚫     |
| [`no-did-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md)                             | [`no-set-state-in-component-did-update`](/docs/rules/no-set-state-in-component-did-update)                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | 🟢          | 🚫     |
| [`no-direct-mutation-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md)                           | [`no-direct-mutation-state`](/docs/rules/no-direct-mutation-state)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🟢          | 🚫     |
| [`no-find-dom-node`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md)                                           | [`dom-no-find-dom-node`](/docs/rules/dom-no-find-dom-node)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | 🟢          | 🟢     |
| [`no-invalid-html-attribute`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-invalid-html-attribute.md)                         | *See also [`dom-no-unknown-property`](/docs/rules/dom-no-unknown-property)*                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | 🟢          | 🔴     |
| [`no-is-mounted`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`no-multi-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md)                                                 | [`@eslint-react/kit/no-multi-comp`](#no-multi-comp); report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🟢          | 🧰     |
| [`no-namespace`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-namespace.md)                                                   | [`jsx-no-namespace`](/docs/rules/jsx-no-namespace)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🟢          | 🟢     |
| [`no-object-type-as-default-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-object-type-as-default-prop.md)               | [`no-unstable-default-props`](/docs/rules/no-unstable-default-props)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 🟢          | 🟢     |
| [`no-render-return-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md)                               | [`dom-no-render-return-value`](/docs/rules/dom-no-render-return-value)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 🟢          | 🟢     |
| [`no-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-set-state.md)                                                   | [`@eslint-react/kit/no-set-state`](#no-set-state) report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | 🟢          | 🧰     |
| [`no-string-refs`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md)                                               | [`@eslint-react/kit/no-string-refs`](#no-string-refs) report-only                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | 🟢          | 🧰     |
| [`no-this-in-sfc`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-this-in-sfc.md)                                               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`no-typos`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-typos.md)                                                           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🔴     |
| [`no-unknown-property`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md)                                     | [`dom-no-unknown-property`](/docs/rules/dom-no-unknown-property)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🔧          | 🔧     |
| [`no-unsafe`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md)                                                         | [`no-unsafe-component-will-mount`](/docs/rules/no-unsafe-component-will-mount) + [`no-unsafe-component-will-receive-props`](/docs/rules/no-unsafe-component-will-receive-props) + [`no-unsafe-component-will-update`](/docs/rules/no-unsafe-component-will-update)                                                                                                                                                                                                                                                                                             | 🟢          | 🟡     |
| [`no-unstable-nested-components`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md)                 | [`no-nested-component-definitions`](/docs/rules/no-nested-component-definitions)                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🟢          | 🟢     |
| [`no-unused-class-component-methods`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-class-component-methods.md)         | [`no-unused-class-component-members`](/docs/rules/no-unused-class-component-members)                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 🟢          | 🚫     |
| [`no-unused-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md)                                   | [`no-unused-props`](/docs/rules/no-unused-props)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🟢          | 🚫     |
| [`no-unused-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md)                                             | [`no-unused-state`](/docs/rules/no-unused-state)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | 🟢          | 🟡     |
| [`no-will-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md)                           | [`no-set-state-in-component-will-update`](/docs/rules/no-set-state-in-component-will-update)                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | 🟢          | 🟢     |
| [`prefer-es6-class`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md)                                           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`prefer-exact-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md)                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`prefer-read-only-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md)                               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🔧          | 🚫     |
| [`prefer-stateless-function`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md)                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`react-in-jsx-scope`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md)                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`require-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-default-props.md)                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`require-optimization`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-optimization.md)                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`require-render-return`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-render-return.md)                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`self-closing-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)                                         | [`@stylistic/jsx-self-closing-comp`](https://eslint.style/rules/jsx-self-closing-comp)                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 🔧          | ➡️     |
| [`sort-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`sort-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-default-props.md)                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`sort-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md)                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🔧          | 🚫     |
| [`state-in-constructor`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md)                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`static-property-placement`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md)                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | 🟢          | 🚫     |
| [`style-prop-object`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md)                                         | [`dom-no-string-style-prop`](/docs/rules/dom-no-string-style-prop)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | 🟢          | 🟢     |
| [`void-dom-elements-no-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md)                 | [`dom-no-void-elements-with-children`](/docs/rules/dom-no-void-elements-with-children)                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 🟢          | 🟢     |

### ESLint React Column [#eslint-react-column]

* Rule names link to ESLint React documentation
* Multiple rules separated by `/` indicate alternative approaches
* Rules with `+` indicate multiple rules that together provide equivalent functionality

## Gradual Migration [#gradual-migration]

You can migrate gradually by using both plugins together, using the `disable-conflict-eslint-plugin-react` ruleset:

```ts title="eslint.config.ts"
import eslintReact from "@eslint-react/eslint-plugin";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";

export default defineConfig([
  // Start with the eslint-plugin-react
  {
    files: ["**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}"],
    extends: [
      // Whatever config you had enabled with eslint-plugin-react
      pluginReact.configs.flat.recommended,

      // Now disable all conflicting rules
      eslintReact.configs["disable-conflict-eslint-plugin-react"],

      // Now enable the desired rules
      eslintReact.configs["recommended-typescript"],
    ],
  },
]);
```

Once you have fully migrated, you can remove `eslint-plugin-react` entirely and rely solely on ESLint React:

```ts title="eslint.config.ts"
import eslintReact from "@eslint-react/eslint-plugin";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}"],
    extends: [
      eslintReact.configs["recommended-typescript"],
    ],
  },
]);
```

## Custom Rules For Missing Rules [#custom-rules-for-missing-rules]

Some `eslint-plugin-react` rules don't have built-in equivalents in ESLint React, or you may want to customize their behavior.
You can use [`@eslint-react/kit`](/docs/packages/kit) to create minimal custom rule implementations directly in your `eslint.config.ts`.

Install `@eslint-react/kit` first:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash copy
    npm install --save-dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash copy
    pnpm add --save-dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash copy
    yarn add --dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash copy
    bun add --dev @eslint-react/kit
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Below are drop-in rule definitions for the most commonly needed rules. Register them via the `.use()` chain in your config:

```ts twoslash title="eslint.config.ts"
import eslintReact from "@eslint-react/eslint-plugin";
import eslintReactKit from "@eslint-react/kit";
import { defineConfig } from "eslint/config";
import {
  booleanPropNaming,
  checkedRequiresOnchangeOrReadonly,
  forbidComponentProps,
  forbidDomProps,
  forbidElements,
  functionComponentDefinition,
  jsxBooleanValue,
  jsxFragments,
  jsxHandlerNames,
  jsxMaxDepth,
  jsxNoBind,
  jsxNoDuplicateProps,
  jsxNoLiterals,
  jsxPascalCase,
  jsxPropsNoSpreadMulti,
  jsxPropsNoSpreading,
  noAdjacentInlineElements,
  noDirectAccessProps,
  noMultiComp,
} from "@local/samples";

export default defineConfig([
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      eslintReact.configs["recommended-typescript"],
      eslintReactKit()
        .use(booleanPropNaming, { rule: "^(is|has|should)[A-Z]([A-Za-z0-9]?)+" })
        .use(checkedRequiresOnchangeOrReadonly)
        .use(forbidComponentProps, { forbidden: ["className", "style"] })
        .use(forbidDomProps, { forbidden: ["style", "className"] })
        .use(jsxFragments)
        .use(jsxHandlerNames, { eventHandlerPrefix: "handle", eventHandlerPropPrefix: "on" })
        .use(jsxMaxDepth, { max: 3 })
        .use(jsxNoDuplicateProps)
        .use(jsxNoLiterals, { noStrings: true, allowedStrings: ["allowed"] })
        .use(jsxPascalCase)
        .use(jsxPropsNoSpreadMulti)
        .use(noAdjacentInlineElements)
        .use(noDirectAccessProps)
        .use(noMultiComp)
        .use(forbidElements, {
          forbidden: new Map([
            ["button", "Use <Button> from '@/components/ui' instead."],
            ["input", "Use <Input> from '@/components/ui' instead."],
          ]),
        })
        .use(functionComponentDefinition)
        .use(jsxBooleanValue)
        .use(jsxNoBind)
        .use(jsxPropsNoSpreading)
        .getConfig(),
    ],
  },
]);
```

### `boolean-prop-naming` [#boolean-prop-naming]

Enforce a naming convention for boolean props.

```ts twoslash title=".config/booleanPropNaming.ts"
import { type RuleFunction, merge } from "@eslint-react/kit";
import { ESLintUtils } from "@typescript-eslint/utils";
import ts from "typescript";

export type BooleanPropNamingOptions = {
  /** A regular expression that boolean prop names must match. */
  rule?: string;
};

/** Enforce boolean prop naming convention. */
export function booleanPropNaming(options?: BooleanPropNamingOptions): RuleFunction {
  const DEFAULT_RULE = "^(is|has|should)[A-Z]([A-Za-z0-9]?)+";

  const { rule = DEFAULT_RULE } = options ?? {};
  const regex = new RegExp(rule);

  function flattenTypes(t: ts.Type): ts.Type[] {
    return t.isUnion() ? t.types.flatMap(flattenTypes) : [t];
  }

  function isBooleanLikeType(t: ts.Type) {
    return flattenTypes(t).some(t => (t.getFlags() & ts.TypeFlags.BooleanLike) > 0);
  }

  return (context, { collect }) => {
    const srv = ESLintUtils.getParserServices(context, false);
    const chk = srv.program.getTypeChecker();
    const { query, visitor } = collect.components(context);

    return merge(visitor, {
      "Program:exit"(prog) {
        const comps = query.all(prog);

        for (const comp of comps) {
          const [propsParam] = comp.node.params;
          if (propsParam == null) continue;

          const tsNode = srv.esTreeNodeToTSNodeMap.get(propsParam);
          const propsType = chk.getTypeAtLocation(tsNode);
          const declaredProps = propsType.getProperties();

          for (const prop of declaredProps) {
            const propType = chk.getTypeOfSymbolAtLocation(prop, tsNode);

            // Filter: must be boolean
            if (!isBooleanLikeType(propType)) continue;

            // Filter: must match naming pattern
            if (regex.test(prop.name)) continue;

            const decls = prop.getDeclarations();
            if (decls == null || decls.length === 0) continue;

            const [decl] = decls;
            if (decl == null) continue;

            const declNode = srv.tsNodeToESTreeNodeMap.get(decl);

            const node = "key" in declNode ? declNode.key : declNode;

            // Report violation
            context.report({
              data: { name: prop.name, rule },
              message: `Boolean prop "{{name}}" should match "{{rule}}".`,
              node,
            });
          }
        }
      },
    });
  };
}
```

### `checked-requires-onchange-or-readonly` [#checked-requires-onchange-or-readonly]

Require `onChange` or `readOnly` when using `checked` on `<input>`.

```ts twoslash title=".config/checkedRequiresOnchangeOrReadonly.ts"
import type { RuleFunction } from "@eslint-react/kit";

/** Require `onChange` or `readOnly` when using `checked` on `<input>`. */
export function checkedRequiresOnchangeOrReadonly(): RuleFunction {
  return (context) => ({
    JSXOpeningElement(node) {
      // Verify this is an <input> element
      const name = node.name.type === "JSXIdentifier" ? node.name.name : null;
      if (name !== "input") return;

      // Collect all attribute names
      const attrs = new Set<string>();
      for (const attr of node.attributes) {
        if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier") {
          attrs.add(attr.name.name);
        }
      }

      // Guard: must have checked attribute
      if (!attrs.has("checked")) return;

      // Validate: requires onChange or readOnly
      if (!attrs.has("onChange") && !attrs.has("readOnly")) {
        context.report({
          node,
          message: "`checked` requires `onChange` or `readOnly`.",
        });
      }
    },
  });
}
```

### `forbid-component-props` [#forbid-component-props]

Forbid certain props on React components (not DOM elements). Only reports on PascalCase elements.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link forbidComponentProps}. */
export type ForbidComponentPropsOptions = {
  /** Prop names that are not allowed on React components. */
  forbidden: string[];
};

/** Forbid certain props on React components (not DOM elements). */
export function forbidComponentProps(options: ForbidComponentPropsOptions): RuleFunction {
  const { forbidden } = options;
  return (context) => ({
    JSXAttribute(node) {
      // Extract prop name
      const propName = node.name.type === "JSXIdentifier" ? node.name.name : null;
      if (propName == null || !forbidden.includes(propName)) return;

      // Verify context is JSX opening element
      const { parent } = node;

      // Extract element name
      const elemName = parent.name.type === "JSXIdentifier" ? parent.name.name : null;

      // Guard: only check components (PascalCase), not DOM elements
      if (elemName == null || elemName[0] !== elemName[0]?.toUpperCase()) return;

      context.report({
        node,
        message: `Prop "${propName}" is forbidden on components.`,
      });
    },
  });
}
```

### `forbid-dom-props` [#forbid-dom-props]

Forbid certain props on DOM elements (not React components). Only reports on lowercase DOM element names.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link forbidDomProps}. */
export type ForbidDomPropsOptions = {
  /** Prop names that are not allowed on DOM elements. */
  forbidden: string[];
};

/** Forbid certain props on DOM elements (not React components). */
export function forbidDomProps(options: ForbidDomPropsOptions): RuleFunction {
  const { forbidden } = options;
  return (context) => ({
    JSXAttribute(node) {
      // Extract prop name
      const propName = node.name.type === "JSXIdentifier" ? node.name.name : null;
      if (propName == null || !forbidden.includes(propName)) return;

      // Verify context is JSX opening element
      const { parent } = node;

      // Extract element name
      const elemName = parent.name.type === "JSXIdentifier" ? parent.name.name : null;

      // Guard: only check DOM elements (lowercase), not components
      if (elemName == null || elemName[0] !== elemName[0]?.toLowerCase()) return;

      context.report({
        node,
        message: `Prop "${propName}" is forbidden on DOM elements.`,
      });
    },
  });
}
```

### `forbid-elements` [#forbid-elements]

Forbid specific JSX elements. Customize the `forbidden` map with your project's requirements.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link forbidElements}. */
export type ForbidElementsOptions = {
  /** A map from element name to the error message reported when that element is used. */
  forbidden: Map<string, string>;
};

/** Forbid specific JSX elements. */
export function forbidElements(options: ForbidElementsOptions): RuleFunction {
  const { forbidden } = options;
  return (context) => ({
    JSXOpeningElement(node) {
      // Extract element identifier
      const name = node.name.type === "JSXIdentifier" ? node.name.name : null;

      // Guard: must be in forbidden map
      if (name == null || !forbidden.has(name)) return;

      // Report violation with custom message
      context.report({ node, message: forbidden.get(name)! });
    },
  });
}
```

### `function-component-definition` [#function-component-definition]

Enforce arrow function definitions for function components.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";

/** Enforce arrow function definitions for function components. */
export function functionComponentDefinition(): RuleFunction {
  return (context, { collect, hint }) => {
    const { query, visitor } = collect.components(context, {
      hint: hint.component.Default & ~hint.component.DoNotIncludeFunctionDefinedAsObjectMethod,
    });
    return merge(
      visitor,
      {
        "Program:exit"(program) {
          for (const { node } of query.all(program)) {
            // Guard: must not already be arrow function
            if (node.type === "ArrowFunctionExpression") continue;

            context.report({
              node,
              message: "Function components must be defined with arrow functions.",
              suggest: [
                {
                  desc: "Convert to arrow function.",
                  fix(fixer) {
                    const src = context.sourceCode;
                    if (node.generator) return null;

                    const prefix = node.async ? "async " : "";
                    const typeParams = node.typeParameters != null ? src.getText(node.typeParameters) : "";
                    const params = `(${node.params.map((p) => src.getText(p)).join(", ")})`;
                    const returnType = node.returnType != null ? src.getText(node.returnType) : "";
                    const body = src.getText(node.body);

                    if (node.type === "FunctionDeclaration" && node.id != null) {
                      // dprint-ignore
                      return fixer.replaceText(node, `const ${node.id.name} = ${prefix}${typeParams}${params}${returnType} => ${body};`);
                    }

                    if (node.type === "FunctionExpression" && node.parent.type === "VariableDeclarator") {
                      // dprint-ignore
                      return fixer.replaceText(node, `${prefix}${typeParams}${params}${returnType} => ${body}`);
                    }

                    if (node.type === "FunctionExpression" && node.parent.type === "Property") {
                      // dprint-ignore
                      return fixer.replaceText(node.parent, `${src.getText(node.parent.key)}: ${prefix}${typeParams}${params}${returnType} => ${body}`);
                    }

                    return null;
                  },
                },
              ],
            });
          }
        },
      },
    );
  };
}
```

### `jsx-boolean-value` [#jsx-boolean-value]

Enforce shorthand for boolean JSX attributes (e.g. prefer `<C disabled />` over `<C disabled={true} />`).

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Enforce shorthand for boolean JSX attributes. */
export function jsxBooleanValue(): RuleFunction {
  return (context, { ast }) => ({
    JSXAttribute(node) {
      const { value } = node;

      // Guard: must have expression value
      if (value?.type !== "JSXExpressionContainer") return;

      // Guard: must be literal true
      const expression = ast.unwrap(value.expression);
      if (expression.type !== "Literal" || expression.value !== true) return;

      // Report: prefer shorthand form
      context.report({
        node,
        message: "Omit the value for boolean attributes.",
        fix: (fixer) => fixer.removeRange([node.name.range[1], value.range[1]]),
      });
    },
  });
}
```

### `jsx-fragments` [#jsx-fragments]

Enforce shorthand syntax for React fragments. Reports when `<React.Fragment>` is used instead of `<>...</>`. Allows standard form when `key` prop is present.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";
import type { TSESTree } from "@typescript-eslint/types";

/** Options for {@link jsxFragments}. */
export type JsxsFragmentsOptions = {
  /** The mode to enforce: "syntax" (default, shorthand) or "element" (standard form). */
  mode?: "syntax" | "element";
};

/** Enforce shorthand or standard form for React fragments. */
export function jsxFragments(options: JsxsFragmentsOptions = {}): RuleFunction {
  const { mode = "syntax" } = options;
  return (context) => {
    function reportSyntaxPreferred(node: TSESTree.JSXOpeningElement, pattern: "React.Fragment" | "Fragment") {
      // Guard: has key prop (legitimate use of standard form)
      const hasAttributes = node.attributes.length > 0;
      if (hasAttributes) return;

      context.report({
        node,
        message: `Use shorthand fragment syntax '<>...</>' instead of '<${pattern}>...</${pattern}'.`,
        fix(fixer) {
          const closing = node.parent.closingElement;
          if (closing == null) return null;
          return [fixer.replaceText(node, "<>"), fixer.replaceText(closing, "</>")];
        },
      });
    }

    return {
      JSXOpeningElement(node) {
        const name = node.name;

        if (name.type === "JSXIdentifier" && name.name === "Fragment") {
          if (mode === "syntax") {
            reportSyntaxPreferred(node, "Fragment");
          }
          return;
        }

        if (name.type !== "JSXMemberExpression") return;
        if (name.object.type !== "JSXIdentifier" || name.object.name !== "React") return;
        if (name.property.name !== "Fragment") return;

        if (mode === "syntax") {
          reportSyntaxPreferred(node, "React.Fragment");
        }
      },
      JSXFragment(node) {
        if (mode === "element") {
          context.report({
            node,
            message: "Use '<React.Fragment>...</React.Fragment>' instead of shorthand '<>...</>'.",
            fix(fixer) {
              return [
                fixer.replaceText(node.openingFragment, "<React.Fragment>"),
                fixer.replaceText(node.closingFragment, "</React.Fragment>"),
              ];
            },
          });
        }
      },
    };
  };
}
```

### `jsx-handler-names` [#jsx-handler-names]

Enforce naming convention for JSX event handler props and the functions they reference.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxHandlerNames}. */
export type JsxHandlerNamesOptions = {
  /** Prefix for event handler functions (default: "handle"). */
  eventHandlerPrefix?: string;
  /** Prefix for event handler props (default: "on"). */
  eventHandlerPropPrefix?: string;
  /** Whether to check inline functions (default: false). */
  checkInlineFunction?: boolean;
};

/** Enforce naming convention for JSX event handlers. */
export function jsxHandlerNames(options: JsxHandlerNamesOptions = {}): RuleFunction {
  const {
    eventHandlerPrefix = "handle",
    eventHandlerPropPrefix = "on",
    checkInlineFunction = false,
  } = options;
  const EVENT_HANDLER_REGEX = new RegExp(`^${eventHandlerPropPrefix}[A-Z]`);
  const HANDLER_FUNC_REGEX = new RegExp(`^${eventHandlerPrefix}[A-Z]`);

  return (context, { ast }) => ({
    JSXAttribute(node) {
      // Guard: must be event handler prop (onXxx)
      if (node.name.type !== "JSXIdentifier") return;
      const propName = node.name.name;
      if (!EVENT_HANDLER_REGEX.test(propName)) return;

      const value = node.value;
      if (value == null) return;

      if (value.type === "JSXExpressionContainer") {
        const expression = ast.unwrap(value.expression);

        // Case: direct reference (onClick={handleClick})
        if (expression.type === "Identifier") {
          const handlerName = expression.name;
          if (!HANDLER_FUNC_REGEX.test(handlerName)) {
            context.report({
              node: expression,
              message: `Handler function "${handlerName}" should be named "${eventHandlerPrefix}${propName.slice(eventHandlerPropPrefix.length)}..."`,
            });
          }
          return;
        }

        // Case: inline function (onClick={() => {}})
        if (expression.type === "ArrowFunctionExpression" || expression.type === "FunctionExpression") {
          if (checkInlineFunction) {
            context.report({
              node: expression,
              message: `Inline function handlers are not allowed for "${propName}". Extract it to a named "${eventHandlerPrefix}${
                propName.slice(eventHandlerPropPrefix.length)
              }" function.`,
            });
          }
          return;
        }
      }
    },
  });
}
```

### `jsx-max-depth` [#jsx-max-depth]

Enforce a maximum depth for JSX elements.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxMaxDepth}. */
export type JsxMaxDepthOptions = {
  /** Maximum allowed depth for JSX elements. */
  max: number;
};

/** Enforce JSX maximum depth. */
export function jsxMaxDepth(options: JsxMaxDepthOptions): RuleFunction {
  const { max } = options;
  return (context) => ({
    JSXElement(node) {
      let depth = 0;
      let parent: typeof node.parent | null | undefined = node.parent;

      while (parent != null) {
        if (parent.type === "JSXElement") {
          depth++;
        }
        parent = parent.parent;
      }

      // Check depth limit
      if (depth > max) {
        context.report({
          node,
          message: `JSX element exceeds maximum depth of ${max} (found ${depth}).`,
        });
      }
    },
  });
}
```

### `jsx-no-bind` [#jsx-no-bind]

Prevent arrow functions, function expressions, and `.bind()` in JSX props.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Prevent inline functions and `.bind()` in JSX props. */
export function jsxNoBind(): RuleFunction {
  return (context, { ast }) => ({
    JSXAttribute(node) {
      const value = node.value;

      // Guard: must be expression container
      if (value?.type !== "JSXExpressionContainer") return;

      const expr = ast.unwrap(value.expression);

      switch (true) {
        case expr.type === "ArrowFunctionExpression":
        case expr.type === "FunctionExpression":
          context.report({ node, message: "JSX props should not use inline functions." });
          break;
        case expr.type === "CallExpression": {
          const callee = ast.unwrap(expr.callee);
          if (callee.type === "MemberExpression" && callee.property.type === "Identifier" && callee.property.name === "bind") {
            context.report({ node, message: "JSX props should not use .bind()." });
          }
          break;
        }
      }
    },
  });
}
```

### `jsx-no-duplicate-props` [#jsx-no-duplicate-props]

Disallow duplicate properties in JSX elements.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxNoDuplicateProps}. */
export type JsxNoDuplicatePropsOptions = {
  /** Whether to ignore case when checking for duplicate props. */
  ignoreCase?: boolean;
};

/** Disallow duplicate properties in JSX. */
export function jsxNoDuplicateProps(options: JsxNoDuplicatePropsOptions = {}): RuleFunction {
  const { ignoreCase = false } = options;
  return (context) => ({
    JSXOpeningElement(node) {
      const seen = new Map<string, string>();

      for (const attr of node.attributes) {
        if (attr.type !== "JSXAttribute") continue;
        if (attr.name.type !== "JSXIdentifier") continue;

        const name = ignoreCase ? attr.name.name.toLowerCase() : attr.name.name;

        // Report duplicate
        if (seen.has(name)) {
          context.report({
            node: attr,
            message: `Duplicate prop "${attr.name.name}" found.`,
          });
        } else {
          seen.set(name, attr.name.name);
        }
      }
    },
  });
}
```

### `jsx-no-literals` [#jsx-no-literals]

Disallow usage of string literals in JSX. By default requires wrapping strings in JSX expressions `{'TEXT'}`.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxNoLiterals}. */
export type JsxNoLiteralsOptions = {
  /** Enforces no string literals used as children, wrapped or unwrapped. */
  noStrings?: boolean;
  /** An array of unique string values that would otherwise warn, but will be ignored. */
  allowedStrings?: string[];
  /** When `true` the rule ignores literals used in props. */
  ignoreProps?: boolean;
};

/** Disallow usage of string literals in JSX. */
export function jsxNoLiterals(options: JsxNoLiteralsOptions = {}): RuleFunction {
  const { noStrings = false, allowedStrings = [], ignoreProps = true } = options;
  const allowedSet = new Set(allowedStrings);
  return (context) => ({
    Literal(node) {
      if (typeof node.value !== "string") return;
      const text = node.value.trim();
      if (text === "" || allowedSet.has(text)) return;

      const parent = node.parent;

      if (parent.type === "JSXAttribute") {
        if (!ignoreProps) {
          context.report({
            node,
            message: `String literals are not allowed in JSX props. Use {'${text}'} instead.`,
          });
        }
        return;
      }

      if (parent.type === "JSXExpressionContainer") return;

      if (parent.type === "JSXElement" || parent.type === "JSXFragment") {
        if (noStrings) {
          context.report({
            node,
            message: `String literals are not allowed as JSX children.`,
          });
        } else {
          context.report({
            node,
            message: `String literals should be wrapped in JSX expression: {'${text}'}`,
          });
        }
      }
    },

    JSXText(node) {
      const text = node.value.trim();
      if (text === "" || allowedSet.has(text)) return;

      if (noStrings) {
        context.report({
          node,
          message: `String literals are not allowed as JSX children.`,
        });
      } else {
        context.report({
          node,
          message: `String literals should be wrapped in JSX expression: {'${text}'}`,
        });
      }
    },
  });
}
```

### `jsx-pascal-case` [#jsx-pascal-case]

Enforce PascalCase for user-defined JSX components. DOM elements like `<div>` are ignored.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link jsxPascalCase}. */
export type JsxPascalCaseOptions = {
  /** Allow all-uppercase component names like `<XML />`. */
  allowAllCaps?: boolean;
  /** Allow leading underscores in component names like `<_Component />`. */
  allowLeadingUnderscore?: boolean;
};

/** Enforce PascalCase for user-defined JSX components. */
export function jsxPascalCase(options: JsxPascalCaseOptions = {}): RuleFunction {
  const { allowAllCaps = false, allowLeadingUnderscore = false } = options;
  const pascalCaseRegex = /^[A-Z][a-zA-Z0-9]*$/;
  return (context) => ({
    JSXOpeningElement(node) {
      const name = node.name;

      // Guard: must be simple identifier
      if (name.type !== "JSXIdentifier") return;

      const componentName = name.name;

      if (componentName.startsWith("_")) {
        if (!allowLeadingUnderscore) {
          context.report({
            node: name,
            message: `Component name "${componentName}" should not start with an underscore.`,
          });
        }
        return;
      }

      // Guard: ignore DOM elements (lowercase)
      const firstChar = componentName[0];
      if (firstChar == null) return;
      if (firstChar === firstChar.toLowerCase()) return;

      if (componentName === componentName.toUpperCase()) {
        if (!allowAllCaps) {
          context.report({
            node: name,
            message: `Component name "${componentName}" should use PascalCase, not all uppercase.`,
          });
        }
        return;
      }

      if (!pascalCaseRegex.test(componentName)) {
        context.report({
          node: name,
          message: `Component name "${componentName}" should be in PascalCase.`,
        });
      }
    },
  });
}
```

### `jsx-props-no-spread-multi` [#jsx-props-no-spread-multi]

Disallow spreading the same expression multiple times in a JSX element.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Disallow JSX prop spreading the same identifier multiple times. */
export function jsxPropsNoSpreadMulti(): RuleFunction {
  return (context, { ast }) => ({
    JSXOpeningElement(node) {
      const seen = new Set<string>();

      for (const attr of node.attributes) {
        if (attr.type !== "JSXSpreadAttribute") continue;

        // Extract spread identifier name
        const argument = ast.unwrap(attr.argument);
        let spreadKey: string;
        if (argument.type === "Identifier") {
          spreadKey = argument.name;
        } else {
          spreadKey = context.sourceCode.getText(attr.argument);
        }

        // Report duplicate spread
        if (seen.has(spreadKey)) {
          context.report({
            node: attr,
            message: `Spreading the same expression "${spreadKey}" multiple times is not allowed.`,
          });
        } else {
          seen.add(spreadKey);
        }
      }
    },
  });
}
```

### `jsx-props-no-spreading` [#jsx-props-no-spreading]

Disallow JSX props spreading.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Disallow JSX props spreading. */
export function jsxPropsNoSpreading(): RuleFunction {
  return (context) => ({
    JSXSpreadAttribute(node) {
      context.report({
        node,
        message: "Props spreading is not allowed.",
      });
    },
  });
}
```

### `no-adjacent-inline-elements` [#no-adjacent-inline-elements]

Disallow adjacent inline elements not separated by whitespace.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Disallow adjacent inline elements not separated by whitespace. */
export function noAdjacentInlineElements(): RuleFunction {
  /** Set of inline HTML elements. */
  const INLINE_ELEMENTS = new Set([
    "a",
    "abbr",
    "acronym",
    "b",
    "bdi",
    "bdo",
    "big",
    "br",
    "cite",
    "code",
    "dfn",
    "em",
    "i",
    "img",
    "input",
    "kbd",
    "label",
    "map",
    "object",
    "q",
    "samp",
    "script",
    "select",
    "small",
    "span",
    "strong",
    "sub",
    "sup",
    "textarea",
    "time",
    "tt",
    "var",
  ]);
  return (context) => ({
    JSXElement(node) {
      const children = node.children;

      for (let i = 0; i < children.length - 1; i++) {
        const current = children[i];
        const next = children[i + 1];

        // Validate first element
        if (current?.type !== "JSXElement") continue;
        if (current.openingElement.name.type !== "JSXIdentifier") continue;
        const currentName = current.openingElement.name.name;
        if (!INLINE_ELEMENTS.has(currentName)) continue;

        // Validate second element
        if (next?.type !== "JSXElement") continue;
        if (next.openingElement.name.type !== "JSXIdentifier") continue;
        const nextName = next.openingElement.name.name;
        if (!INLINE_ELEMENTS.has(nextName)) continue;

        // Report violation
        context.report({
          node: current,
          message: `Adjacent inline elements "${currentName}" and "${nextName}" should be separated by whitespace.`,
        });
      }
    },
  });
}
```

### `destructuring-assignment` [#destructuring-assignment]

Enforce destructuring assignment for component props.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";

/** Enforce destructuring assignment for component props. */
export function noDirectAccessProps(): RuleFunction {
  return (context, { collect }) => {
    const { query, visitor } = collect.components(context);

    return merge(visitor, {
      "Program:exit"(program) {
        for (const { node } of query.all(program)) {
          const [props] = node.params;
          if (props == null) continue;
          if (props.type !== "Identifier") continue;
          const propName = props.name;
          const propVariable = context.sourceCode.getScope(node).variables.find((v) => v.name === propName);
          const propReferences = propVariable?.references ?? [];
          for (const ref of propReferences) {
            const { parent } = ref.identifier;
            if (parent.type !== "MemberExpression") continue;
            context.report({
              message: "Use destructuring assignment for component props.",
              node: parent,
            });
          }
        }
      },
    });
  };
}
```

### `no-set-state` [#no-set-state]

Forbid `this.setState()` calls.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Forbid this.setState() calls. */
export function noSetState(): RuleFunction {
  return (context, { ast }) => ({
    CallExpression(node) {
      const callee = ast.unwrap(node.callee);
      switch (true) {
        // Check if callee is this.setState
        case callee.type === "MemberExpression"
          && callee.object.type === "ThisExpression"
          && callee.property.type === "Identifier"
          && callee.property.name === "setState":
          context.report({
            node,
            message: "This use of 'this.setState()' is not allowed.",
          });
      }
    },
  });
}
```

### `no-string-refs` [#no-string-refs]

Disallow deprecated string refs.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

/** Disallow deprecated string refs. */
export function noStringRefs(): RuleFunction {
  return (context) => ({
    JSXAttribute(node) {
      // Check if this is a ref attribute
      if (node.name.type !== "JSXIdentifier" || node.name.name !== "ref") {
        return;
      }

      // Check if the value is a string literal (string ref)
      const value = node.value;
      if (value?.type === "Literal" && typeof value.value === "string") {
        context.report({
          node,
          message: `String refs are deprecated and should not be used. Use React.useRef() instead.`,
        });
      }
    },
  });
}
```

### `no-multi-comp` [#no-multi-comp]

Prevent defining more than one component per file.

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";

/** Prevent defining more than one component per file. */
export function noMultiComp(): RuleFunction {
  return (context, { collect }) => {
    const { query, visitor } = collect.components(context);
    return merge(visitor, {
      "Program:exit"(program) {
        const components = query.all(program);

        for (const { node, name } of components.slice(1)) {
          context.report({
            node,
            message: `Declare only one component per file. Found extra component "${name ?? "anonymous"}".`,
          });
        }
      },
    });
  };
}
```

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Migration (/docs/migration)





If you're currently using other ESLint plugins for React, you can migrate to ESLint React gradually. We provide detailed migration guides with complete rule comparison tables to help you transition your existing configuration.

Choose the migration guide that matches your current setup:

<Cards>
  <Card title="eslint-plugin-react" description="Migrate from eslint-plugin-react to ESLint React with full rule comparison and gradual migration steps." href="/docs/migrating-from-eslint-plugin-react" />

  <Card title="eslint-plugin-react-hooks" description="Migrate from eslint-plugin-react-hooks to ESLint React with rule comparison and migration preset." href="/docs/migrating-from-eslint-plugin-react-hooks" />
</Cards>


# Presets (/docs/presets)



The following presets are available in `@eslint-react/eslint-plugin`:

## Bare Bones [#bare-bones]

* `x`\
  Enable rules for React.
* `jsx`\
  Enable rules for React Flavored JSX.
* `rsc`\
  Enable rules for React Server Components.
* `dom`\
  Enable rules for React DOM.
* `web-api`\
  Enable rules for interacting with Web APIs.
* `naming-convention`\
  Enable rules for naming conventions.

## General Purpose [#general-purpose]

* `recommended`\
  Enforce rules that are recommended by ESLint React for general-purpose React + React DOM projects.\
  &#x2A;This preset includes the `x`, `jsx`, `rsc`, `dom`, `web-api`, and `naming-convention` presets.*

* `strict`\
  Same as the `recommended` preset but enables additional strict rules.

## TypeScript Specialized [#typescript-specialized]

* `recommended-typescript`\
  Same as the `recommended` preset but disables rules that TypeScript can enforce.

* `recommended-type-checked`\
  Same as the `recommended-typescript` preset but enables additional rules that require type information.

* `strict-typescript`\
  Same as the `strict` preset but disables rules that TypeScript can enforce.

* `strict-type-checked`\
  Same as the `strict-typescript` preset but enables additional rules that require type information.

## Other [#other]

* `disable-jsx`\
  Disable rules in the `jsx` preset.
* `disable-rsc`\
  Disable rules in the `rsc` preset.
* `disable-dom`\
  Disable rules in the `dom` preset.
* `disable-web-api`\
  Disable rules in the `web-api` preset.
* `disable-naming-convention`\
  Disable rules in the `naming-convention` preset.
* `disable-experimental`\
  Disable rules that have an "🧪 Experimental" feature flag.
* `disable-type-checked`\
  Disable rules that require type information.
* `disable-conflict-eslint-plugin-react`\
  Disable rules in `eslint-plugin-react` that conflict with rules in our plugins.
* `disable-conflict-eslint-plugin-react-hooks`\
  Disable rules in `eslint-plugin-react-hooks` that conflict with rules in our plugins.
* `off`\
  Disable all rules in this plugin.

## References [#references]

* [Removed Presets](/docs/removed#presets)


# Removed (/docs/removed)



<Callout type="warn" title="Under Construction">
  This page is under construction.
</Callout>

## Rules [#rules]

| Rule                                                         | Replaced by                                                                                           | Removed in | Reason           |
| :----------------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | :--------- | :--------------- |
| `react-x/avoid-shorthand-boolean`                            |                                                                                                       | 2.0.0      | consolidated     |
| `react-x/avoid-shorthand-fragment`                           |                                                                                                       | 2.0.0      | consolidated     |
| `react-x/component-hook-factories`                           | N/A (`eslint-plugin-react-hooks` removed the equivalent rule upstream)                                | 5.4.0      | upstream removed |
| `react-x/ensure-forward-ref-using-ref`                       | [`react-x/no-forward-ref`](/docs/rules/no-forward-ref)                                                | 2.0.0      | renamed          |
| `react-x/jsx-dollar`                                         |                                                                                                       | 4.0.0      | discontinued     |
| `react-x/jsx-key-before-spread`                              | [`react-jsx/no-key-after-spread`](/docs/rules/jsx-no-key-after-spread)                                | 4.0.0      | consolidated     |
| `react-x/jsx-no-duplicate-props`                             |                                                                                                       | 3.0.0      | deprecated       |
| `react-x/jsx-no-iife`                                        | [`react-x/unsupported-syntax`](/docs/rules/unsupported-syntax)                                        | 3.0.0      | consolidated     |
| `react-x/jsx-no-undef`                                       | N/A (ESLint v10.0.0+ now tracks JSX references natively)                                              | 3.0.0      | deprecated       |
| `react-x/jsx-shorthand-boolean`                              | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md)        | 4.0.0      | discontinued     |
| `react-x/jsx-shorthand-fragment`                             | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md)        | 4.0.0      | discontinued     |
| `react-x/jsx-uses-react`                                     | N/A (ESLint v10.0.0+ now tracks JSX references natively)                                              | 3.0.0      | deprecated       |
| `react-x/jsx-uses-vars`                                      | N/A (ESLint v10.0.0+ now tracks JSX references natively)                                              | 3.0.0      | deprecated       |
| `react-x/no-comment-textnodes`                               | [`react-jsx/no-comment-textnodes`](/docs/rules/jsx-no-comment-textnodes)                              | 2.0.0      | renamed          |
| `react-x/no-complicated-conditional-rendering`               |                                                                                                       | 2.0.0      | discontinued     |
| `react-x/no-default-props`                                   | [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax)                   | 2.9.3      | deprecated       |
| `react-x/no-forbidden-props`                                 | [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax)                   | 2.3.2      | deprecated       |
| `react-x/no-nested-components`                               | [`react-x/no-nested-component-definitions`](/docs/rules/no-nested-component-definitions)              | 2.0.0      | renamed          |
| `react-x/no-prop-types`                                      | [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax)                   | 2.9.3      | deprecated       |
| `react-x/no-redundant-should-component-update`               | [`no-unused-class-component-members`](/docs/rules/no-unused-class-component-members)                  | 5.0.0      | consolidated     |
| `react-x/no-string-refs`                                     | [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax)                   | 2.9.3      | deprecated       |
| `react-x/no-unnecessary-key`                                 |                                                                                                       | 3.0.0      | discontinued     |
| `react-x/no-unnecessary-use-callback`                        | N/A (Rule deprecated due to being inherently incompatible with React Compiler)                        | 5.0.0      | deprecated       |
| `react-x/no-unnecessary-use-memo`                            | N/A (Rule deprecated due to being inherently incompatible with React Compiler)                        | 5.0.0      | deprecated       |
| `react-x/no-unnecessary-use-ref`                             |                                                                                                       | 2.10.0     | discontinued     |
| `react-x/no-useless-forward-ref`                             | [`react-x/no-forward-ref`](/docs/rules/no-forward-ref)                                                | 3.0.0      | consolidated     |
| `react-x/prefer-destructuring-assignment`                    | N/A (Rule deprecated due to low usage, use `@eslint-react/kit` to implement as a custom rule instead) | 5.0.0      | deprecated       |
| `react-x/prefer-namespace-import`                            | N/A (Rule deprecated due to low usage, use `@eslint-react/kit` to implement as a custom rule instead) | 5.0.0      | deprecated       |
| `react-x/prefer-react-namespace-import`                      | `react-x/prefer-namespace-import`                                                                     | 2.0.0      | renamed          |
| `react-x/prefer-read-only-props`                             | [`react-x/immutability`](/docs/rules/immutability)                                                    | 3.0.0      | consolidated     |
| `react-x/prefer-shorthand-boolean`                           |                                                                                                       | 2.0.0      | consolidated     |
| `react-x/prefer-shorthand-fragment`                          |                                                                                                       | 2.0.0      | consolidated     |
| `react-x/prefer-use-state-lazy-initialization`               | [`react-x/use-state`](/docs/rules/use-state)                                                          | 3.0.0      | consolidated     |
| `react-x/unstable-rules-of-props`                            | [Recipes: custom-rules-of-props](/docs/recipes/custom-rules-of-props)                                 | 4.2.1      | discontinued     |
| `react-x/unstable-rules-of-state`                            | [Recipes: custom-rules-of-state](/docs/recipes/custom-rules-of-state)                                 | 4.2.1      | discontinued     |
| `react-x/use-jsx-vars`                                       | `react-x/jsx-uses-vars`                                                                               | 2.0.0      | renamed          |
| `react-dom/no-children-in-void-dom-elements`                 | [`react-dom/no-void-elements-with-children`](/docs/rules/dom-no-void-elements-with-children)          | 2.0.0      | renamed          |
| `react-dom/no-namespace`                                     | [`react-jsx/no-namespace`](/docs/rules/jsx-no-namespace)                                              | 4.0.0      | consolidated     |
| `react-dom/prefer-namespace-import`                          | N/A (Rule deprecated due to low usage, use `@eslint-react/kit` to implement as a custom rule instead) | 5.0.0      | deprecated       |
| `react-hooks-extra/exhaustive-deps`                          | [`react-x/exhaustive-deps`](/docs/rules/exhaustive-deps)                                              | 2.14.0     | relocated        |
| `react-hooks-extra/no-direct-set-state-in-use-effect`        | [`react-x/set-state-in-effect`](/docs/rules/set-state-in-effect)                                      | 2.14.0     | relocated        |
| `react-hooks-extra/no-direct-set-state-in-use-layout-effect` | [`react-x/set-state-in-effect`](/docs/rules/set-state-in-effect)                                      | 2.0.0      | consolidated     |
| `react-hooks-extra/no-unnecessary-use-callback`              | N/A (Rule deprecated due to being inherently incompatible React Compiler)                             | 2.0.0      | relocated        |
| `react-hooks-extra/no-unnecessary-use-memo`                  | N/A (Rule deprecated due to being inherently incompatible React Compiler)                             | 2.0.0      | relocated        |
| `react-hooks-extra/no-unnecessary-use-prefix`                | [`react-x/no-unnecessary-use-prefix`](/docs/rules/no-unnecessary-use-prefix)                          | 2.0.0      | relocated        |
| `react-hooks-extra/prefer-use-state-lazy-initialization`     | `react-x/use-state`                                                                                   | 2.0.0      | relocated        |
| `react-hooks-extra/rules-of-hooks`                           | [`react-x/rules-of-hooks`](/docs/rules/rules-of-hooks)                                                | 2.14.0     | relocated        |
| `react-naming-convention/component-name`                     |                                                                                                       | 3.0.0      | deprecated       |
| `react-naming-convention/filename-extension`                 |                                                                                                       | 2.13.0     | deprecated       |
| `react-naming-convention/filename`                           |                                                                                                       | 2.13.0     | deprecated       |
| `debug/class-component`                                      | N/A (Debug rule removed)                                                                              | 5.0.0      | deprecated       |

## Presets [#presets]

| Preset    | Replaced by   | Removed in | Reason  |
| :-------- | :------------ | :--------- | :------ |
| `core`    | `x`           | 2.0.0      | renamed |
| `off-dom` | `disable-dom` | 2.0.0      | renamed |

## Settings [#settings]

| Setting                | Replaced by | Removed in | Reason       |
| :--------------------- | :---------- | :--------- | :----------- |
| `additionalComponents` |             | 2.0.0      | discontinued |
| `additionalHooks`      |             | 2.0.0      | discontinued |
| `skipImportCheck`      |             | 2.0.0      | discontinued |


# Roadmap (/docs/roadmap)



<Callout type="warn" title="Under Construction">
  This page is under construction.
</Callout>

## Milestone 5.0 [#milestone-50]

### System Requirements [#system-requirements]

Minimum supported versions:

* [x] Node.js: 22.0.0
* [x] ESLint: 10.x.x
* [x] TypeScript: 5.0.0

### Core API Refactoring [#core-api-refactoring]

* [x] Performed a large-scale flattening refactor of the core package's internal structure, merging modules previously scattered across subdirectories like `component/`, `function/`, `hook/`, `semantic/`, and `api/` into the root directory.
* [x] Renamed several core APIs (v5.0.0):
  * `isReactAPI` → `isAPI`
  * `isReactAPICall` → `isAPICall`
  * `isInitializedFromReact` → `isAPIFromReact`
  * `isInitializedFromReactNative` → `isAPIFromReactNative`
  * `ComponentDetectionHint` → `FunctionComponentDetectionHint`
  * `ComponentFlag` → `FunctionComponentFlag`
  * `getComponentCollector` → `getFunctionComponentCollector`
  * `getComponentCollectorLegacy` → `getClassComponentCollector`
* [x] Migrated type utilities `type-is`, `type-name`, and `type-variant` from `eslint-plugin-react-x` to `@eslint-react/core`.
* [x] Updated the `Toolkit` interface in `@eslint-react/kit` to reflect the naming changes above.
* [x] Second round of collector renames (v5.3.0): Renamed component and hook collectors to short names.
* [x] Replaced ULID with `node:crypto` `randomBytes` for anonymous rule identification (v5.2.4).

### Kit API Changes (@eslint-react/kit) [#kit-api-changes-eslint-reactkit]

* [x] Simplified `RuleToolkit.is` API: Removed pre-built identifier predicates (`memo`, `lazy`, `forwardRef`, etc.) from `RuleToolkit.is`. Only `*Call` variants and `API`/`APICall` factories are now available.
* [x] Renamed initialization checkers:
  * `initializedFromReact` → `APIFromReact`
  * `initializedFromReactNative` → `APIFromReactNative`
* [x] Removed deprecated `RuleDefinition` type alias: Use `RuleFunction` instead.
* [x] Added `ast.findParent` utility for walking up the AST from a node (v5.5.1).

### New Package: `@eslint-react/eslint` [#new-package-eslint-reacteslint]

* [x] Extracted ESLint types and utilities into a new `@eslint-react/eslint` package (v5.2.3).
* [x] Replaced custom `RuleConfig` with `Linter.RulesRecord` from ESLint (v5.2.3).

### New Rules [#new-rules]

* [x] `react-x/globals`: Validates against global variables that may cause issues in React (v5.3.1).
* [x] `react-x/static-components`: Validates that components are statically defined (v5.4.0).
* [x] `react-web-api/no-leaked-fetch`: Detects unhandled `fetch` calls that aren't aborted or cleaned up (v5.3.0).
* [x] `eslint-plugin-react-rsc`: Added directive position and quote checks to `function-definition` rule (v5.3.4).

### Removed Rules [#removed-rules]

* [x] `react-x/component-hook-factories`: Removed as upstream `eslint-plugin-react-hooks` removed the equivalent rule (v5.5.0).
* [x] `react-x/no-redundant-should-component-update`: This rule, along with its documentation and tests, has been removed from `eslint-plugin-react-x` and all configuration presets (`all`, `x`, `recommended`, `strict`, etc.).
* [x] `react-x/no-unnecessary-use-callback`: Removed from all configs.
* [x] `react-x/no-unnecessary-use-memo`: Removed from all configs.
* [x] `react-x/no-unused-state`: Removed from all configs.
* [x] `react-x/prefer-destructuring-assignment`: Removed from all configs.
* [x] `react-x/prefer-namespace-import`: Removed from all configs.
* [x] `react-dom/prefer-namespace-import`: Removed from all configs.
* [x] `debug/class-component`: This debug rule has been removed from `eslint-plugin-react-debug` and the `debug/all` configuration.

### Class Component Support Deprecation [#class-component-support-deprecation]

* [x] All Class Component-related detection functions in the core package (such as `isClassComponent`, `isPureComponent`, and various lifecycle checkers) have been marked as `@deprecated`, retaining only minimal compatibility support for existing rules.
* [x] Rules in `eslint-plugin-react-web-api`, including `no-leaked-event-listener`, `no-leaked-interval`, and `no-leaked-timeout`, have removed detection for Class Component lifecycles (`componentDidMount` / `componentWillUnmount`) and now only report on Hook Effects (`useEffect`, etc.).

### Monorepo Restructuring [#monorepo-restructuring]

* [x] Restructured monorepo packages directory layout (v5.2.3).
* [x] Added `build:plugins` script (v5.2.3).
* [x] Added `publishConfig.access` to packages for correct npm publishing (v5.3.0).
* [x] Enabled `noUnusedLocals` and `noUnusedParameters` across the monorepo (v5.3.3).

## Milestone 4.0 [#milestone-40]

### System Requirements [#system-requirements-1]

Minimum supported versions:

* [x] Node.js: 22.0.0
* [x] ESLint: 10.x.x
* [x] TypeScript: 6

### New Packages [#new-packages]

* [x] `eslint-plugin-react-jsx` - New dedicated plugin for React Flavored JSX rules
* [x] `@eslint-react/jsx` - New utility module for static analysis of JSX patterns in TSESTree ASTs
* [x] `@eslint-react/kit` - New utility module for building custom ESLint rules with React awareness

### Relocated Rules (to `eslint-plugin-react-jsx`) [#relocated-rules-to-eslint-plugin-react-jsx]

* [x] `react-x/jsx-key-before-spread` -> `react-jsx/no-key-after-spread` (renamed)
* [x] `react-x/jsx-no-comment-textnodes` -> `react-jsx/no-comment-textnodes` (renamed)
* [x] `react-x/no-children-prop` -> `react-jsx/no-children-prop`
* [x] `react-x/no-useless-fragment` -> `react-jsx/no-useless-fragment`
* [x] `react-dom/no-namespace` -> `react-jsx/no-namespace`

### New Rules [#new-rules-1]

* [x] `react-jsx/no-key-after-spread` - Prevents patterns causing deoptimization when using the automatic JSX runtime (e.g. placing `key` after spread props)
* [x] `react-jsx/no-namespace` - Disallows JSX namespace syntax, as React does not support them
* [x] `react-jsx/no-children-prop-with-children` - Disallows passing `children` as a prop when children are also passed as nested content

### Removed Rules [#removed-rules-1]

* [x] `react-x/jsx-dollar` - Removed (can be implemented using `@eslint-react/kit` as custom rule)
* [x] `react-x/jsx-shorthand-boolean` - Removed (can be implemented using `@eslint-react/kit` as custom rule)
* [x] `react-x/jsx-shorthand-fragment` - Removed (can be implemented using `@eslint-react/kit` as custom rule)

### Rule Prefix Changes (in `@eslint-react/eslint-plugin`) [#rule-prefix-changes-in-eslint-reacteslint-plugin]

* [x] `@eslint-react/rsc/<rule>` -> `@eslint-react/rsc-<rule>`
* [x] `@eslint-react/dom/<rule>` -> `@eslint-react/dom-<rule>`
* [x] `@eslint-react/web-api/<rule>` -> `@eslint-react/web-api-<rule>`
* [x] `@eslint-react/naming-convention/<rule>` -> `@eslint-react/naming-convention-<rule>`
* [x] `@eslint-react/debug/<rule>` -> `@eslint-react/debug-<rule>`

### Core API Changes (for custom rule authors) [#core-api-changes-for-custom-rule-authors]

* [x] `useComponentCollector()` -> `getComponentCollector()`
* [x] `useComponentCollectorLegacy()` -> `getComponentCollectorLegacy()`
* [x] `useHookCollector()` -> `getHookCollector()`
* [x] Collector return property `.ctx` -> `.api`
* [x] `JsxInspector` class -> Removed, replaced with standalone utility functions from `@eslint-react/jsx`
* [x] `getElementType()` -> `getElementFullType()` in `@eslint-react/jsx`
* [x] `getElementSelfName()` -> `getElementSelfType()` in `@eslint-react/jsx`

## Milestone 3.0 [#milestone-30]

### System Requirements [#system-requirements-2]

Minimum supported versions:

* [x] Node.js: 22.0.0 (raised from 20.19.0)
* [x] ESLint: 10.0.0
* [x] TypeScript: 6

### New Rules [#new-rules-2]

* [x] `react-x/component-hook-factories` - Validates against higher order functions defining nested components or hooks
* [x] `react-x/error-boundaries` - Validates usage of Error Boundaries instead of try/catch for errors in child components
* [x] `react-x/exhaustive-deps` - Enforces that React hook dependency arrays contain all reactive values used in the callback
* [x] `react-x/immutability` (Experimental) - Validates against passing functions that mutate captured local variables into frozen contexts such as JSX props, hook arguments, and hook return values
* [x] `react-x/no-mixing-controlled-and-uncontrolled` - Validates against mixing controlled and uncontrolled prop patterns
* [x] `react-x/prefer-set-state-callback` - Enforces using callback form of `setState` when the new state is computed from the previous state
* [x] `react-x/purity` (Experimental) - Validates that components and hooks are pure
* [x] `react-x/refs` (Experimental) - Validates correct usage of refs by checking that `ref.current` is not read or written during render
* [x] `react-x/rules-of-hooks` - Enforces the Rules of Hooks
* [x] `react-x/set-state-in-effect` - Validates against calling `setState` synchronously in an effect
* [x] `react-x/set-state-in-render` - Validates against unconditionally setting state during render
* [x] `react-x/no-nested-component-definitions` + `react-x/no-nested-lazy-component-declarations` - Validates that components are static, not recreated every render
* [x] `react-x/unstable-rules-of-props` (Experimental) - Consolidates prop-related validations including mixing controlled and uncontrolled prop patterns
* [x] `react-x/unstable-rules-of-state` (Experimental) - Consolidates state-related validations
* [x] `react-x/unsupported-syntax` - Validates against syntax that React Compiler does not support (eval, with, IIFE in JSX)
* [x] `react-x/use-memo` - Validates that `useMemo` is called with a callback that returns a value
* [x] `react-x/use-state` - Enforces correct usage of the `useState` hook (moved from `eslint-plugin-react-naming-convention`)

### Removed Rules [#removed-rules-2]

* [x] `react-x/jsx-no-duplicate-props` - Removed (LSP and Language Features natively report duplicate JSX props)
* [x] `react-x/jsx-no-iife` - Consolidated into `unsupported-syntax`
* [x] `react-x/jsx-no-undef` - Removed (ESLint v10.0.0 now tracks JSX references natively)
* [x] `react-x/jsx-uses-react` - Removed (ESLint v10.0.0 now handles JSX variable tracking natively)
* [x] `react-x/jsx-uses-vars` - Removed (ESLint v10.0.0 now handles JSX variable tracking natively)
* [x] `react-x/no-default-props` - Removed
* [x] `react-x/no-forbidden-props` - Removed
* [x] `react-x/no-prop-types` - Removed
* [x] `react-x/no-string-refs` - Removed
* [x] `react-x/no-unnecessary-key` - Removed
* [x] `react-x/no-unnecessary-use-ref` - Removed
* [x] `react-x/no-useless-forward-ref` - Consolidated into `no-forward-ref`
* [x] `react-x/prefer-read-only-props` - Consolidated into `immutability`
* [x] `react-x/prefer-use-state-lazy-initialization` - Consolidated into `use-state`
* [x] `react-naming-convention/component-name` - Removed
* [x] `react-naming-convention/filename-extension` - Removed
* [x] `react-naming-convention/filename` - Removed
* [x] `react-naming-convention/use-state` - Moved to `react-x/use-state`

### Removed Plugins [#removed-plugins]

* [x] `eslint-plugin-react-hooks-extra` - Migrated to `eslint-plugin-react-x`

## Milestone 2.0 [#milestone-20]

### System Requirements [#system-requirements-3]

Minimum supported versions:

* [x] Node.js: 22.0.0
* [x] ESLint: 10.0.0
* [x] TypeScript: 6

### Package Distribution [#package-distribution]

* [x] Publish ESM-Only packages

### Plugins (with ecological niche explanation) [#plugins-with-ecological-niche-explanation]

* [x] `eslint-plugin-react-x` - X Rules (renderer-agnostic, compatible with x-platform)
* [x] `eslint-plugin-react-jsx` - React Flavored JSX rules
* [x] `eslint-plugin-react-rsc` - Rules for React Server Components
* [x] `eslint-plugin-react-dom` - DOM Specific rules for React DOM
* [x] `eslint-plugin-react-web-api` - Rules for interacting with Web APIs
* [x] `eslint-plugin-react-naming-convention` - Naming convention rules designed for React projects
* [x] ~~`eslint-plugin-react-hooks-extra`~~ - Extra Hooks rules for React (removed in 2.14.0, rules migrated to `eslint-plugin-react-x`)
* ... (Free to combine with other plugins from the community)

### Add codemod feature to rules that can be safely transformed using auto-fix [#add-codemod-feature-to-rules-that-can-be-safely-transformed-using-auto-fix]

* [x] `react-x/no-component-did-update`
* [x] `react-x/no-component-will-receive-props`
* [x] `react-x/no-component-will-update`
* [x] `react-x/no-context-provider`
* [x] `react-x/no-forward-ref`
* [x] `react-x/no-string-refs`

### Add auto-fix feature to rules that can be safely fixed [#add-auto-fix-feature-to-rules-that-can-be-safely-fixed]

* [x] `react-x/prefer-namespace-import`
* [x] `react-dom/prefer-namespace-import`

### Add suggestion fix feature to rules that can be fixed interactively [#add-suggestion-fix-feature-to-rules-that-can-be-fixed-interactively]

* [x] `react-dom/no-missing-button-type`
* [x] `react-dom/no-missing-iframe-sandbox`
* [x] `react-dom/no-unsafe-target-blank`

### New Rules [#new-rules-3]

* [x] `react-jsx/no-comment-textnodes` - Disallow text nodes with comments in JSX (Replaces `no-comment-textnodes`)
* [x] `react-x/no-context-provider` - Replaces usage of `<Context.Provider>` with `<Context>` (React 19)
* [x] `react-x/no-forward-ref` - Replaces usage of `forwardRef` with passing `ref` as a prop (React 19)
* [x] `react-x/no-use-context` - Replaces usage of `useContext` with `use` (React 19)
* [x] `react-x/prefer-namespace-import` - Enforces the use of namespace imports for React (Replaces `prefer-react-namespace-import`)
* [x] `react-dom/no-hydrate` - Replaces usage of `ReactDOM.hydrate()` with `hydrateRoot()` (React 19)
* [x] `react-dom/no-render` - Replaces usage of `ReactDOM.render()` with `createRoot(node).render()` (React 19)
* [x] `react-dom/no-use-form-state` - Replaces the usages of `useFormState()` to use `useActionState()` (React 19)
* [x] `react-dom/prefer-namespace-import` - Enforces the use of namespace imports for ReactDOM
* [x] `naming-convention/context-name` - Enforces the context name to be a valid component name with the suffix `Context` (React 19)

### Removed Rules [#removed-rules-3]

* [x] `react-x/avoid-shorthand-boolean` - Removed
* [x] `react-x/avoid-shorthand-fragment` - Removed
* [x] `react-x/no-comment-textnodes` - Replaced by `react-jsx/no-comment-textnodes`
* [x] `react-x/prefer-react-namespace-import` - Replaced by `prefer-namespace-import`
* [x] `react-x/prefer-shorthand-boolean` - Removed
* [x] `react-x/prefer-shorthand-fragment` - Removed
* [x] `react-hooks-extra/no-direct-set-state-in-use-layout-effect` - Merged into `hooks-extra/no-direct-set-state-in-use-effect`


# Third-Party Plugins (/docs/third-party-plugins)





<Callout type="warn" title="Under Construction">
  This page is under construction.
</Callout>

<InlineTOC items="toc">
  Table of Contents
</InlineTOC>

## Recommended Third-Party Plugins [#recommended-third-party-plugins]

The following plugins cover areas not currently addressed by ESLint React and are recommended for specific use cases.

### JSX Style [#jsx-style]

<GitHubRepoGrid
  repos="[
{ owner: &#x22;eslint-stylistic&#x22;, repo: &#x22;eslint-stylistic&#x22; },
{ owner: &#x22;azat-io&#x22;, repo: &#x22;eslint-plugin-perfectionist&#x22; },
]"
/>

**[ESLint Stylistic](https://eslint.style/rules?filter=jsx#rules)** (`@stylistic/eslint-plugin`) provides **19 JSX-specific rules**, including:

| Rule                                                                                              | Description                                              |
| ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| [`jsx-closing-bracket-location`](https://eslint.style/rules/default/jsx-closing-bracket-location) | Enforce closing bracket location in JSX                  |
| [`jsx-closing-tag-location`](https://eslint.style/rules/default/jsx-closing-tag-location)         | Enforce closing tag location for multiline JSX           |
| [`jsx-curly-brace-presence`](https://eslint.style/rules/default/jsx-curly-brace-presence)         | Disallow unnecessary curly braces around string literals |
| [`jsx-curly-spacing`](https://eslint.style/rules/default/jsx-curly-spacing)                       | Enforce or disallow spaces inside JSX curly braces       |
| [`jsx-equals-spacing`](https://eslint.style/rules/default/jsx-equals-spacing)                     | Enforce or disallow spaces around `=` in JSX attributes  |
| [`jsx-first-prop-new-line`](https://eslint.style/rules/default/jsx-first-prop-new-line)           | Enforce first prop position in multiline JSX             |
| [`jsx-indent-props`](https://eslint.style/rules/default/jsx-indent-props)                         | Enforce props indentation                                |
| [`jsx-max-props-per-line`](https://eslint.style/rules/default/jsx-max-props-per-line)             | Limit props per line                                     |
| [`jsx-pascal-case`](https://eslint.style/rules/default/jsx-pascal-case)                           | Enforce PascalCase for user-defined components           |
| [`jsx-quotes`](https://eslint.style/rules/default/jsx-quotes)                                     | Enforce single or double quotes in JSX attributes        |
| [`jsx-self-closing-comp`](https://eslint.style/rules/default/jsx-self-closing-comp)               | Require self-closing for components without children     |
| [`jsx-tag-spacing`](https://eslint.style/rules/default/jsx-tag-spacing)                           | Enforce whitespace around JSX tags                       |
| [`jsx-wrap-multilines`](https://eslint.style/rules/default/jsx-wrap-multilines)                   | Require parentheses around multiline JSX                 |

**[`eslint-plugin-perfectionist`](https://github.com/azat-io/eslint-plugin-perfectionist)** by [@azat-io](https://github.com/azat-io) is an ESLint plugin for sorting various data such as objects, imports, types, enums, and JSX props. All rules are automatically fixable.

| Rule                                                               | Description              |
| ------------------------------------------------------------------ | ------------------------ |
| [`sort-jsx-props`](https://perfectionist.dev/rules/sort-jsx-props) | Enforce sorted JSX props |

### JSX Accessibility [#jsx-accessibility]

<GitHubRepoGrid
  repos="[
{ owner: &#x22;es-tooling&#x22;, repo: &#x22;eslint-plugin-jsx-a11y-x&#x22; },
]"
/>

**[`eslint-plugin-jsx-a11y-x`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x)** by [es-tooling](https://github.com/es-tooling) is a static AST checker for accessibility rules on JSX elements. It is a modern, actively maintained alternative to the classic `eslint-plugin-jsx-a11y`, with first-class support for ESLint Flat Config.

| Rule                                                                                                                                              | Description                                                          |
| ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| [`alt-text`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/alt-text.md)                                             | Enforce meaningful alternative text on images                        |
| [`anchor-is-valid`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/anchor-is-valid.md)                               | Enforce all anchors are valid, navigable elements                    |
| [`aria-props`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/aria-props.md)                                         | Enforce all `aria-*` props are valid                                 |
| [`aria-role`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/aria-role.md)                                           | Enforce valid, non-abstract ARIA roles                               |
| [`click-events-have-key-events`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/click-events-have-key-events.md)     | Enforce clickable elements have keyboard event listeners             |
| [`interactive-supports-focus`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/interactive-supports-focus.md)         | Enforce interactive handlers are on focusable elements               |
| [`label-has-associated-control`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/label-has-associated-control.md)     | Enforce `label` tags have text label and associated control          |
| [`no-autofocus`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/no-autofocus.md)                                     | Disallow `autoFocus` prop                                            |
| [`no-static-element-interactions`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/no-static-element-interactions.md) | Enforce non-interactive visible elements with handlers have a `role` |
| [`prefer-tag-over-role`](https://github.com/es-tooling/eslint-plugin-jsx-a11y-x/blob/main/docs/rules/prefer-tag-over-role.md)                     | Enforce semantic DOM elements over ARIA `role` property              |

### React Refresh [#react-refresh]

<GitHubRepoGrid
  repos="[
{ owner: &#x22;ArnaudBarre&#x22;, repo: &#x22;eslint-plugin-react-refresh&#x22; },
]"
/>

**[`eslint-plugin-react-refresh`](https://github.com/ArnaudBarre/eslint-plugin-react-refresh)** by [@ArnaudBarre](https://github.com/ArnaudBarre) validates that your components can be safely updated with Fast Refresh (hot reloading).

| Rule                                                                                                   | Description                                                                          |
| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
| [`only-export-components`](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/tree/main#usage) | Ensures files only export React components to avoid Fast Refresh boundaries breaking |

**Key features**:

* Single, focused rule that catches common Fast Refresh pitfalls
* Built-in presets for **Vite** (`allowConstantExport`) and **Next.js** (allows exports like `revalidate` and `fetchCache`)
* Configurable options for custom HOCs (`extraHOCs`) and framework-specific exports (`allowExportNames`)

### React Import Style [#react-import-style]

<GitHubRepoGrid
  repos="[
{ owner: &#x22;marcalexiei&#x22;, repo: &#x22;eslint-plugin-react-import&#x22; },
]"
/>

**[`eslint-plugin-react-import`](https://github.com/marcalexiei/eslint-plugin-react-import)** by [@marcalexiei](https://github.com/marcalexiei) enforces consistent React import patterns across your codebase.

| Rule                                                                                                                       | Description                                                                  |
| -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| [`consistent-syntax`](https://github.com/marcalexiei/eslint-plugin-react-import/blob/main/docs/rules/consistent-syntax.md) | Enforces a uniform React import style (namespace, default, or named imports) |

**Use case**: Ideal for teams standardizing on `import * as React from "react"` or any single import convention.

If you maintain or know of a plugin that should be listed here, feel free to [open an issue](https://github.com/Rel1cx/eslint-react/issues/new).


# Configure Analyzer (/docs/configuration/configure-analyzer)





ESLint React reads analyzer properties from the `react-x` key within ESLint's [`settings`](https://eslint.org/docs/latest/use/configure/configuration-files#configuring-shared-settings) object.

You can provide the following properties to customize the analyzer's behavior:

```ts title="eslint.config.ts"
export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.2.7", // React version for analysis
        // ...other properties
      },
    },
  },
];
```

## Properties [#properties]

<AnalyzerPropertyTypeTable />

## Basic Configuration [#basic-configuration]

### `version` [#version]

Defines the React version for semantic analysis.

* `detect`: Auto-detects from project dependencies (defaults to `19.2.7` if undetectable)
* `string`: Explicit version specification (ex: `"18.3.1"`)

### `importSource` [#importsource]

Customizes the import source for React modules. Useful for non-standard React distributions.

Example using `@pika/react` instead of `react`:

```ts
import React from "@pika/react";
```

### `compilationMode` [#compilationmode]

Specifies the React Compiler [`compilationMode`](https://react.dev/reference/react-compiler/compilationMode) used in your React Compiler config.

This allows rules to align their behavior with the React Compiler's optimization strategies. Set this to the same value as your React Compiler config (ex: `"infer"`, `"annotation"`, `"syntax"`, or `"all"`).

## Advanced Configuration [#advanced-configuration]

<Callout type="warn">
  The basic configuration is sufficient for most projects. Over-reliance on advanced configuration options will reduce the portability of your code across different tooling ecosystems.
</Callout>

### `polymorphicPropName` [#polymorphicpropname]

Defines the prop name used for polymorphic components. Helps rules determine the rendered element type.

Example with `polymorphicPropName` set to `as`:

```tsx
<Box as="h3">Hello</Box>
// Evaluated as an h3 element
```

### `additionalRefHooks` [#additionalrefhooks]

A regex pattern for matching custom hooks that should be treated as ref hooks. The value must be a valid JavaScript RegExp string with delimiters and flags.

Example matching `useMyRef` and `useCustomRef`:

```ts
additionalRefHooks: "/^(useMyRef|useCustomRef)$/u",
```

### `additionalStateHooks` [#additionalstatehooks]

A regex pattern for matching custom hooks that should be treated as state hooks. The value must be a valid JavaScript RegExp string with delimiters and flags.

Example matching `useMyState` and `useCustomState`:

```ts
additionalStateHooks: "/^(useMyState|useCustomState)$/u",
```

### `additionalEffectHooks` [#additionaleffecthooks]

A regex pattern for matching custom hooks that should be treated as effect hooks. The value must be a valid JavaScript RegExp string with delimiters and flags.

Example matching `useMyEffect` and `useCustomEffect`:

```ts
additionalEffectHooks: "/^(useMyEffect|useCustomEffect)$/u",
```

## Basic Configuration Example [#basic-configuration-example]

```ts title="eslint.config.ts"
import eslintReact from "@eslint-react/eslint-plugin";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.2.7", // Specify the React version for semantic analysis (can be "detect" for auto-detection)
        importSource: "react", // Customize the import source for the React module (defaults to "react")
      },
    },
  },
];
```

## Advanced Configuration Example [#advanced-configuration-example]

```ts title="eslint.config.ts"
import eslintReact from "@eslint-react/eslint-plugin";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.2.7",
        importSource: "react",
        polymorphicPropName: "as", // Define the prop name used for polymorphic components (ex: <Component as="div">)
        additionalRefHooks: "/^(useMyRef|useCustomRef)$/u", // Regex pattern for custom hooks treated as ref hooks
        additionalStateHooks: "/^(useMyState|useCustomState)$/u", // Regex pattern for custom hooks treated as state hooks
        additionalEffectHooks: "/^(useMyEffect|useCustomEffect)$/u", // Regex pattern for custom hooks treated as effect hooks
      },
    },
  },
];
```

## Advanced Configuration Example with React Compiler [#advanced-configuration-example-with-react-compiler]

```ts title="babel.config.ts"
export const compilationMode = "annotation";

export default {
  plugins: [
    [
      "babel-plugin-react-compiler", {
        compilationMode
      }
    ]
  ]
};
```

```ts title="eslint.config.ts"
import eslintReact from "@eslint-react/eslint-plugin";

import { compilationMode } from "./babel.config.ts";

export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    settings: {
      "react-x": {
        version: "19.2.7",
        importSource: "react",
        compilationMode, // Use the same compilationMode as the React Compiler config for consistent analysis
        polymorphicPropName: "as",
        additionalRefHooks: "/^(useMyRef|useCustomRef)$/u",
        additionalStateHooks: "/^(useMyState|useCustomState)$/u",
        additionalEffectHooks: "/^(useMyEffect|useCustomEffect)$/u",
      },
    },
  },
];
```


# Configure Project Config (/docs/configuration/configure-project-config)





ESLint React uses your [Project Config](/docs/glossary#project-config) for static analysis. This page details which options are used and how they affect the linting process.

## JSX Transform [#jsx-transform]

ESLint React uses [compiler options](https://www.typescriptlang.org/tsconfig/#compilerOptions) in `tsconfig.json` or `jsconfig.json` to determine the JSX transform the project is using.

The following compiler options are respected:

<JSXConfigTypeTable />

**If nothing is specified, it defaults to [`automatic`](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)**.

Since this part does not perform type checking, there is **almost no performance impact**.

## Type Information [#type-information]

ESLint React uses the Typed Linting API from `typescript-eslint` to retrieve type information for the rules that require it.

The following rules require type information:

* [`react-x/no-implicit-children`](/docs/rules/no-implicit-children)
* [`react-x/no-implicit-key`](/docs/rules/no-implicit-key)
* [`react-x/no-implicit-ref`](/docs/rules/no-implicit-ref)
* [`react-x/no-leaked-conditional-rendering`](/docs/rules/no-leaked-conditional-rendering)
* [`react-x/no-unused-props`](/docs/rules/no-unused-props)

<Callout type="warn">
  Some rules, such as `react-x/no-leaked-conditional-rendering`, work better when certain TypeScript compiler options are enabled. We recommend enabling `strictNullChecks` in your `tsconfig.json` or `jsconfig.json`:

  ```json
  {
    "compilerOptions": {
      "strictNullChecks": true,
      // ...
    }
  }
  ```
</Callout>

**The `project` or `projectService` options in `parserOptions` must be set correctly for the rules to work**.

Enabling these rules **will have performance impact**, but they are more powerful than traditional lint rules.

## Resources [#resources]

For more information, see:

* [TSConfig Reference](https://www.typescriptlang.org/tsconfig)
* [TypeScript ESLint Parser Options](https://typescript-eslint.io/packages/parser)
  * [`project`](https://typescript-eslint.io/packages/parser/#project)
  * [`projectService`](https://typescript-eslint.io/packages/parser/#projectservice)
* [Linting with Type Information](https://typescript-eslint.io/getting-started/typed-linting/)


# Configure Project Rules (/docs/configuration/configure-project-rules)



Configure [Project Rules](/docs/glossary#project-rules) using `@eslint-react/kit`.

<Callout type="warn">
  This module is currently in **beta**. APIs may change in future releases.
</Callout>

<Callout type="info">
  This utility module is for advanced use cases where you need to build custom ESLint rules tailored to your project's specific requirements. For full documentation on the kit module, including API reference and examples, see the [Kit documentation](/docs/packages/kit).
</Callout>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash copy
    npm install --save-dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash copy
    pnpm add --save-dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash copy
    yarn add --dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash copy
    bun add --dev @eslint-react/kit
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Quick Start [#quick-start]

Define custom rules directly in your `eslint.config.ts`:

```ts twoslash title="eslint.config.ts"
import eslintJs from "@eslint/js";
import eslintReact from "@eslint-react/eslint-plugin";
import eslintReactKit, { merge } from "@eslint-react/kit";
import type { RuleFunction } from "@eslint-react/kit";
import { defineConfig } from "eslint/config";
import tseslint from "typescript-eslint";

/** Enforce function declarations for function components. */
function functionComponentDefinition(): RuleFunction {
  return (context, { collect }) => {
    const { query, visitor } = collect.components(context);
    return merge(
      visitor,
      {
        "Program:exit"(program) {
          for (const { node } of query.all(program)) {
            if (node.type === "FunctionDeclaration") continue;
            context.report({
              node,
              message: "Function components must be defined with function declarations.",
            });
          }
        },
      },
    );
  };
}

export default defineConfig(
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      eslintJs.configs.recommended,
      tseslint.configs.recommended,
      eslintReact.configs["recommended-typescript"],
      eslintReactKit()
        .use(functionComponentDefinition)
        .getConfig(),
    ],
  },
);
```

<Callout type="info">
  The rule name is derived automatically from the function name (`functionComponentDefinition` → `function-component-definition`), and registered as `@eslint-react/kit/function-component-definition` at `"error"` severity.
</Callout>

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Configuration (/docs/configuration)





ESLint React is highly configurable. Depending on your needs, you can customize the analyzer's behavior, align the linting process with your project's TypeScript configuration, or even write custom rules specific to your codebase.

Explore the following sections to learn more about the configuration options available:

<Cards>
  <Card title="Configure Analyzer" description="Learn how to customize the static analysis behavior of ESLint React, such as specifying the React version, custom import sources, or React Compiler modes." href="/docs/configuration/configure-analyzer" />

  <Card title="Configure Project Rules" description="Build custom ESLint rules tailored to your project's specific requirements using the @eslint-react/kit utility module." href="/docs/configuration/configure-project-rules" />

  <Card title="Configure Project Config" description="Understand how ESLint React uses your project's configuration files (like tsconfig.json) to determine the JSX transform and retrieve type information." href="/docs/configuration/configure-project-config" />
</Cards>

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Getting Started (/docs/getting-started)





Welcome to ESLint React! To get started, choose the setup guide that best matches your project's primary language. We provide dedicated instructions for both TypeScript and JavaScript environments.

Choose your environment below to begin:

<Cards>
  <Card title="JavaScript" description="Getting started using ESLint React in your JavaScript React project." href="/docs/getting-started/javascript" />

  <Card title="TypeScript" description="Getting started using ESLint React in your TypeScript React project." href="/docs/getting-started/typescript" />
</Cards>


# JavaScript (/docs/getting-started/javascript)





<Callout type="info" title="This instruction requires the following minimum versions:">
  * Node.js: 22.0.0
  * ESLint: 10.3.0
  * TypeScript: 5.0.0
</Callout>

<Steps>
  <Step>
    ## Installation [#installation]

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash copy
        npm install --save-dev globals eslint @eslint/js @eslint-react/eslint-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash copy
        pnpm add --save-dev globals eslint @eslint/js @eslint-react/eslint-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash copy
        yarn add --dev globals eslint @eslint/js @eslint-react/eslint-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash copy
        bun add --dev globals eslint @eslint/js @eslint-react/eslint-plugin
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ## Configure ESLint [#configure-eslint]

    ```ts title="eslint.config.ts"
    import globals from "globals";
    import eslintJs from "@eslint/js";
    import eslintReact from "@eslint-react/eslint-plugin";
    import { defineConfig } from "eslint/config";

    export default defineConfig(
      {
        files: ["**/*.js", "**/*.jsx"],

        // Extend recommended rule sets from:
        // 1. ESLint JS's recommended rules
        // 2. ESLint React's recommended rules
        extends: [
          eslintJs.configs.recommended,
          eslintReact.configs.recommended
        ],

        // Configure language/parsing options
        languageOptions: {
          // Include browser global variables (window, document, etc.)
          globals: {
            ...globals.browser,
          },
          parserOptions: {
            ecmaFeatures: {
              jsx: true, // Enable JSX syntax support
            },
          },
        },

        // Custom rule overrides (modify rule levels or disable rules)
        rules: {
          "@eslint-react/no-missing-key": "warn",
        },
      },
    );
    ```
  </Step>

  <Step>
    ## Configure [Project Config](/docs/glossary#project-config) (Optional) [#configure-project-config-optional]

    ```jsonc title="jsconfig.json"
    {
      "compilerOptions": {
        // ...other options
        "jsx": "react-jsx",
        "strictNullChecks": true // Recommended for better type inference
      },
      "include": ["**/*.js", "**/*.jsx"]
    }
    ```

    <Callout title="TIP">
      Once you've correctly configured the project for the files to be linted, ESLint React utilizes the information from the TypeScript compiler to provide better linting results.

      For more information, see the [Configure Project Config](/docs/configuration/configure-project-config) section.
    </Callout>
  </Step>
</Steps>


# TypeScript (/docs/getting-started/typescript)





<Callout type="info" title="This instruction requires the following minimum versions:">
  * Node.js: 22.0.0
  * ESLint: 10.3.0
  * TypeScript: 5.0.0
</Callout>

<Steps>
  <Step>
    ## Installation [#installation]

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash copy
        npm install --save-dev typescript-eslint @eslint/js @eslint-react/eslint-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash copy
        pnpm add --save-dev typescript-eslint @eslint/js @eslint-react/eslint-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash copy
        yarn add --dev typescript-eslint @eslint/js @eslint-react/eslint-plugin
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash copy
        bun add --dev typescript-eslint @eslint/js @eslint-react/eslint-plugin
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ## Configure ESLint [#configure-eslint]

    ```ts title="eslint.config.ts"
    import eslintReact from "@eslint-react/eslint-plugin";
    import eslintJs from "@eslint/js";
    import { defineConfig } from "eslint/config";
    import tseslint from "typescript-eslint";

    export default defineConfig(
      {
        files: ["**/*.ts", "**/*.tsx"],

        // Extend recommended rule sets from:
        // 1. ESLint JS's recommended rules
        // 2. TypeScript ESLint recommended rules
        // 3. ESLint React's recommended-typescript rules
        extends: [
          eslintJs.configs.recommended,
          tseslint.configs.recommended,
          eslintReact.configs["recommended-typescript"],
        ],

        // Configure language/parsing options
        languageOptions: {
          // Use TypeScript ESLint parser for TypeScript files
          parser: tseslint.parser,
          parserOptions: {
            // Enable project service for better TypeScript integration
            projectService: true,
            tsconfigRootDir: import.meta.dirname,
          },
        },

        // Custom rule overrides (modify rule levels or disable rules)
        rules: {
          "@eslint-react/no-missing-key": "warn",
        },
      },
    );
    ```
  </Step>

  <Step>
    ## Configure [Project Config](/docs/glossary#project-config) (Optional) [#configure-project-config-optional]

    ```jsonc title="tsconfig.json"
    {
      "compilerOptions": {
        // ...other options
        "jsx": "react-jsx",
        "strictNullChecks": true // Recommended for better type inference
      },
      "include": ["**/*.ts", "**/*.tsx"]
    }
    ```

    <Callout title="TIP">
      Once you've correctly configured the project for the files to be linted, ESLint React utilizes the information from the TypeScript compiler to provide better linting results.

      For more information, see the [Configure Project Config](/docs/configuration/configure-project-config) section.
    </Callout>
  </Step>
</Steps>


# Packages (/docs/packages)





<Callout type="warn" title="Under Construction">
  This page is under construction.
</Callout>

ESLint React provides a set of utility packages designed to help you build custom React rules and analyze React code.

Explore the available packages below:

<Cards>
  <Card title="@eslint-react/kit" description="ESLint React's toolkit for building custom React rules with JavaScript functions." href="/docs/packages/kit" />
</Cards>

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# @eslint-react/kit (/docs/packages/kit)





<Callout type="warn">
  This module is currently in **beta**. APIs may change in future releases.
</Callout>

## Installation [#installation]

```sh
npm install --save-dev @eslint-react/kit
```

## Quick Start [#quick-start]

```ts twoslash title="eslint.config.ts"
import eslintReact from "@eslint-react/eslint-plugin";
import eslintReactKit, { merge } from "@eslint-react/kit";
import type { RuleFunction } from "@eslint-react/kit";
import eslintJs from "@eslint/js";
import { defineConfig } from "eslint/config";
import tseslint from "typescript-eslint";

/** Enforce function declarations for function components. */
function functionComponentDefinition(): RuleFunction {
  return (context, { collect }) => {
    const { query, visitor } = collect.components(context);
    return merge(
      visitor,
      {
        "Program:exit"(program) {
          for (const { node } of query.all(program)) {
            if (node.type === "FunctionDeclaration") continue;
            context.report({
              node,
              message: "Function components must be defined with function declarations.",
            });
          }
        },
      },
    );
  };
}

export default defineConfig(
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      eslintJs.configs.recommended,
      tseslint.configs.recommended,
      eslintReact.configs["recommended-typescript"],
      eslintReactKit()
        .use(functionComponentDefinition)
        .getConfig(),
    ],
  },
);
```

The rule name is derived automatically from the function name (`functionComponentDefinition` → `function-component-definition`), and registered as `@eslint-react/kit/function-component-definition` at `"error"` severity.

## API Reference [#api-reference]

### `eslintReactKit` (default export) [#eslintreactkit-default-export]

```ts
import eslintReactKit from "@eslint-react/kit";

eslintReactKit(): Builder
```

Creates a `Builder` instance for registering custom rules via the chainable `.use()` API.

### `RuleFunction` [#rulefunction]

```ts
import type { RuleFunction } from "@eslint-react/kit";

type RuleFunction = (context: RuleContext, toolkit: RuleToolkit) => RuleListener;
```

A function that receives the ESLint rule context and the structured `RuleToolkit` toolkit, and returns a `RuleListener` (AST visitor object).

Rules are defined as **named functions** that return a `RuleFunction`. The function name is automatically converted to kebab-case and used as the rule name under the `@eslint-react/kit` plugin namespace.

```ts
// Function name `noForwardRef` → rule name `no-forward-ref`
// Registered as `@eslint-react/kit/no-forward-ref`
function noForwardRef(): RuleFunction {
  return (context, { is }) => ({ ... });
}

// Functions that accept options work the same way
function forbidElements({ forbidden }: ForbidElementsOptions): RuleFunction {
  return (context) => ({ ... });
}
```

<Accordions>
  <Accordion title="Anonymous Rules">
    When you use an **anonymous function** (arrow function without a name) with `.use()`, a random hex string is automatically generated as the rule name:

    ```ts
    // Registered as `@eslint-react/kit/a1b2c3d4e5f67890`
    eslintReactKit().use(() => (context) => ({
      CallExpression(node) {
        // Critical check that cannot be easily disabled
      },
    }));
    ```

    Anonymous rules are ideal for checks that are **critical to code quality or security** and should never be bypassed via disable comments:

    ```ts
    // This critical security check cannot be easily disabled by developers
    eslintReactKit().use(() => (context) => ({
      Property(node) {
        // Prevent direct construction of '__html' objects in product code
        if (node.key.type === "Identifier" && node.key.name === "__html") {
          context.report({
            node,
            message: "Do not construct '__html' objects directly. Use a sanitization library or receive them from server-side code.",
          });
        }
      },
    }));
    ```

    **Note:** Since the rule name is random and changes on every ESLint run, developers cannot use standard rules configs or disable comments like:

    ```ts
    // This will NOT work - the rule name is random!
    { rules: { "@eslint-react/kit/01KNE2WSJ8011D2HXE3A6H717C": "off" } }

    // This will NOT work - the rule name is random!
    // eslint-disable-next-line @eslint-react/kit/01KNE2WSJ8011D2HXE3A6H717C
    ```

    To disable an anonymous rule, developers must modify the ESLint configuration file directly, which provides an audit trail for policy violations.
  </Accordion>
</Accordions>

### `Builder` [#builder]

```ts
interface Builder {
  use<F extends (...args: any[]) => RuleFunction>(factory: F, ...args: Parameters<F>): Builder;
  getConfig(): Linter.Config;
  getPlugin(): ESLint.Plugin;
}
```

A chainable builder for registering custom rules.

| Method      | Description                                                                                                                |
| ----------- | -------------------------------------------------------------------------------------------------------------------------- |
| `use`       | Registers a rule factory. The rule name is `kebabCase(factory.name)`. Options type is inferred from the factory signature. |
| `getConfig` | Returns a `Linter.Config` with all registered rules enabled at `"error"` severity.                                         |
| `getPlugin` | Returns an `ESLint.Plugin` containing the registered rules and plugin metadata.                                            |

#### `getConfig` [#getconfig]

Returns a flat `Linter.Config` object with all registered rules set to `"error"`. This is a convenience wrapper that calls `getPlugin()` internally and adds the plugin plus rule entries to the config.

```ts
eslintReactKit()
  .use(noForwardRef) // no-arg factory
  .use(version, "19") // factory with inferred options
  .getConfig();
```

#### `getPlugin` [#getplugin]

Returns an `ESLint.Plugin` object containing the registered rules and plugin metadata (`name` and `version`). Use this when you need finer-grained control over how the plugin is integrated into your ESLint configuration.

```ts title="eslint.config.ts"
const kit = eslintReactKit()
  .use(noForwardRef)
  .use(version, "19");

// Retrieve the raw plugin object
const plugin = kit.getPlugin();

// Use it in a custom flat config with your own namespace and severity
export default [
  {
    files: ["**/*.{ts,tsx}"],
    plugins: {
      react: plugin,
    },
    rules: {
      "react/version": "error",
      "react/no-forward-ref": "error",
    },
  },
];
```

### `merge` [#merge]

```ts
import { merge } from "@eslint-react/kit";

merge(...listeners: RuleListener[]): RuleListener
```

Merges multiple `RuleListener` (visitor) objects into a single listener. When two or more listeners define the same visitor key, the handlers are chained and execute in order.

This is essential for combining a collector's `visitor` with your own inspection logic.

## `RuleToolkit` — the toolkit object [#ruletoolkit--the-toolkit-object]

The second argument passed to the `RuleFunction` function is a structured `RuleToolkit` object:

```
kit
├── collect            -> Semantic collectors (components, hooks)
├── is                 -> All predicates (component, hook, React API, import source)
├── ast                -> AST utilities (unwrap type expressions)
├── hint               -> Detection hint bit-flags
├── flag               -> Component characteristic bit-flags
├── settings           -> Normalized ESLint React settings
```

***

### `collect` [#collect]

Collector factories create a `{ query, visitor }` pair. The `visitor` must be merged into your rule listener via `merge()`. After traversal completes, `query.all(program)` yields all detected semantic nodes.

| Method                          | Returns                                               | Description                                                                             |
| ------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------- |
| `components(context, options?)` | `CollectorWithContext<FunctionComponentSemanticNode>` | Detects function components. Options: `{ hint?: bigint, collectDisplayName?: boolean }` |
| `hooks(context)`                | `CollectorWithContext<HookSemanticNode>`              | Detects custom hook definitions.                                                        |

**`CollectorWithContext`** extends `Collector` with contextual queries:

| Query                | Description                               |
| -------------------- | ----------------------------------------- |
| `query.all(program)` | All collected semantic nodes in the file. |

***

### `is` [#is]

All predicates live under `kit.is` — organized into four sub-sections.

#### Component [#component]

| Predicate                  | Signature                 | Description                                                                 |
| -------------------------- | ------------------------- | --------------------------------------------------------------------------- |
| `componentDecl`            | `(node, hint) -> boolean` | Whether a function node is a component. (context pre-bound)                 |
| `componentName`            | `(name) -> boolean`       | Strict PascalCase component name check.                                     |
| `componentNameLoose`       | `(name) -> boolean`       | Loose component name check.                                                 |
| `componentWrapperCall`     | `(node) -> boolean`       | Whether a node is a `memo(…)` or `forwardRef(…)` call. (context pre-bound)  |
| `componentWrapperCallback` | `(node) -> boolean`       | Whether a function is the callback passed to a wrapper. (context pre-bound) |

#### Hook [#hook]

General hook predicates:

| Predicate                  | Signature                             | Description                                                  |
| -------------------------- | ------------------------------------- | ------------------------------------------------------------ |
| `hookDecl`                 | `(node) -> boolean`                   | Whether a function node is a hook (by name).                 |
| `hookCall`                 | `(node) -> boolean`                   | Whether a node is a hook call.                               |
| `hookName`                 | `(name) -> boolean`                   | Whether a string matches the `use[A-Z]` convention.          |
| `useEffectLikeCall`        | `(node, additionalHooks?) -> boolean` | Whether a node is a `useEffect`/`useLayoutEffect`-like call. |
| `useRefLikeCall`           | `(node, additionalHooks?) -> boolean` | Whether a node is a `useRef`-like call.                      |
| `useStateLikeCall`         | `(node, additionalHooks?) -> boolean` | Whether a node is a `useState`-like call.                    |
| `useEffectSetupCallback`   | `(node) -> boolean`                   | Whether a node is a useEffect setup function.                |
| `useEffectCleanupCallback` | `(node) -> boolean`                   | Whether a node is a useEffect cleanup function.              |

#### React API [#react-api]

Factory functions (context pre-bound):

| Predicate | Signature                        | Description                                                                  |
| --------- | -------------------------------- | ---------------------------------------------------------------------------- |
| `API`     | `(apiName) -> (node) -> boolean` | Factory: creates a predicate for a React API identifier. (context pre-bound) |
| `APICall` | `(apiName) -> (node) -> boolean` | Factory: creates a predicate for a React API call. (context pre-bound)       |

All React API predicates and factories have `context` pre-bound — no need to pass the rule context manually:

```ts
// Direct check
is.memoCall(node);

// Useful in filter/find
nodes.filter(is.memoCall);

// Factory for any API name
const isCreateRefCall = is.APICall("createRef");

// Returns true when the node is a call to `createRef`
isCreateRefCall(node);
```

<Accordions>
  <Accordion title="Why `is.API` / `is.APICall` instead of a hand-written check?">
    <Callout type="warn" title="Under Construction">
      This part is under construction.
    </Callout>

    Consider this single statement:

    ```ts
    const ownerStack = ((React as any).captureOwnerStack)?.()! satisfies OwnerStack;
    ```

    The call to `captureOwnerStack` is nested within four layers of syntax:

    1. a `React as any` cast (`TSAsExpression`),
    2. an optional call (`?.()` → `ChainExpression`),
    3. a trailing non-null assertion (`!` → `TSNonNullExpression`), and
    4. a `satisfies OwnerStack` clause (`TSSatisfiesExpression`).

    A naive guard such as `node.callee.type === "Identifier" && node.callee.name === "captureOwnerStack"` matches **nothing**: the callee is not an `Identifier` — it is a `MemberExpression` whose `object` is a `TSAsExpression`.

    `is.APICall("captureOwnerStack")` still returns `true`, because the factory:

    * runs `ast.unwrap` first, peeling off `ChainExpression` and TS wrappers (`TSAsExpression`, `TSSatisfiesExpression`, `TSNonNullExpression`, `TSTypeAssertion`, parentheses) until it reaches the real callee;
    * matches on the **fully-qualified name**, so a single predicate covers both the bare `captureOwnerStack` and the namespaced `React.captureOwnerStack` (any name ending in `.captureOwnerStack`).

    Use `is.API(name)` for the reference itself and `is.APICall(name)` for a call to it. Hand-rolling this means re-implementing unwrapping and member-expression resolution for **every** API — and breaking the moment someone adds a `?.`, an `as`, or a `React.` prefix.
  </Accordion>
</Accordions>

***

### `ast` [#ast]

Low-level AST utilities for handling TypeScript-specific syntax.

| Method       | Signature                      | Description                                                                                                                                                                                                                                  |
| ------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `findParent` | `(node, test) -> Node \| null` | Walks up the AST from the given node and returns the first ancestor that satisfies the predicate, stopping at `Program`. Returns `null` if no match is found.                                                                                |
| `unwrap`     | `(node) -> Node`               | Recursively strips TypeScript type-expression wrappers (`TSAsExpression`, `TSSatisfiesExpression`, `TSNonNullExpression`, `TSTypeAssertion`, `TSInstantiationExpression`) and `ChainExpression` from a node, returning the underlying value. |

***

### `hint` [#hint]

Bit-flags that control what the component collector considers a "component". Combine with bitwise OR (`|`) and remove with bitwise AND-NOT (`& ~`).

```ts
// The default hint used when none is specified
hint.component.Default;

// All available flags
hint.component.DoNotIncludeFunctionDefinedAsObjectMethod;
hint.component.DoNotIncludeFunctionDefinedAsClassMethod;
hint.component.DoNotIncludeFunctionDefinedAsArrayMapCallback;
hint.component.DoNotIncludeFunctionDefinedAsArbitraryCallExpressionCallback;
// … and more (inherits all JsxDetectionHint flags)
```

**Customization example:**

```ts
const { query, visitor } = collect.components(context, {
  // Also treat object methods as components (remove the exclusion flag)
  hint: hint.component.Default & ~hint.component.DoNotIncludeFunctionDefinedAsObjectMethod,
});
```

***

### `flag` [#flag]

Bit-flags indicating component characteristics. Check with bitwise AND (`&`).

```ts
flag.component.None; // 0n — no flags
flag.component.Memo; // wrapped in React.memo
flag.component.ForwardRef; // wrapped in React.forwardRef
```

**Usage:**

```ts
for (const component of query.all(program)) {
  if (component.flag & flag.component.Memo) {
    // This component is memoized
  }
}
```

***

### `settings` [#settings]

Exposes the normalized `react-x` settings from the ESLint shared configuration (`context.settings["react-x"]`). This lets your custom rules read and react to the same project-level settings used by the built-in rules.

| Property                | Type                                                    | Default     | Description                                               |
| ----------------------- | ------------------------------------------------------- | ----------- | --------------------------------------------------------- |
| `version`               | `string`                                                | auto-detect | Resolved React version (e.g. `"19.2.7"`).                 |
| `importSource`          | `string`                                                | `"react"`   | The module React is imported from (e.g. `"@pika/react"`). |
| `compilationMode`       | `"infer" \| "annotation" \| "syntax" \| "all" \| "off"` | `"off"`     | The React Compiler compilation mode the project uses.     |
| `polymorphicPropName`   | `string \| null`                                        | `"as"`      | Prop name used for polymorphic components.                |
| `additionalRefHooks`    | `RegExpLike`                                            | —           | Pattern matching custom hooks treated as ref hooks.       |
| `additionalStateHooks`  | `RegExpLike`                                            | —           | Pattern matching custom hooks treated as state hooks.     |
| `additionalEffectHooks` | `RegExpLike`                                            | —           | Pattern matching custom hooks treated as effect hooks.    |

`RegExpLike` is an object with a `test(s: string) => boolean` method (same interface as `RegExp`).

**Usage:**

```ts twoslash
import type { RuleFunction } from "@eslint-react/kit";

function version(major = "19"): RuleFunction {
  return (context, { settings }) => ({
    Program(program) {
      if (!settings.version.startsWith(`${major}.`)) {
        context.report({
          node: program,
          message: `This project requires React ${major}, but detected version ${settings.version}.`,
        });
      }
    },
  });
}
```

***

## Examples [#examples]

<Accordions>
  <Accordion title="Simple: Ban `forwardRef`">
    This is a simplified kit reimplementation of the built-in [`react-x/no-forward-ref`](/docs/rules/no-forward-ref) rule.

    ```ts twoslash
    import type { RuleFunction } from "@eslint-react/kit";
    import eslintReactKit, { merge } from "@eslint-react/kit";

    function noForwardRef(): RuleFunction {
      return (context, { is }) => ({
        CallExpression(node) {
          if (is.forwardRefCall(node)) {
            context.report({ node, message: "forwardRef is deprecated in React 19. Pass ref as a prop instead." });
          }
        },
      });
    }

    // Usage
    eslintReactKit()
      .use(noForwardRef)
      .getConfig();
    ```
  </Accordion>

  <Accordion title="Component: Destructure component props">
    This is a simplified kit reimplementation that enforces destructuring assignment for component props.

    ```ts twoslash
    import type { RuleFunction } from "@eslint-react/kit";
    import eslintReactKit, { merge } from "@eslint-react/kit";

    function destructureComponentProps(): RuleFunction {
      return (context, { collect }) => {
        const { query, visitor } = collect.components(context);

        return merge(visitor, {
          "Program:exit"(program) {
            for (const { node } of query.all(program)) {
              const [props] = node.params;
              if (props == null) continue;
              if (props.type !== "Identifier") continue;
              const propName = props.name;
              const propVariable = context.sourceCode.getScope(node).variables.find((v) => v.name === propName);
              const propReferences = propVariable?.references ?? [];
              for (const ref of propReferences) {
                const { parent } = ref.identifier;
                if (parent.type !== "MemberExpression") continue;
                context.report({
                  message: "Use destructuring assignment for component props.",
                  node: parent,
                });
              }
            }
          },
        });
      };
    }

    // Usage
    eslintReactKit()
      .use(destructureComponentProps)
      .getConfig();
    ```
  </Accordion>

  <Accordion title="Hooks: Warn on custom hooks that don't call other hooks">
    This is a simplified kit reimplementation of the built-in [`react-x/no-unnecessary-use-prefix`](/docs/rules/no-unnecessary-use-prefix) rule.

    ```ts twoslash
    import type { RuleFunction } from "@eslint-react/kit";
    import eslintReactKit, { merge } from "@eslint-react/kit";

    function noUnnecessaryUsePrefix(): RuleFunction {
      return (context, { collect }) => {
        const { query, visitor } = collect.hooks(context);

        return merge(visitor, {
          "Program:exit"(program) {
            for (const { node, hookCalls } of query.all(program)) {
              if (hookCalls.length === 0) {
                context.report({
                  node,
                  message: "A custom hook should use at least one hook, otherwise it's just a regular function.",
                });
              }
            }
          },
        });
      };
    }

    // Usage
    eslintReactKit()
      .use(noUnnecessaryUsePrefix)
      .getConfig();
    ```
  </Accordion>

  <Accordion title="Multiple Collectors: Error Boundaries">
    Validates usage of Error Boundaries instead of `try/catch` for errors in child components or the `use` hook.

    This is a simplified kit reimplementation of the built-in [`react-x/error-boundaries`](/docs/rules/error-boundaries) rule.

    ```ts twoslash
    import eslintReactKit, { type RuleFunction, merge } from "@eslint-react/kit";
    import type { TSESTree } from "@typescript-eslint/types";

    function isJsxLike(node: TSESTree.Node | null): boolean {
      if (node == null) return false;
      return node.type === "JSXElement" || node.type === "JSXFragment";
    }

    /** Validates usage of Error Boundaries instead of try/catch for errors in child components. */
    export function errorBoundaries(): RuleFunction {
      return (context, { ast, collect, is }) => {
        // Fast path: skip if `try` is not present in the file
        if (!context.sourceCode.text.includes("try")) return {};

        const fc = collect.components(context);
        const hk = collect.hooks(context);

        const reported = new Set<TSESTree.TryStatement>();
        const useCalls = new Set<TSESTree.CallExpression>();

        return merge(
          fc.visitor,
          hk.visitor,
          {
            CallExpression(node) {
              if (!is.useCall(node)) return;
              useCalls.add(node);
            },
            "Program:exit"(program) {
              const comps = fc.query.all(program);
              const hooks = hk.query.all(program);
              const funcs = [...comps, ...hooks];

              for (const call of useCalls) {
                const stmt = ast.findParent(call, (n) => n.type === "TryStatement");
                const func = ast.findParent(stmt, (n) => funcs.some((f) => f.node === n));
                if (stmt != null && func != null && !reported.has(stmt)) {
                  context.report({
                    node: stmt,
                    message:
                      "Use an Error Boundary instead of try/catch around the 'use' hook. The 'use' hook suspends the component, and its errors can only be caught by Error Boundaries.",
                  });
                  reported.add(stmt);
                }
              }

              for (const { rets } of funcs) {
                for (const ret of rets) {
                  if (ret == null) continue;
                  if (!isJsxLike(ret)) continue;
                  const stmt = ast.findParent(ret, (n) => n.type === "TryStatement");
                  if (stmt != null && !reported.has(stmt)) {
                    context.report({
                      node: stmt,
                      message:
                        "Use an Error Boundary to catch errors in child components. Try/catch can't catch errors during React's rendering process.",
                    });
                    reported.add(stmt);
                  }
                }
              }
            },
          },
        );
      };
    }

    // Usage
    eslintReactKit()
      .use(errorBoundaries)
      .getConfig();
    ```
  </Accordion>

  <Accordion title="Override Config: Using spread syntax with `getConfig`">
    `getConfig()` returns a plain config object. You can spread it into a new object to override or supplement its properties — for example, to scope the config to specific files or add extra settings alongside your kit rules.

    ```ts twoslash title="eslint.config.ts"
    import type { RuleFunction } from "@eslint-react/kit";

    declare function noForwardRef(): RuleFunction;

    declare function version(major: string): RuleFunction;

    // ---cut---

    import eslintReactKit from "@eslint-react/kit";

    // Spread the config into a new object to add or override properties like `files`:
    export default [
      {
        ...eslintReactKit()
          .use(noForwardRef)
          .use(version, "19")
          .getConfig(),
        // Override `name` so it shows your own label in config inspector tools
        name: "react-custom-rules",
        // Override `files` to scope the kit rules to specific source files
        files: ["src/**/*.ts", "src/**/*.tsx"],
      },
    ];
    ```

    This pattern is especially useful when composing kit configs alongside other ESLint configs (e.g. `typescript-eslint`, `eslint-plugin-react-hooks`) via `defineConfig` — you can nest the spread object inside `extends` arrays and attach shared properties like `files` or `languageOptions` at the same level.
  </Accordion>

  <Accordion title="Advanced Config: Using `getPlugin` for custom plugin namespace">
    Use `getPlugin()` when you want full control over the plugin namespace and rule severities instead of the all-in-one `getConfig()`.

    ```ts twoslash title="eslint.config.ts"
    import type { RuleFunction } from "@eslint-react/kit";

    declare function noForwardRef(): RuleFunction;

    declare function version(major: string): RuleFunction;

    // ---cut---

    import eslintReactKit from "@eslint-react/kit";

    const kit = eslintReactKit()
      .use(noForwardRef)
      .use(version, "19");

    // Instead of kit.getConfig(), use kit.getPlugin() for full control:
    const plugin = kit.getPlugin();

    export default [
      {
        files: ["**/*.{ts,tsx}"],
        plugins: {
          // Choose your own namespace
          "react-custom-rules": plugin,
        },
        rules: {
          // Set individual severities
          "react-custom-rules/no-forward-ref": "error",
          "react-custom-rules/version": "error",
        },
      },
    ];
    ```
  </Accordion>
</Accordions>

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Custom Rules Of Context (/docs/recipes/custom-rules-of-context)



## Overview [#overview]

This recipe contains custom rules for validating React Context API usage:

1. **[`noUseContext`](#nousecontext)**: Reports usage of `useContext` and suggests using `use` instead (React 19+).

## noUseContext [#nousecontext]

### Rule [#rule]

Copy the following into your project (e.g. `.config/noUseContext.ts`):

```ts title=".config/noUseContext.ts"
import type { RuleFunction } from "@eslint-react/kit";

/** Disallow 'useContext' in React 19+. Prefer 'use' instead. */
export function noUseContext(): RuleFunction {
  return (context, { is }) => ({
    CallExpression(node) {
      if (is.useContextCall(node)) {
        context.report({
          node: node.callee,
          message: "In React 19, 'use' is preferred over 'useContext' because it is more flexible.",
        });
      }
    },
  });
}
```

### Config [#config]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { noUseContext } from "./.config/noUseContext";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(noUseContext)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

### Examples [#examples]

#### Using useContext in React 19+ [#using-usecontext-in-react-19]

```tsx
import { useContext } from "react";

function Button() {
  // 🔴 Problem: 'useContext' is discouraged in React 19+. Use 'use' instead.
  const theme = useContext(ThemeContext);
  // ...
}
```

#### Using use in React 19+ [#using-use-in-react-19]

```tsx
import { use } from "react";

function Button() {
  const theme = use(ThemeContext);
  // ...
}
```

Reports when `useContext` is used. The `use` API is more flexible than `useContext` because it can be called in loops and conditional statements.

## Using All Rules [#using-all-rules]

To use all context-related rules together:

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import {
  noUseContext,
  // Additional context rules can be added here
} from "./.config";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(noUseContext)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

## Further Reading [#further-reading]

* [React Docs: Blog: New feature `use`](https://react.dev/blog/2024/12/05/react-19#new-feature-use)
* [React Docs: Reading context with `use`](https://react.dev/reference/react/use#reading-context-with-use)
* [React Docs: `useContext`](https://react.dev/reference/react/useContext)

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Custom Rules Of Props (/docs/recipes/custom-rules-of-props)



## Overview [#overview]

This recipe contains four custom rules for validating JSX props:

1. **[`noDuplicateProps`](#noduplicateprops)**: Reports duplicate props on a JSX element.
2. **[`noDirectAccessProps`](#nodirectaccessprops)**: Reports direct member expression access of component props (e.g., `props.children`) and enforces destructuring assignment instead.
3. **[`noExplicitSpreadProps`](#noexplicitspreadprops)**: Reports spreading object literals onto a JSX element instead of writing separate props. Includes auto-fix.
4. **[`noMixingControlledAndUncontrolledProps`](#nomixingcontrolledanduncontrolledprops)**: Reports mixing a controlled prop and its uncontrolled counterpart on the same element.

## noDuplicateProps [#noduplicateprops]

### Rule [#rule]

Copy the following into your project (e.g. `.config/noDuplicateProps.ts`):

```ts title=".config/noDuplicateProps.ts"
import type { RuleFunction } from "@eslint-react/kit";

/** Options for {@link noDuplicateProps}. */
export type noDuplicatePropsOptions = {
  /** Whether to ignore case when checking for duplicate props. */
  ignoreCase?: boolean;
};

/** Disallow duplicate properties in JSX. */
export function noDuplicateProps(options: noDuplicatePropsOptions = {}): RuleFunction {
  const { ignoreCase = false } = options;
  return (context) => ({
    JSXOpeningElement(node) {
      const seen = new Map<string, string>();

      // ─── Check each attribute ──────────────────────
      for (const attr of node.attributes) {
        if (attr.type !== "JSXAttribute") continue;
        if (attr.name.type !== "JSXIdentifier") continue;

        const name = ignoreCase ? attr.name.name.toLowerCase() : attr.name.name;

        // Report duplicate
        if (seen.has(name)) {
          context.report({
            node: attr,
            message: `Duplicate prop "${attr.name.name}" found.`,
          });
        } else {
          seen.set(name, attr.name.name);
        }
      }
    },
  });
}
```

### Config [#config]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { noDuplicateProps } from "./.config/noDuplicateProps";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(noDuplicateProps, { ignoreCase: true })
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

### Examples [#examples]

#### Duplicate props on a JSX element [#duplicate-props-on-a-jsx-element]

```tsx
// 🔴 Problem: duplicate props silently discard earlier values.
<div id="a" id="b" />;
```

```tsx
// 🔴 Problem: duplicate props silently discard earlier values.
<div onClick={handleA} onClick={handleB} />;
```

#### Unique props or conditional spreads [#unique-props-or-conditional-spreads]

```tsx
// 🟢 Recommended: each prop appears only once.
<div id="a" className="b" />;
```

```tsx
// 🔵 OK: spreading a variable is a common and valid pattern.
<div id="a" {...props} />;
```

Reports when a prop appears multiple times on a JSX element. Only the last occurrence takes effect, silently discarding earlier values. This is typically a copy-paste error or a merge conflict leftover.

Spread attributes are ignored because overriding them with explicit props is a common and valid pattern.

## noDirectAccessProps [#nodirectaccessprops]

### Rule [#rule-1]

Copy the following into your project (e.g. `.config/noDirectAccessProps.ts`):

```ts title=".config/noDirectAccessProps.ts"
import type { RuleFunction } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";

/** Enforce destructuring assignment for component props. */
export function noDirectAccessProps(): RuleFunction {
  return (context, { collect }) => {
    const { query, visitor } = collect.components(context);

    return merge(visitor, {
      "Program:exit"(program) {
        for (const { node } of query.all(program)) {
          const [props] = node.params;
          if (props == null) continue;
          if (props.type !== "Identifier") continue;
          const propName = props.name;
          const propVariable = context.sourceCode.getScope(node).variables.find((v) => v.name === propName);
          const propReferences = propVariable?.references ?? [];
          for (const ref of propReferences) {
            const { parent } = ref.identifier;
            if (parent.type !== "MemberExpression") continue;
            context.report({
              message: "Use destructuring assignment for component props.",
              node: parent,
            });
          }
        }
      },
    });
  };
}
```

### Config [#config-1]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { noDirectAccessProps } from "./.config/noDirectAccessProps";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(noDirectAccessProps)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

### Examples [#examples-1]

#### Accessing props via member expression [#accessing-props-via-member-expression]

```tsx
import React from "react";

type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

// 🔴 Problem: accessing props via member expression.
function Button(props: ButtonProps) {
  // 🔴 Problem: Use destructuring assignment for component props.
  return <button type="button" onClick={props.onClick}>{props.children}</button>;
}
```

```tsx
import React from "react";

type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

// 🔴 Problem: accessing props via member expression.
const Button = (props: ButtonProps) => {
  // 🔴 Problem: Use destructuring assignment for component props.
  return <button type="button" onClick={props.onClick}>{props.children}</button>;
};
```

#### Destructured props [#destructured-props]

```tsx
import React from "react";

type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

// 🟢 Recommended: destructure props in the function signature.
function Button({ children, onClick }: ButtonProps) {
  return <button type="button" onClick={onClick}>{children}</button>;
}
```

```tsx
import React from "react";

type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

// 🟢 Recommended: destructure props in the function signature.
const Button = ({ children, onClick }: ButtonProps) => {
  return <button type="button" onClick={onClick}>{children}</button>;
};
```

Reports when component props are accessed via member expressions (e.g., `props.children`).

This rule uses the `collect.components` collector from `@eslint-react/kit` to find all function component definitions in the file. For each component, it checks if the first parameter (`props`) is an `Identifier`, then finds all references to the `props` variable and reports any that are used as the object of a `MemberExpression`.

This encourages consistent destructuring patterns which improve code readability and make it easier to track which props a component uses.

## noExplicitSpreadProps [#noexplicitspreadprops]

### Rule [#rule-2]

Copy the following into your project (e.g. `.config/noExplicitSpreadProps.ts`):

```ts title=".config/noExplicitSpreadProps.ts"
import type { RuleFunction } from "@eslint-react/kit";

/** Disallow spreading object literals in JSX. Write each property as a separate prop. */
export function noExplicitSpreadProps(): RuleFunction {
  return (context) => ({
    JSXSpreadAttribute(node) {
      if (node.argument.type === "ObjectExpression") {
        context.report({
          node,
          message: "Don't spread an object literal in JSX. Write each property as a separate prop instead.",
        });
      }
    },
  });
}
```

### Config [#config-2]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { noExplicitSpreadProps } from "./.config/noExplicitSpreadProps";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(noExplicitSpreadProps)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

### Examples [#examples-2]

#### Spreading object literals in JSX [#spreading-object-literals-in-jsx]

```tsx
// 🔴 Problem: spreading an object literal hides props from view.
<Button {...{ children, onClick }} />;
```

```tsx
// 🔴 Problem: spreading an object literal hides props from view.
<input {...{ disabled: true, readOnly: true }} />;
```

#### Spreading variables or conditional expressions [#spreading-variables-or-conditional-expressions]

```tsx
// 🔵 OK: spreading a variable is a common and valid pattern.
<div {...props} />;
```

```tsx
// 🔵 OK: conditional expressions serve legitimate purposes.
<Comp {...(cond ? { a: "b" } : {})} />;
```

Reports when an object literal is spread directly onto a JSX element. This is unnecessary. Writing each property as a separate JSX attribute improves readability and makes props visible at a glance.

Only plain object literals are flagged. Conditional expressions, variables, and other non-literal spreads serve legitimate purposes and remain untouched.

## noMixingControlledAndUncontrolledProps [#nomixingcontrolledanduncontrolledprops]

### Rule [#rule-3]

Copy the following into your project (e.g. `.config/noMixingControlledAndUncontrolledProps.ts`):

```ts title=".config/noMixingControlledAndUncontrolledProps.ts"
import type { RuleFunction } from "@eslint-react/kit";

const CONTROLLED_PAIRS: [controlled: string, uncontrolled: string][] = [
  ["value", "defaultValue"],
  ["checked", "defaultChecked"],
];

/** Disallow using controlled and uncontrolled props on the same element. */
export function noMixingControlledAndUncontrolledProps(): RuleFunction {
  return (context) => ({
    JSXOpeningElement(node) {
      const props = new Set<string>();

      for (const attr of node.attributes) {
        if (attr.type === "JSXSpreadAttribute") continue;
        if (attr.name.type === "JSXNamespacedName") continue;
        props.add(attr.name.name);
      }

      for (const [controlled, uncontrolled] of CONTROLLED_PAIRS) {
        if (!props.has(controlled) || !props.has(uncontrolled)) continue;

        const attrNode = node.attributes.find(
          (a) =>
            a.type === "JSXAttribute"
            && a.name.type !== "JSXNamespacedName"
            && a.name.name === uncontrolled,
        )!;

        context.report({
          node: attrNode,
          message:
            `'${controlled}' and '${uncontrolled}' should not be used together. Use either controlled or uncontrolled mode, not both.`,
        });
      }
    },
  });
}
```

### Config [#config-3]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { noMixingControlledAndUncontrolledProps } from "./.config/noMixingControlledAndUncontrolledProps";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(noMixingControlledAndUncontrolledProps)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

### Examples [#examples-3]

#### Mixing controlled and uncontrolled props [#mixing-controlled-and-uncontrolled-props]

```tsx
// 🔴 Problem: mixing controlled and uncontrolled props causes confusing bugs.
<input value={name} defaultValue="World" />;
```

```tsx
// 🔴 Problem: mixing controlled and uncontrolled props causes confusing bugs.
<input type="checkbox" checked={isChecked} defaultChecked />;
```

#### Using either controlled or uncontrolled mode [#using-either-controlled-or-uncontrolled-mode]

```tsx
// 🟢 Recommended: controlled mode with explicit handler.
<input value={name} onChange={handleChange} />;
```

```tsx
// 🟢 Recommended: uncontrolled mode with default value.
<input defaultValue="World" />;
```

Reports when both a controlled prop and its uncontrolled counterpart appear on the same JSX element. Mixing modes is a mistake. React will silently ignore the `default*` prop and might emit a console warning, leading to confusing bugs.

Only well-known React prop pairs are checked:

| Controlled | Uncontrolled     |
| ---------- | ---------------- |
| `value`    | `defaultValue`   |
| `checked`  | `defaultChecked` |

## Using All Rules [#using-all-rules]

To use all four rules together:

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import {
  noDuplicateProps,
  noDirectAccessProps,
  noExplicitSpreadProps,
  noMixingControlledAndUncontrolledProps,
} from "./.config";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(noDuplicateProps)
      .use(noDirectAccessProps)
      .use(noExplicitSpreadProps)
      .use(noMixingControlledAndUncontrolledProps)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

## Further Reading [#further-reading]

* [React Docs: Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component)
* [React Docs: Controlled and uncontrolled components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components)

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Custom Rules Of State (/docs/recipes/custom-rules-of-state)



## Overview [#overview]

This recipe contains one custom rule for validating state usage:

1. **[`preferStateUpdaterFunction`](#preferstateupdaterfunction)**: Reports when a `useState` setter is called with an expression that directly references the corresponding state variable. Using the callback (updater function) form ensures the update uses the latest state value, avoiding stale-state bugs in closures, event handlers, and timeouts.

## preferStateUpdaterFunction [#preferstateupdaterfunction]

Copy the following code into your project (e.g. `.config/preferStateUpdaterFunction.ts`):

```ts title=".config/preferStateUpdaterFunction.ts"
import type { RuleFunction } from "@eslint-react/kit";
import type { ScopeVariable } from "@typescript-eslint/scope-manager";
import type { TSESTree } from "@typescript-eslint/types";
import { findVariable } from "@typescript-eslint/utils/ast-utils";

/** Require the updater function form of useState setters when referencing the corresponding state variable. */
export function preferStateUpdaterFunction(): RuleFunction {
  function isFunction({ type }: TSESTree.Node) {
    return type === "FunctionDeclaration" || type === "FunctionExpression" || type === "ArrowFunctionExpression";
  }
  return (context, { is, settings }) => {
    const setterToStateVar = new Map<ScopeVariable, ScopeVariable>();
    const pendingCalls: { callerVar: ScopeVariable; node: TSESTree.CallExpression }[] = [];

    return {
      CallExpression(node: TSESTree.CallExpression) {
        // Register useState pairs.
        if (is.useStateLikeCall(node, settings.additionalStateHooks)) {
          const { parent } = node;
          if (parent.type === "VariableDeclarator" && parent.id.type === "ArrayPattern") {
            const [stateEl, setterEl] = parent.id.elements;
            if (stateEl?.type === "Identifier" && setterEl?.type === "Identifier") {
              const scope = context.sourceCode.getScope(node);
              const stateVar = findVariable(scope, stateEl.name);
              const setterVar = findVariable(scope, setterEl.name);
              if (stateVar != null && setterVar != null) {
                setterToStateVar.set(setterVar, stateVar);
              }
            }
          }
          return;
        }

        // Queue potential setter calls for deferred checking at Program:exit,
        // so that useState pairs declared after the setter call are still detected.
        if (node.callee.type !== "Identifier") return;
        const scope = context.sourceCode.getScope(node);
        const callerVar = findVariable(scope, node.callee.name);
        if (callerVar != null) {
          pendingCalls.push({ callerVar, node });
        }
      },

      "Program:exit"() {
        for (const { callerVar, node } of pendingCalls) {
          if (!setterToStateVar.has(callerVar)) continue;
          const stateVar = setterToStateVar.get(callerVar)!;
          const arg = node.arguments[0];
          if (arg == null) continue;

          // Already using the callback form.
          if (isFunction(arg)) continue;

          // Check if the argument contains a reference to the state variable.
          const [argStart, argEnd] = arg.range!;
          const hasStateRef = stateVar.references.some(
            (ref) =>
              argStart <= ref.identifier.range![0]
              && ref.identifier.range![1] <= argEnd,
          );

          if (hasStateRef) {
            context.report({
              node,
              message: `Do not reference '${
                context.sourceCode.getText(node.callee)
              }' directly; use the updater function form instead.`,
            });
          }
        }
      },
    };
  };
}
```

## Config [#config]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { preferStateUpdaterFunction } from "./.config/preferStateUpdaterFunction";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(preferStateUpdaterFunction)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

## Examples [#examples]

### Referencing state directly in the setter [#referencing-state-directly-in-the-setter]

```tsx
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  // 🔴 Problem: Referencing `count` directly creates a stale state risk.
  return (
    <button onClick={() => setCount(count + 1)}>
      {/*                           ^^^^^ Do not reference 'setCount' directly; use the updater function form instead. */}
      {count}
    </button>
  );
}
```

```tsx
import { useState } from "react";

function Toggle() {
  const [enabled, setEnabled] = useState(false);

  // 🔴 Problem: Negating state directly creates a stale state risk.
  return (
    <button onClick={() => setEnabled(!enabled)}>
      {/*                             ^^^^^^^^ Do not reference 'setEnabled' directly; use the updater function form instead. */ }
      {enabled ? "On" : "Off"}
    </button>
  );
}
```

```tsx
import { useState } from "react";

function UserEditor() {
  const [user, setUser] = useState({ name: "John", age: 25 });

  // 🔴 Problem: Spreading state directly creates a stale state risk.
  const updateAge = () => setUser({ ...user, age: 30 });
  //                                   ^^^^ Do not reference 'setUser' directly; use the updater function form instead.

  return <button onClick={updateAge}>Update Age</button>;
}
```

```tsx
import { useState } from "react";

function ItemList() {
  const [items, setItems] = useState(["a", "b"]);

  // 🔴 Problem: Calling a method on state directly creates a stale state risk.
  const addItem = () => setItems([...items, "c"]);
  //                                 ^^^^^ Do not reference 'setItems' directly; use the updater function form instead.

  return <button onClick={addItem}>Add</button>;
}
```

### Using the updater function or a constant value [#using-the-updater-function-or-a-constant-value]

```tsx
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  // 🟢 Recommended: Callback form always gets the latest state.
  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
      {count}
    </button>
  );
}
```

```tsx
import { useState } from "react";

function Component() {
  const [count, setCount] = useState(0);

  // 🔵 OK: Setting a constant value does not reference state.
  return <button onClick={() => setCount(0)}>Reset</button>;
}
```

```tsx
import { useState } from "react";

function Component() {
  const [user, setUser] = useState({ name: "John" });
  const newUserFromApi = { name: "Jane" };

  // 🔵 OK: Setting a value that does not reference the state variable.
  setUser(newUserFromApi);

  return <div />;
}
```

```tsx
import { useState } from "react";

function Component() {
  const [count, setCount] = useState(0);
  const [total, setTotal] = useState(100);

  // 🔵 OK: Referencing a *different* state variable is fine.
  setCount(total);

  return <div />;
}
```

## Using All Rules [#using-all-rules]

To use all state-related rules together:

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import {
  preferStateUpdaterFunction,
  // Additional state rules can be added here
} from "./.config";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(preferStateUpdaterFunction)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

## Further Reading [#further-reading]

* [React Docs: Updating state based on the previous state](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state)

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Function Component Definition (/docs/recipes/function-component-definition)



## Overview [#overview]

This rule enforces that function components are defined with arrow functions instead of function declarations or function expressions. It provides an auto-fix suggestion that converts non-arrow function components to arrow function syntax.

## Rule [#rule]

Copy the following code into your project (e.g. `.config/functionComponentDefinition.ts`):

```ts title=".config/functionComponentDefinition.ts"
import type { RuleFunction } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";

/** Enforce arrow function style for function component definitions. */
export function functionComponentDefinition(): RuleFunction {
  return (context, { collect, hint }) => {
    const { query, visitor } = collect.components(context, {
      hint: hint.component.Default & ~hint.component.DoNotIncludeFunctionDefinedAsObjectMethod,
    });
    return merge(
      visitor,
      {
        "Program:exit"(program) {
          for (const { node } of query.all(program)) {
            if (node.type === "ArrowFunctionExpression") continue;
            context.report({
              node,
              message: "Function components must be defined with arrow functions.",
              suggest: [
                {
                  desc: "Convert to arrow function.",
                  fix(fixer) {
                    const src = context.sourceCode;
                    if (node.generator) return null;
                    const prefix = node.async ? "async " : "";
                    const typeParams = node.typeParameters ? src.getText(node.typeParameters) : "";
                    const params = `(${node.params.map((p) => src.getText(p)).join(", ")})`;
                    const returnType = node.returnType ? src.getText(node.returnType) : "";
                    const body = src.getText(node.body);

                    // function Foo(params) { ... } -> const Foo = (params) => { ... };
                    if (node.type === "FunctionDeclaration" && node.id) {
                      return fixer.replaceText(
                        node,
                        `const ${node.id.name} = ${prefix}${typeParams}${params}${returnType} => ${body};`,
                      );
                    }

                    // const Foo = function(params) { ... } -> const Foo = (params) => { ... }
                    if (node.type === "FunctionExpression" && node.parent.type === "VariableDeclarator") {
                      return fixer.replaceText(node, `${prefix}${typeParams}${params}${returnType} => ${body}`);
                    }

                    // { Foo(params) { ... } } -> { Foo: (params) => { ... } }
                    if (node.type === "FunctionExpression" && node.parent.type === "Property") {
                      return fixer.replaceText(
                        node.parent,
                        `${src.getText(node.parent.key)}: ${prefix}${typeParams}${params}${returnType} => ${body}`,
                      );
                    }

                    return null;
                  },
                },
              ],
            });
          }
        },
      },
    );
  };
}
```

## Config [#config]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { functionComponentDefinition } from "./.config/functionComponentDefinition";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(functionComponentDefinition)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

## Examples [#examples]

### Function declaration or expression as component [#function-declaration-or-expression-as-component]

```tsx
import React from "react";

type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

// 🔴 Problem: Function components must be defined with arrow functions.
function Button({ children, onClick }: ButtonProps) {
  return <button type="button" onClick={onClick}>{children}</button>;
}
```

```tsx
import React from "react";

type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

// 🔴 Problem: Function components must be defined with arrow functions.
const Button = function({ children, onClick }: ButtonProps) {
  return <button type="button" onClick={onClick}>{children}</button>;
};
```

### Arrow function as component [#arrow-function-as-component]

```tsx
import React from "react";

type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

// 🟢 Recommended: Arrow function syntax for component definitions.
const Button = ({ children, onClick }: ButtonProps) => {
  return <button type="button" onClick={onClick}>{children}</button>;
};
```

## How It Works [#how-it-works]

This rule uses the `collect.components` collector from `@eslint-react/kit` to find all function component definitions in the file. On `Program:exit`, it iterates through every detected component and reports any that are not `ArrowFunctionExpression` nodes.

The suggested fix handles three cases:

1. **Function declarations** — `function Foo() {}` → `const Foo = () => {};`
2. **Function expressions in variable declarators** — `const Foo = function() {}` → `const Foo = () => {}`
3. **Function expressions in object properties** — `{ Foo() {} }` → `{ Foo: () => {} }`

The fix also preserves `async`, type parameters, parameter types, and return types.

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Recipes (/docs/recipes)





<Callout type="warn" title="Under Construction">
  This page is under construction.
</Callout>

Recipes are ready-to-use custom ESLint rule definitions built with [`@eslint-react/kit`](/docs/packages/kit). They are **not** part of the core plugin. Instead, they are designed to be **copied and pasted** directly into your project. Each recipe contains one or more custom rules.

## Why Recipes? [#why-recipes]

Some lint rules are inherently **opinionated**. They enforce a specific code style or convention that not every team agrees on. Rather than shipping these as built-in rules with fixed behavior, we provide them as recipes so you can:

* **Copy** the rule definition into your project.
* **Customize** the implementation to match your team's conventions.
* **Own** the code with no dependency on upstream changes you didn't ask for.

## Prerequisites [#prerequisites]

Recipes require the `@eslint-react/kit` package:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash copy
    npm install --save-dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash copy
    pnpm add --save-dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash copy
    yarn add --dev @eslint-react/kit
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash copy
    bun add --dev @eslint-react/kit
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

Each recipe page provides:

1. **Rule**: A self-contained function you copy into your project (e.g. into a `.config/noForwardRef.ts` file).
2. **Config**: How to wire it up in your `eslint.config.ts` using `eslintReactKit().use(...)`.
3. **Examples**: Code snippets demonstrating valid and invalid patterns to show what the rule catches and how to resolve it.

Here's the general pattern:

```ts title=".config/noForwardRef.ts"
import type { RuleFunction } from "@eslint-react/kit";

function noForwardRef(): RuleFunction {
  return (context, { is }) => ({
    CallExpression(node) {
      if (is.forwardRefCall(node)) {
        context.report({ node, message: "The 'forwardRef' is deprecated in React 19. Pass 'ref' as a prop instead." });
      }
    },
  });
}
```

```ts title="eslint.config.ts"
import eslintReact from "@eslint-react/eslint-plugin";
import eslintReactKit from "@eslint-react/kit";
import eslintJs from "@eslint/js";
import { defineConfig } from "eslint/config";
import tseslint from "typescript-eslint";

import { noForwardRef } from "./.config/noForwardRef";

export default defineConfig(
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      eslintJs.configs.recommended,
      tseslint.configs.recommended,
      eslintReact.configs["recommended-typescript"],
      eslintReactKit()
        .use(noForwardRef)
        .getConfig(),
    ],
    rules: {
      "@eslint-react/kit/no-forward-ref": "error",
    },
  },
);
```

## Available Recipes [#available-recipes]

### Simple [#simple]

Single-purpose recipes containing one custom rule for a specific linting need.

<Cards>
  <Card title="Function Component Definition" description="Enforces arrow function style for function component definitions." href="/docs/recipes/function-component-definition" />

  <Card title="No Circular Effect" description="Detects circular dependencies between useEffect hooks. Prevents infinite update loops caused by effects that set state they also depend on." href="/docs/recipes/no-circular-effect" />

  <Card title="Prefer Namespace Import" description="Enforces importing React via a namespace import instead of default import." href="/docs/recipes/prefer-namespace-import" />
</Cards>

### Compound [#compound]

Multi-rule recipes that bundle related rules around a specific domain (props, state, children, context).

<Cards>
  <Card title="Custom Rules Of Props" description="Validates JSX props. Includes checks for duplicate props, mixing controlled and uncontrolled props, explicit spread props, and direct props access." href="/docs/recipes/custom-rules-of-props" />

  <Card title="Custom Rules Of State" description="Validates state usage. Prefer the updater function form in useState setters." href="/docs/recipes/custom-rules-of-state" />

  <Card title="Custom Rules Of Context" description="Validates React Context API usage. Includes checks for `useContext` and other context-related patterns." href="/docs/recipes/custom-rules-of-context" />
</Cards>

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# No Circular Effect (/docs/recipes/no-circular-effect)



<Callout type="warn">
  In most cases, use the built-in [`set-state-in-effect`](/docs/rules/set-state-in-effect) rule instead. It's also part of [React's official lints](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect). Use this custom recipe only when you need to detect circular dependencies across multiple effects.
</Callout>

## Overview [#overview]

This rule detects when `useEffect`-like hooks form a cycle through state variables. For example, if an effect depends on state A and sets state B, while another effect depends on state B and sets state A, it creates an infinite update loop. It builds a directed graph of state dependencies across all effects in a component or hook and reports any effect that participates in a cycle.

## Rule [#rule]

Copy the following code into your project (e.g. `.config/noCircularEffect.ts`):

```ts title=".config/noCircularEffect.ts"
import type { RuleFunction } from "@eslint-react/kit";
import { merge } from "@eslint-react/kit";
import type { TSESTree } from "@typescript-eslint/types";
import { simpleTraverse } from "@typescript-eslint/typescript-estree";

interface EffectNode {
  call: TSESTree.CallExpression;
  reads: Set<string>;
  writes: Set<string>;
}

/** Maps each state setter name to the state variable it updates, from `const [x, setX] = useState(...)` declarations. */
function collectStateSetters(hookCalls: TSESTree.CallExpression[], isStateCall: (node: TSESTree.Node) => boolean): Map<string, string> {
  const setters = new Map<string, string>();
  for (const call of hookCalls) {
    if (!isStateCall(call)) continue;
    const declarator = call.parent;
    if (declarator.type !== "VariableDeclarator" || declarator.id.type !== "ArrayPattern") continue;
    const [state, setter] = declarator.id.elements;
    if (state?.type === "Identifier" && setter?.type === "Identifier") {
      setters.set(setter.name, state.name);
    }
  }
  return setters;
}

/** Builds the "reads" (dependency array) and "writes" (setter calls) state footprint of each `useEffect`-like call. */
function collectEffects(hookCalls: TSESTree.CallExpression[], isEffectCall: (node: TSESTree.Node) => boolean, setters: Map<string, string>): EffectNode[] {
  const effects: EffectNode[] = [];
  for (const call of hookCalls) {
    if (!isEffectCall(call)) continue;
    const [setup, deps] = call.arguments;

    const writes = new Set<string>();
    if (setup?.type === "ArrowFunctionExpression" || setup?.type === "FunctionExpression") {
      simpleTraverse(setup, {
        enter(node) {
          if (node.type !== "CallExpression" || node.callee.type !== "Identifier") return;
          const state = setters.get(node.callee.name);
          if (state != null) writes.add(state);
        },
      });
    }

    const reads = new Set<string>();
    if (deps?.type === "ArrayExpression") {
      for (const element of deps.elements) {
        if (element?.type === "Identifier") reads.add(element.name);
      }
    }

    effects.push({ call, reads, writes });
  }
  return effects;
}

/** Finds cycles in the "effect A's setter feeds effect B's dependency array" graph via DFS. */
function findCycles(effects: EffectNode[]): number[][] {
  const adjacency: number[][] = effects.map((from) =>
    effects.reduce<number[]>((acc, to, j) => {
      if ([...from.writes].some((state) => to.reads.has(state))) acc.push(j);
      return acc;
    }, [])
  );

  const WHITE = 0, GRAY = 1, BLACK = 2;
  const color = new Array<number>(effects.length).fill(WHITE);
  const stack: number[] = [];
  const seen = new Set<string>();
  const cycles: number[][] = [];

  function visit(u: number): void {
    color[u] = GRAY;
    stack.push(u);
    for (const v of adjacency[u] ?? []) {
      if (color[v] === WHITE) {
        visit(v);
        continue;
      }
      if (color[v] !== GRAY) continue;
      const start = stack.indexOf(v);
      const cycle = stack.slice(start);
      const key = [...cycle].sort((a, b) => a - b).join(",");
      if (!seen.has(key)) {
        seen.add(key);
        cycles.push(cycle);
      }
    }
    stack.pop();
    color[u] = BLACK;
  }

  for (let i = 0; i < effects.length; i++) {
    if (color[i] === WHITE) visit(i);
  }

  return cycles;
}

/** Describes a cycle as the chain of state names that connect each effect to the next. */
function describeCycle(effects: EffectNode[], cycle: number[]): string {
  const names = cycle.map((index, position) => {
    const from = effects[index]!;
    const to = effects[cycle[(position + 1) % cycle.length]!]!;
    return [...from.writes].find((state) => to.reads.has(state)) ?? "?";
  });
  return [...names, names[0]].join(" → ");
}

/** Detect circular `set` function and dependency patterns across `useEffect`-like hooks in the same component or hook. */
export function noCircularEffect(): RuleFunction {
  return (context, { collect, is, settings }) => {
    const fc = collect.components(context);
    const hk = collect.hooks(context);

    function check(hookCalls: TSESTree.CallExpression[]) {
      const setters = collectStateSetters(hookCalls, (node) => is.useStateLikeCall(node, settings.additionalStateHooks));
      const effects = collectEffects(hookCalls, (node) => is.useEffectLikeCall(node, settings.additionalEffectHooks), setters);
      if (effects.length === 0) return;

      const reported = new Set<TSESTree.CallExpression>();
      for (const cycle of findCycles(effects)) {
        const description = describeCycle(effects, cycle);
        for (const index of cycle) {
          const { call } = effects[index]!;
          if (reported.has(call)) continue;
          reported.add(call);
          context.report({
            node: call,
            message: `This effect is part of a circular update chain that may cause an infinite render loop: ${description}.`,
          });
        }
      }
    }

    return merge(
      fc.visitor,
      hk.visitor,
      {
        "Program:exit"(program) {
          for (const { hookCalls } of fc.query.all(program)) check(hookCalls);
          for (const { hookCalls } of hk.query.all(program)) check(hookCalls);
        },
      },
    );
  };
}
```

## Config [#config]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { noCircularEffect } from "./.config/noCircularEffect";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(noCircularEffect)
      .getConfig(),
    files: ["src/**/*.tsx"],
  },
];
```

## Examples [#examples]

### Circular effect dependencies [#circular-effect-dependencies]

Circular effect with depth 1. An effect depends on `items` and also sets `items`:

```tsx
import { useEffect, useState } from "react";

function CircularEffect1() {
  const [items, setItems] = useState([0, 1, 2, 3, 4]);

  useEffect(() => {
    setItems(x => [...x].reverse());
  }, [items]);
  // ^^^^^^^ This effect is part of a circular update chain that may cause an infinite render loop: items → items.

  return null;
}
```

Circular effect with depth 2. Two effects form a cycle: one depends on `limit` and sets `items`, and another depends on `items` and sets `limit`:

```tsx
import { useEffect, useState } from "react";

function CircularEffect2() {
  const [items, setItems] = useState([0, 1, 2, 3, 4]);
  const [limit, setLimit] = useState(false);

  useEffect(() => {
    setItems(x => [...x].reverse());
  }, [limit]);
  // ^^^^^^^ This effect is part of a circular update chain that may cause an infinite render loop: items → limit → items.

  useEffect(() => {
    setLimit(x => !x);
  }, [items]);
  // ^^^^^^^ This effect is part of a circular update chain that may cause an infinite render loop: items → limit → items.

  return null;
}
```

Circular effect with depth 3. Three effects form a cycle through `items → count → limit → items`:

```tsx
import { useEffect, useState } from "react";

function CircularEffect3() {
  const [items, setItems] = useState([0, 1, 2, 3, 4]);
  const [limit, setLimit] = useState(false);
  const [count, setCount] = useState(0);

  useEffect(() => {
    setItems(x => [...x].reverse());
  }, [limit]);
  // ^^^^^^^ This effect is part of a circular update chain that may cause an infinite render loop: items → count → limit → items.

  useEffect(() => {
    setCount(x => x + 1);
  }, [items]);
  // ^^^^^^^ This effect is part of a circular update chain that may cause an infinite render loop: items → count → limit → items.

  useEffect(() => {
    setLimit(x => !x);
  }, [count]);
  // ^^^^^^^ This effect is part of a circular update chain that may cause an infinite render loop: items → count → limit → items.

  return null;
}
```

### Non-circular effect dependencies [#non-circular-effect-dependencies]

Effects without circular dependencies:

```tsx
import { useEffect, useState } from "react";

function ValidComponent() {
  const [count, setCount] = useState(0);
  const [label, setLabel] = useState("");

  // 🟢 Recommended: Depends on `count`, sets `label`. No cycle.
  useEffect(() => {
    setLabel(`Count is ${count}`);
  }, [count]);

  return null;
}
```

Effects with no dependency array:

```tsx
import { useEffect, useState } from "react";

function ValidComponent2() {
  const [count, setCount] = useState(0);

  // 🔵 OK: No dependency array. Not a circular pattern.
  useEffect(() => {
    setCount(0);
  });

  return null;
}
```

## How It Works [#how-it-works]

This rule uses both the `collect.components` and `collect.hooks` collectors from `@eslint-react/kit`, so cycles are detected whether the effects live in a component or in a custom hook. For each collected function it inspects the pre-computed `hookCalls`:

1. **`collectStateSetters`** finds every `useState`-like call destructured as `const [state, setState] = useState(...)` and records the `setState → state` mapping.
2. **`collectEffects`** walks each `useEffect`-like call's setup function with `simpleTraverse` to find which state setters it calls (the effect's "writes"), and reads the identifiers in its dependency array (the effect's "reads").
3. **`findCycles`** builds a directed graph where effect A points to effect B when A's writes intersect B's reads, then runs a DFS to find cycles — including a single effect pointing back to itself.
4. **`describeCycle`** renders the matched state names along each edge of a cycle (e.g. `items → limit → items`) for the reported message.

Every effect that participates in a detected cycle is reported once, with the message describing the full chain of state names that form the loop.

## Further Reading [#further-reading]

* [React Docs: Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects)
* [React Docs: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Prefer Namespace Import (/docs/recipes/prefer-namespace-import)



## Overview [#overview]

This rule enforces that React is imported via a namespace import (`import * as React from 'react'`) instead of a default import (`import React from 'react'`). It provides an auto-fix that converts default imports to namespace imports.

The rule respects:

* The configured `importSource` from React settings (e.g., `"@pika/react"`)
* Type imports (`import type React from 'react'` → `import type * as React from 'react'`)
* Quote style (single or double)
* Semicolon usage style

## Rule [#rule]

Copy the following code into your project (e.g. `.config/preferNamespaceImport.ts`):

```ts title=".config/preferNamespaceImport.ts"
import type { RuleFunction } from "@eslint-react/kit";
import type { TSESTree } from "@typescript-eslint/types";

/** Enforce importing React via a namespace import. */
export function preferNamespaceImport(): RuleFunction {
  return (context, { settings }) => {
    const { importSource } = settings;
    return {
      [`ImportDeclaration[source.value="${importSource}"] ImportDefaultSpecifier`](node: TSESTree.ImportDefaultSpecifier) {
        const hasOtherSpecifiers = node.parent.specifiers.length > 1;
        context.report({
          data: { importSource },
          fix(fixer) {
            const importDeclarationText = context.sourceCode.getText(node.parent);
            const semi = importDeclarationText.endsWith(";") ? ";" : "";
            const quote = node.parent.source.raw?.at(0) ?? "'";
            const isTypeImport = node.parent.importKind === "type";
            const importStringPrefix = `import${isTypeImport ? " type" : ""}`;
            const importSourceQuoted = `${quote}${importSource}${quote}`;
            if (!hasOtherSpecifiers) {
              return fixer.replaceText(
                node.parent,
                `${importStringPrefix} * as ${node.local.name} from ${importSourceQuoted}${semi}`,
              );
            }
            // remove the default specifier and prepend the namespace import specifier
            const specifiers = importDeclarationText.slice(
              importDeclarationText.indexOf("{"),
              importDeclarationText.indexOf("}") + 1,
            );
            return fixer.replaceText(
              node.parent,
              [
                `${importStringPrefix} * as ${node.local.name} from ${importSourceQuoted}${semi}`,
                `${importStringPrefix} ${specifiers} from ${importSourceQuoted}${semi}`,
              ].join("\n"),
            );
          },
          message: `Prefer importing React as 'import * as React from "${importSource}"' `,
          node: hasOtherSpecifiers ? node : node.parent,
        });
      },
    };
  };
}
```

## Config [#config]

```ts title="eslint.config.ts"
import eslintReactKit from "@eslint-react/kit";
import { preferNamespaceImport } from "./.config/preferNamespaceImport";

export default [
  // ... other configs
  {
    ...eslintReactKit()
      .use(preferNamespaceImport)
      .getConfig(),
    files: ["src/**/*.{ts,tsx}"],
  },
];
```

## Examples [#examples]

### Default import from React [#default-import-from-react]

```tsx
// 🔴 Problem: default import is discouraged.
import React from 'react';
```

```tsx
// 🔴 Problem: default import is discouraged.
import React, { useState, useEffect } from 'react';
```

### Namespace import from React [#namespace-import-from-react]

```tsx
// 🟢 Recommended: namespace import is preferred.
import * as React from 'react';
```

```tsx
// 🔵 OK: named imports without default import are fine.
import { useState, useEffect } from 'react';
```

## Resources [#resources]

* [AST Explorer](https://ast-explorer.dev/#eNpNkE9PwzAMxb+K5dMmDbiXrQeQOCIEEqdcQuqJjDSpEncCVf3u2Al/donk3/Pzi71gwA5P9myLy35i3OEkgL8mauCKSvBRuRPuxyllhmeyjuGY0wgGsxYGb000UX1wNzOn+JTTVOAAi4kA7t2HIVPsmvW6vo9pIHEBpHgfvPvoYLOFQw/n5Afha514nKNjn+LP1M3yNwvW7jJq25Iy8Zwj7N+qAvqhg8FWGeyXX/e6v2mw1ygTZcEkC9YZBsmN9pVykWCDnYBgmYpsufvXH8hKFBVtqDYVTuVTa84z1VZlcrTgaXjh7PVQTVVRYldcvwGs9YT5) - A tool for exploring the abstract syntax tree (AST) of JavaScript code, which is essential for writing custom rules.
* [ESLint Developer Guide](https://eslint.org/docs/latest/extend/custom-rules) - Official ESLint documentation for creating custom rules.
* [Using the TypeScript Compiler API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#type-checker-apis) - TypeScript compiler API documentation for working with type information in custom rules.


# Release Notes (/docs/release-notes)





## Overview [#overview]

Stay up-to-date with the latest major features, breaking changes, and improvements in ESLint React. Each major release comes with a detailed announcement and a comprehensive migration guide to help you upgrade smoothly.

Explore our major release announcements below:

<Cards>
  <Card title="Announcing v5.7.0" description="A maintenance release featuring the fully implemented no-unused-state rule, rule improvements, API changes, and LTS maintenance mode." href="/docs/release-notes/v5.7.0" />

  <Card title="Announcing v5.6.0" description="A major release featuring core API refactoring, kit API simplification, new rules, and class component support deprecation." href="/docs/release-notes/v5.6.0" />

  <Card title="Announcing v4.2.1" description="A major release introducing a dedicated JSX plugin, new utility package for custom rules, and flattened rule naming." href="/docs/release-notes/v4.2.1" />

  <Card title="Announcing v3.0.0" description="A major release with new rules ported from eslint-plugin-react-hooks, consolidated packages, and ESLint v10 support." href="/docs/release-notes/v3.0.0" />

  <Card title="Announcing v2.0.0" description="A major release embracing modern JavaScript standards with powerful new rules and DX improvements." href="/docs/release-notes/v2.0.0" />
</Cards>


# Announcing v2.0.0 (/docs/release-notes/v2.0.0)



<Callout type="info">
  Some features in this release were previously introduced in the `1.5.x` versions.
</Callout>

## **Embracing Modern JavaScript Standards** [#embracing-modern-javascript-standards]

To align with the direction of the JavaScript ecosystem, v2.0.0 introduces the following significant changes:

1. **ESM-Only**: ESLint React is now distributed exclusively as ECMAScript Modules (ESM).
2. **Flat Config Exclusive**: We have dropped support for the legacy `.eslintrc` format and now exclusively support ESLint's Flat Config, enabling more powerful and flexible configurations.
3. **Updated Environment Requirements**:
   * **Node.js**: `18.x` ↦ `20.x`
   * **ESLint**: `8.x` ↦ `9.x`
   * **TypeScript**: `4.x` ↦ `5.x`

## **Rule Refactoring: More Consistent and Intuitive** [#rule-refactoring-more-consistent-and-intuitive]

We have refactored our rules to make them more consistent and intuitive.

* **Rule Renaming**: Some rules have been renamed. For example, `ensure-forward-ref-using-ref` is now the more concise `no-useless-forward-ref` (later consolidated into `no-forward-ref` in v3.0.0).

* **Rule Consolidation**: Scenarios that previously required multiple rules are now handled by a single, consolidated rule, simplifying your setup.

  ```javascript
  // Old way: Two separate rules
  // "react-hooks-extra/no-direct-set-state-in-use-effect": "warn",
  // "react-hooks-extra/no-direct-set-state-in-use-layout-effect": "warn",

  // New way: A single rule handling all useEffect variants
  "react-hooks-extra/no-direct-set-state-in-use-effect": "warn",
  ```

* **Rule Migration**: Several generic Hooks rules from the `react-hooks-extra` package, such as `no-unnecessary-use-prefix`, have been moved to the core `react-x` plugin.

## **Introducing Powerful New Rules** [#introducing-powerful-new-rules]

This release adds several new rules to help you write cleaner and more robust React code.

* **`react-x/no-unused-props`**: A TSC-backed rule to flag component props that are defined but never used (credit to [@ulrichstark](https://github.com/ulrichstark) for the implementation).
* **`react-x/no-unnecessary-key`**: Prevents `key` from being placed on non-top-level elements in list rendering (credit to [@kachkaev](https://github.com/kachkaev) for the idea).
* **`react-dom/no-string-style-prop`**: Disallows string values for the `style` prop, which is useful in non-TypeScript environments like MDX (proposed by [@karlhorky](https://github.com/karlhorky)).
* **`react-dom/prefer-namespace-import`**: Enforces using a namespace import for `react-dom` (the React DOM equivalent of `react-x/prefer-namespace-import`).

## **Developer Experience (DX) Improvements** [#developer-experience-dx-improvements]

We believe a great tool should not only find problems but also help you fix them.

* **Enhanced Codemods & Auto-Fixes**: More rules now include codemods and auto-fixing capabilities.

  For example, migrating `forwardRef` to the new [`ref` as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop) pattern in React 19:

  ```tsx
  // Before
  const MotionButton = React.forwardRef<HTMLButtonElement, HTMLMotionProps<"button">>(({ children, ...rest }, ref) => {
    // ...
  });

  // After
  const MotionButton = ({ ref, children, ...rest }: HTMLMotionProps<"button"> & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
    // ...
  };
  ```

  Other rules with React 19 codemods include:

  * `react-x/no-use-context`: Replaces `useContext(Context)` with `use(Context)`.
  * `react-x/no-context-provider`: Replaces `<Context.Provider>` with `<Context>`.

* **New `disable-conflict-eslint-plugin-react` Preset**: If you also use `eslint-plugin-react`, this new preset automatically disables rules that conflict with our plugin, ensuring seamless integration.

## **Migration Guide** [#migration-guide]

To upgrade to v2.0.0, follow these steps:

1. **Update Node.js**: Ensure your environment is running Node.js 20.x or higher.
2. **Update Dependencies**: Update `@eslint-react/*` ESLint plugins and their related dependencies to their required versions.
3. **Review Rule Changes**: Check the [Changelog](/docs/changelog#v200-2025-09-26) for a complete list of rule changes.
4. **Adjust ESLint Configuration**: Update your ESLint configuration to accommodate renamed or consolidated rules. If you haven't already, convert your configuration to Flat Config.
5. **Update ESLint Directives**: Use the provided codemods to update any ESLint directives in your codebase.
6. **Test Your Setup**: Run ESLint on your project to identify and fix any remaining issues.

## References [#references]

* Changelog: [v2.0.0](/docs/changelog#v200-2025-09-26)
* Full Changelog: [v1.53.1...v2.0.0](https://github.com/Rel1cx/eslint-react/compare/v1.53.1...v2.0.0)


# Announcing v3.0.0 (/docs/release-notes/v3.0.0)



<Callout type="info">
  This release consolidates all changes from v2.13.0 through v3.0.0.
</Callout>

## **ESLint v10 and Node.js 22** [#eslint-v10-and-nodejs-22]

v3.0.0 embraces the latest tooling ecosystem with the following environment changes:

1. **Node.js 22+**: The minimum required Node.js version is now `>=22.0.0` (previously `>=20.19.0`).
2. **ESLint v10**: Bumped to ESLint 10.0.3, leveraging native JSX reference tracking and variable tracking that make several legacy rules redundant.

## **Package Consolidation** [#package-consolidation]

To simplify the plugin ecosystem, v3.0.0 removes the `eslint-plugin-react-hooks-extra` package entirely. All of its rules have been migrated into `eslint-plugin-react-x`:

| Old Rule (`react-hooks-extra/`)     | New Rule (`react-x/`) | Change             |
| :---------------------------------- | :-------------------- | :----------------- |
| `no-direct-set-state-in-use-effect` | `set-state-in-effect` | relocated, renamed |

Additionally, the `react-naming-convention/use-state` rule has been moved to `react-x/use-state`, and `react-naming-convention/component-name` has been removed.

## **Consolidated and Removed Rules** [#consolidated-and-removed-rules]

Several rules have been consolidated into more powerful replacements, and rules made redundant by ESLint v10 have been removed:

| Old Rule (`react-x/`)                  | New Rule (`react-x/`) | Change       |
| :------------------------------------- | :-------------------- | :----------- |
| `jsx-no-duplicate-props`               | —                     | removed      |
| `jsx-no-iife`                          | `unsupported-syntax`  | consolidated |
| `jsx-no-undef`                         | —                     | removed      |
| `jsx-uses-react`                       | —                     | removed      |
| `jsx-uses-vars`                        | —                     | removed      |
| `no-unnecessary-key`                   | —                     | removed      |
| `no-useless-forward-ref`               | `no-forward-ref`      | consolidated |
| `prefer-read-only-props`               | `immutability`        | consolidated |
| `prefer-use-state-lazy-initialization` | `use-state`           | consolidated |

Key rationale:

* **`jsx-no-undef`*&#x2A;, &#x2A;*`jsx-uses-react`*&#x2A;, &#x2A;*`jsx-uses-vars`**: ESLint v10.0.0 now tracks JSX references and variables natively.
* **`no-useless-forward-ref`**: Consolidated into `no-forward-ref`. Since React 19, `forwardRef` is no longer necessary as `ref` can be passed as a prop.
* **`prefer-read-only-props`**: Replaced by the new `immutability` rule, which covers a broader set of immutability violations.
* **`prefer-use-state-lazy-initialization`**: Merged into `use-state` and controlled by the `enforceLazyInitialization` option (default: `true`).

Previously deprecated rules have also been removed:

| Rule                     | Deprecated in | Package                                 |
| :----------------------- | :------------ | :-------------------------------------- |
| `filename-extension`     | 2.13.0        | `eslint-plugin-react-naming-convention` |
| `filename`               | 2.13.0        | `eslint-plugin-react-naming-convention` |
| `no-default-props`       | 2.9.3         | `eslint-plugin-react-x`                 |
| `no-forbidden-props`     | 2.3.2         | `eslint-plugin-react-x`                 |
| `no-prop-types`          | 2.9.3         | `eslint-plugin-react-x`                 |
| `no-string-refs`         | 2.9.3         | `eslint-plugin-react-x`                 |
| `no-unnecessary-use-ref` | 2.10.0        | `eslint-plugin-react-x`                 |

## **Introducing Powerful New Rules** [#introducing-powerful-new-rules]

This release adds a significant number of new rules to `eslint-plugin-react-x`, including rules ported *verbatim* from `eslint-plugin-react-hooks` with full code-path analysis, as well as re-implemented React Compiler rules that offer better performance and, unlike the official plugin, require neither Babel nor React Compiler installation:

* **`react-x/component-hook-factories`**: Validates against higher-order functions defining nested components or hooks. Components and hooks should be defined at the module level.
* **`react-x/error-boundaries`**: Validates usage of Error Boundaries instead of try/catch for errors in child components.
* **`react-x/exhaustive-deps`**: Enforces that React hook dependency arrays contain all reactive values used in the callback.
* **`react-x/immutability`** (Experimental): Validates against mutating props, state, and other immutable values. Detects in-place array mutations (e.g. `push`, `sort`, `splice`) and direct property assignments on state variables.
* **`react-x/purity`** (Experimental): Validates that components and hooks are pure by checking that they do not call known-impure functions during render.
* **`react-x/refs`** (Experimental): Validates correct usage of refs by checking that `ref.current` is not read or written during render.
* **`react-x/rules-of-hooks`**: Enforces the [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks). Ported from `eslint-plugin-react-hooks` with code-path analysis for more accurate hook validation.
* **`react-x/set-state-in-effect`**: Validates against calling `setState` synchronously in an effect, which can lead to re-renders that degrade performance. Unlike the old `no-direct-set-state-in-use-effect`, this rule allows `setState` when the value is derived from a ref (aligning with React's recommended patterns).
* **`react-x/set-state-in-render`** (Experimental): Validates against unconditionally setting state during render, which can cause infinite render loops.
* **`react-x/unsupported-syntax`**: Validates against syntax that React Compiler does not support, including `eval`, `with` statements, and IIFEs in JSX.
* **`react-x/use-memo`**: Validates that `useMemo` is called with a callback that returns a value and that its return value is not discarded.

### Experimental Rules [#experimental-rules]

* **`react-x/no-implicit-ref`**: Prevents implicitly passing `ref` via spread props (e.g., `{...values}`).
* **`react-x/no-implicit-children`**: Prevents implicitly passing `children` via spread props (e.g., `{...values}`).
* **`react-x/unstable-rules-of-props`**: Validates against mixing controlled and uncontrolled prop patterns and detects duplicate props on JSX elements. Supports generic `foo`/`defaultFoo` prop pairs.
* **`react-x/unstable-rules-of-state`**: Consolidates state-related validations including `prefer-set-state-callback`.

## **New `compilationMode` Setting** [#new-compilationmode-setting]

Added support for the `compilationMode` setting under `settings["react-x"]`. This setting informs rules about the [React Compiler](https://react.dev/learn/react-compiler) compilation mode your project uses, allowing rules to understand how components and hooks will be optimized by the compiler. Possible values: `"infer"`, `"annotation"`, `"syntax"`, `"all"`.

## **Developer Experience Improvements** [#developer-experience-improvements]

* **Safer React 19 migration fixes**: The `no-context-provider`, `no-forward-ref`, and `no-use-context` rules no longer auto-fix via `--fix`. Their fixes have been converted to suggestions to prevent automatic code modifications that could break existing code.
* **Better rule categorization**: Many rules have been recategorized from `problem` to `suggestion` type for clearer intent.
* **`disable-conflict-eslint-plugin-react-hooks` configuration**: Added to both `@eslint-react/eslint-plugin` and `eslint-plugin-react-x` for easier migration from `eslint-plugin-react-hooks`.
* **Improved component detection**: Better detection of components created via conditional (ternary) expressions, `satisfies` expressions, and other TypeScript type patterns.

## **Migration Guide** [#migration-guide]

### Node.js [#nodejs]

* Upgrade Node.js to `>=22.0.0` (previously `>=20.19.0`).

### Package Changes [#package-changes]

* Remove `eslint-plugin-react-hooks-extra` from your `package.json` — this package is no longer published.
* If you were importing `eslint-plugin-react-hooks-extra` directly, replace it with `eslint-plugin-react-x`.

### ESLint Configuration [#eslint-configuration]

1. Replace `react-hooks-extra/no-direct-set-state-in-use-effect` with `react-x/set-state-in-effect`.
2. Replace `react-naming-convention/use-state` with `react-x/use-state`.
3. Remove references to the following deleted rules (use [`no-restricted-syntax`](https://eslint.org/docs/latest/rules/no-restricted-syntax) instead if needed):
   * `react-x/no-default-props`
   * `react-x/no-forbidden-props`
   * `react-x/no-prop-types`
   * `react-x/no-string-refs`
4. Remove the following removed/consolidated rules from your config if present:
   * `react-x/jsx-no-duplicate-props`
   * `react-x/jsx-no-undef`
   * `react-x/jsx-uses-react`
   * `react-x/jsx-uses-vars`
   * `react-x/no-unnecessary-key`
   * `react-x/no-unnecessary-use-ref`
   * `react-x/jsx-no-iife` → use `react-x/unsupported-syntax`
   * `react-x/no-useless-forward-ref` → use `react-x/no-forward-ref`
   * `react-x/prefer-read-only-props` → use `react-x/immutability`
   * `react-x/prefer-use-state-lazy-initialization` → use `react-x/use-state`
   * `react-naming-convention/filename` and `react-naming-convention/filename-extension`
   * `react-naming-convention/component-name`
5. Be aware that `react-x/no-context-provider`, `react-x/no-forward-ref`, and `react-x/no-use-context` no longer auto-fix via `--fix` — apply fixes manually.

### Settings [#settings]

* If your project uses [React Compiler](https://react.dev/learn/react-compiler), consider adding the `compilationMode` setting under `settings["react-x"]`.

### Review New Rules Enabled in Presets [#review-new-rules-enabled-in-presets]

If you use the `recommended`, `x`, or `all` preset, the following rules are now included automatically:

| Rule                                        | Severity | Presets            |
| :------------------------------------------ | :------- | :----------------- |
| `react-x/component-hook-factories`          | `error`  | `recommended`, `x` |
| `react-x/error-boundaries`                  | `error`  | `recommended`, `x` |
| `react-x/exhaustive-deps`                   | `warn`   | `recommended`, `x` |
| `react-x/immutability`                      | `error`  | `all`              |
| `react-x/no-unused-class-component-members` | `warn`   | `recommended`, `x` |
| `react-x/purity`                            | `warn`   | `recommended`, `x` |
| `react-x/refs`                              | `error`  | `all`              |
| `react-x/rules-of-hooks`                    | `error`  | `recommended`, `x` |
| `react-x/set-state-in-effect`               | `warn`   | `recommended`, `x` |
| `react-x/set-state-in-render`               | `error`  | `recommended`, `x` |
| `react-x/unsupported-syntax`                | `error`  | `recommended`, `x` |
| `react-x/use-memo`                          | `error`  | `recommended`, `x` |
| `react-x/use-state`                         | `warn`   | `recommended`, `x` |

### Migrating from `eslint-plugin-react-hooks` [#migrating-from-eslint-plugin-react-hooks]

See the [complete migration guide](/docs/migrating-from-eslint-plugin-react-hooks) for step-by-step instructions on replacing `eslint-plugin-react-hooks` with `eslint-plugin-react-x`.

## References [#references]

* Changelog: [v3.0.0](/docs/changelog#v300-2026-03-16)
* Full Changelog: [v2.13.0...v3.0.0](https://github.com/Rel1cx/eslint-react/compare/v2.13.0...v3.0.0)


# Announcing v4.2.1 (/docs/release-notes/v4.2.1)



<Callout type="info">
  This release consolidates all changes from v3.0.0 through v4.2.1.
</Callout>

## **A Dedicated JSX Plugin** [#a-dedicated-jsx-plugin]

v4.2.1 introduces `eslint-plugin-react-jsx`, a new dedicated plugin for React Flavored JSX rules. Several rules previously scattered across `eslint-plugin-react-x` and `eslint-plugin-react-dom` have been migrated to this new package for clearer categorization:

| Old Rule (`react-x/`)      | New Rule (`react-jsx/`) | Change             |
| :------------------------- | :---------------------- | :----------------- |
| `jsx-key-before-spread`    | `no-key-after-spread`   | relocated, renamed |
| `jsx-no-comment-textnodes` | `no-comment-textnodes`  | relocated, renamed |
| `no-children-prop`         | `no-children-prop`      | relocated          |
| `no-useless-fragment`      | `no-useless-fragment`   | relocated          |

| Old Rule (`react-dom/`) | New Rule (`react-jsx/`) | Change    |
| :---------------------- | :---------------------- | :-------- |
| `no-namespace`          | `no-namespace`          | relocated |

The new plugin ships with `recommended` and `strict` config presets, and `@eslint-react/eslint-plugin` now includes `jsx` and `disable-jsx` presets as well.

## **New Utility Package for Custom Rules** [#new-utility-package-for-custom-rules]

A new package has been added to the monorepo to empower users building custom React-aware ESLint rules:

### `@eslint-react/kit` [#eslint-reactkit]

A new utility module for building custom ESLint rules with React awareness. It features:

* A chainable `eslintReactKit().use().getConfig()` builder API for better composability and type inference.
* A `RuleToolkit` interface with pre-bound context helpers for component and hook analysis.
* Normalized ESLint React settings exposed via `settings` on `RuleToolkit`.
* A `getPlugin()` API on the builder for fine-grained control over plugin namespace and rule severities.

## **Flattened Rule Naming in the Unified Plugin** [#flattened-rule-naming-in-the-unified-plugin]

Rules from individual plugins now use a flattened naming convention when accessed through the unified `@eslint-react/eslint-plugin` package. Slash-based prefixes have been replaced with dash-based prefixes:

| Before                                   | After                                    |
| :--------------------------------------- | :--------------------------------------- |
| `@eslint-react/rsc/<rule>`               | `@eslint-react/rsc-<rule>`               |
| `@eslint-react/dom/<rule>`               | `@eslint-react/dom-<rule>`               |
| `@eslint-react/web-api/<rule>`           | `@eslint-react/web-api-<rule>`           |
| `@eslint-react/naming-convention/<rule>` | `@eslint-react/naming-convention-<rule>` |

Core and JSX rules keep their existing prefixes (`@eslint-react/<rule>` and `@eslint-react/jsx-<rule>`).

## **Removed and Relocated Rules** [#removed-and-relocated-rules]

The following rules have been removed from `eslint-plugin-react-x`:

| Rule                              | Replaced by                                                                                                  |
| :-------------------------------- | :----------------------------------------------------------------------------------------------------------- |
| `react-x/jsx-dollar`              | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |
| `react-x/jsx-shorthand-boolean`   | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |
| `react-x/jsx-shorthand-fragment`  | [`@eslint-react/kit`](https://github.com/Rel1cx/eslint-react/blob/main/packages/kit/README.md) (custom rule) |
| `react-x/unstable-rules-of-props` | [Recipes: custom-rules-of-props](/docs/recipes/custom-rules-of-props)                                        |
| `react-x/unstable-rules-of-state` | [Recipes: custom-rules-of-state](/docs/recipes/custom-rules-of-state)                                        |

## **API Cleanups and Renames** [#api-cleanups-and-renames]

### `@eslint-react/kit` [#eslint-reactkit-1]

* `hint.defaultComponent` has been moved to `hint.component.Default`.
* `defineConfig({ rules: [...] })` has been replaced with the chainable builder pattern:

  ```ts
  import eslintReactKit from "@eslint-react/kit";

  export default defineConfig(
    {
      files: ["**/*.{ts,tsx}"],
      extends: [
        eslintReactKit()
          .use(functionComponentDefinition)
          .getConfig(),
      ],
    },
  );
  ```

## **New Rules** [#new-rules]

This release adds several new rules, primarily under the new `react-jsx` plugin:

* **`react-jsx/no-children-prop-with-children`**: Disallows passing `children` as a prop when children are also passed as nested content.
* **`react-jsx/no-key-after-spread`**: Prevents patterns that cause deoptimization when using the automatic JSX runtime (e.g. placing `key` after spread props). This is the renamed and relocated successor to `react-x/jsx-key-before-spread`.
* **`react-jsx/no-namespace`**: Disallows JSX namespace syntax, as React does not support it.

## **Developer Experience Improvements** [#developer-experience-improvements]

* **Suggestion fix for `react-jsx/no-children-prop`**: Added a suggestion to move children from a prop to element content.
* **New example project**: `examples/react-dom-with-custom-rules` demonstrates how to create custom rules with `@eslint-react/kit`, including rules like `forbid-dom-props`, `jsx-fragments`, `jsx-handler-names`, `jsx-max-depth`, `jsx-no-duplicate-props`, `jsx-no-literals`, `jsx-pascal-case`, `jsx-props-no-spread-multi`, `no-adjacent-inline-elements`, and `max-component-per-file`.
* **Website improvements**: Migrated to the new Fumadocs structure and added LLM routes (`/llms.txt`, `/llms-full.txt`, `/llms.mdx`).

## **Bug Fixes** [#bug-fixes]

* `react-x/purity`: Removed console methods from impurity detection and now treats `new Date(arg)` as pure.
* `react-x/component-hook-factories`: Excluded HOC patterns and test mocks from component detection, and improved component parameter checks.
* `react-x/immutability`: Excluded event handler params from props mutation check.
* `react-x/no-duplicate-key`: Fixed a false positive for SVG `xlink` attributes.
* `ast`: Fixed JSX attribute name comparison to properly handle `JSXNamespacedName` (e.g. `xlink:href`).
* `var`: Fixed logic bugs in `compute-object-type`, `find-enclosing-assignment-target`, and `is-value-equal` utilities.

## **Migration Guide** [#migration-guide]

### ESLint configuration [#eslint-configuration]

* [ ] Replace `react-x/jsx-key-before-spread` with `react-jsx/no-key-after-spread`.
* [ ] Replace `react-x/jsx-no-comment-textnodes` with `react-jsx/no-comment-textnodes`.
* [ ] Replace `react-x/no-children-prop` with `react-jsx/no-children-prop`.
* [ ] Replace `react-x/no-useless-fragment` with `react-jsx/no-useless-fragment`.
* [ ] Replace `react-dom/no-namespace` with `react-jsx/no-namespace`.

### Unified plugin rule prefixes [#unified-plugin-rule-prefixes]

If you use `@eslint-react/eslint-plugin`, update the following rule prefixes:

* [ ] Replace `@eslint-react/rsc/<rule>` with `@eslint-react/rsc-<rule>`.
* [ ] Replace `@eslint-react/dom/<rule>` with `@eslint-react/dom-<rule>`.
* [ ] Replace `@eslint-react/web-api/<rule>` with `@eslint-react/web-api-<rule>`.
* [ ] Replace `@eslint-react/naming-convention/<rule>` with `@eslint-react/naming-convention-<rule>`.

### Removed rules [#removed-rules]

* [ ] Remove `react-x/jsx-dollar`, `react-x/jsx-shorthand-boolean`, and `react-x/jsx-shorthand-fragment`. Use `@eslint-react/kit` to implement them as custom rules if needed.
* [ ] Remove `react-x/unstable-rules-of-props` and `react-x/unstable-rules-of-state`. See the [custom-rules-of-props](/docs/recipes/custom-rules-of-props) and [custom-rules-of-state](/docs/recipes/custom-rules-of-state) recipes for guidance.

### Kit API migration [#kit-api-migration]

* [ ] Replace `defineConfig({ rules: [...] })` with `eslintReactKit().use(rule1).use(rule2).getConfig()`.
* [ ] Replace `hint.defaultComponent` with `hint.component.Default`.

## **References** [#references]

* Changelog: [v4.2.1](/docs/changelog#v421-2026-04-01)
* Full Changelog: [v3.0.0...v4.2.1](https://github.com/Rel1cx/eslint-react/compare/v3.0.0...v4.2.1)


# Announcing v5.6.0 (/docs/release-notes/v5.6.0)



<Callout type="info">
  This release consolidates all changes since v4.2.1.
</Callout>

## **Core API Refactoring** [#core-api-refactoring]

The `@eslint-react/core` package underwent a large-scale flattening refactor. Modules previously scattered across subdirectories like `component/`, `function/`, `hook/`, `semantic/`, and `api/` have been merged into the root directory. Several core APIs have been renamed:

| Before                         | After                            |
| :----------------------------- | :------------------------------- |
| `isReactAPI`                   | `isAPI`                          |
| `isReactAPICall`               | `isAPICall`                      |
| `isInitializedFromReact`       | `isAPIFromReact`                 |
| `isInitializedFromReactNative` | `isAPIFromReactNative`           |
| `ComponentDetectionHint`       | `FunctionComponentDetectionHint` |
| `ComponentFlag`                | `FunctionComponentFlag`          |
| `getComponentCollector`        | `getFunctionComponentCollector`  |
| `getComponentCollectorLegacy`  | `getClassComponentCollector`     |

Type utilities (`type-is`, `type-name`, `type-variant`) have been migrated from `eslint-plugin-react-x` to `@eslint-react/core`, and the `Toolkit` interface in `@eslint-react/kit` has been updated to reflect these naming changes.

## **Kit API Simplification** [#kit-api-simplification]

The `@eslint-react/kit` package has been streamlined:

* **Simplified `RuleToolkit.is` API**: Pre-built identifier predicates (`memo`, `lazy`, `forwardRef`, etc.) have been removed. Only `*Call` variants and `API`/`APICall` factories remain.
* **Renamed initialization checkers**:

| Before                       | After                |
| :--------------------------- | :------------------- |
| `initializedFromReact`       | `APIFromReact`       |
| `initializedFromReactNative` | `APIFromReactNative` |

Code using `is.memo(node)`, `is.lazy(node)`, etc. must migrate to `is.memoCall(node)` or use `is.API("memo")(node)`.

## **Removed Rules** [#removed-rules]

The following rules have been removed from their respective packages:

| Rule                                   | Package       | Notes                    |
| :------------------------------------- | :------------ | :----------------------- |
| `component-hook-factories`             | `react-x`     | Removed from all configs |
| `no-redundant-should-component-update` | `react-x`     | Removed from all configs |
| `no-unnecessary-use-callback`          | `react-x`     | Removed from all configs |
| `no-unnecessary-use-memo`              | `react-x`     | Removed from all configs |
| `no-unused-state`                      | `react-x`     | Removed from all configs |
| `prefer-destructuring-assignment`      | `react-x`     | Removed from all configs |
| `prefer-namespace-import`              | `react-x`     | Removed from all configs |
| `prefer-namespace-import`              | `react-dom`   | Removed from all configs |
| `debug/class-component`                | `react-debug` | Removed from all configs |

## **Class Component Support Deprecation** [#class-component-support-deprecation]

All Class Component-related detection functions in the core package (such as `isClassComponent`, `isPureComponent`, and various lifecycle checkers) have been marked as `@deprecated`, retaining only minimal compatibility support for existing rules.

Rules in `eslint-plugin-react-web-api`, including `no-leaked-event-listener`, `no-leaked-interval`, and `no-leaked-timeout`, have removed detection for Class Component lifecycles (`componentDidMount` / `componentWillUnmount`) and now only report on Hook Effects (`useEffect`, etc.).

## **New Rules** [#new-rules]

* **`react-x/globals`**: Restricts usage of global variables in React components.
* **`react-x/static-components`**: Enforces static component definitions. Enhanced with variable reference tracking and a `createdHere` diagnostic to reduce false positives.
* **`react-web-api/no-leaked-fetch`**: Detects leaked `fetch` calls in effects, closing #1714.

## **Kit Enhancements** [#kit-enhancements]

* Added `ast.findParent` utility for traversing AST ancestors.
* Added support for &#x2A;*Universally Unique Lexicographically Sortable Identifiers (ULID)** for anonymous rules (later migrated to `node:crypto randomBytes`).

## **Bug Fixes** [#bug-fixes]

* **`react-x/error-boundaries`**: Fixed false positives on non-React code and resolved catch block over-reporting.
* **`react-x/set-state-in-effect`**: Improved validation accuracy.
* **`react-x/use-memo`**: Added reassignment check, aligned message IDs, and added support for `for-of`/`for-in` loops.
* **Configs**: Added missing rules to presets, cleaned up experimental disables, and updated documentation.
* **Type expressions**: Added missing `Extract.unwrap` for type expressions and chain expressions; unwrapped type expressions before inspecting AST node types.

## **Improvements** [#improvements]

* **`ast`**: Normalized API naming conventions; renamed `isJSXLike` → `isJSXElementOrFragment` and `isMethodOrProperty` → `isPropertyOrMethod`; rewrote Check helpers.
* Extracted ESLint types and utilities into the `@eslint-react/eslint` package.
* Extracted `@eslint-react/jsx` from `@eslint-react/core` into a standalone utility package for static analysis of JSX patterns.
* Migrated to `@` and `#` path aliases and replaced `tsx` with `vite-node`.
* Moved pattern utilities to rule directories and extracted rule helpers into co-located `lib.ts` modules across multiple plugins.
* Replaced `RuleConfig` with `Linter.RulesRecord` from ESLint.
* Restructured monorepo packages directory layout.
* **`react-rsc/function-definition`**: Added directive position and quote checks.
* **Website**: Added inline TOCs, improved navigation, enabled twoslash type-checking for code examples, improved accessibility, and unified layout configuration.
* **Testing**: Expanded compiler fixture coverage across 9 rules; added comprehensive unit tests for component/hook detection utilities.

## **Migration Guide** [#migration-guide]

### Core API migration (for custom rule authors) [#core-api-migration-for-custom-rule-authors]

* [ ] Replace `isReactAPI` with `isAPI`.
* [ ] Replace `isReactAPICall` with `isAPICall`.
* [ ] Replace `isInitializedFromReact` with `isAPIFromReact`.
* [ ] Replace `isInitializedFromReactNative` with `isAPIFromReactNative`.
* [ ] Replace `ComponentDetectionHint` with `FunctionComponentDetectionHint`.
* [ ] Replace `ComponentFlag` with `FunctionComponentFlag`.
* [ ] Replace `getComponentCollector` with `getFunctionComponentCollector`.
* [ ] Replace `getComponentCollectorLegacy` with `getClassComponentCollector`.

### Kit API migration [#kit-api-migration]

* [ ] Replace `is.memo(node)`, `is.lazy(node)`, etc. with `is.memoCall(node)` or `is.API("memo")(node)`.
* [ ] Replace `initializedFromReact` with `APIFromReact`.
* [ ] Replace `initializedFromReactNative` with `APIFromReactNative`.
* [ ] Replace `RuleDefinition` type with `RuleFunction`.

### Removed rules [#removed-rules-1]

* [ ] Remove `react-x/component-hook-factories`.
* [ ] Remove `react-x/no-redundant-should-component-update`.
* [ ] Remove `react-x/no-unnecessary-use-callback`.
* [ ] Remove `react-x/no-unnecessary-use-memo`.
* [ ] Remove `react-x/no-unused-state` (re-added as a no-op rule in v5.6.6).
* [ ] Remove `react-x/prefer-destructuring-assignment`.
* [ ] Remove `react-x/prefer-namespace-import` and `react-dom/prefer-namespace-import`.
* [ ] Remove `react-debug/class-component`.

### Class Component deprecation [#class-component-deprecation]

* [ ] Review any reliance on Class Component lifecycle detection in `react-web-api/no-leaked-event-listener`, `react-web-api/no-leaked-interval`, and `react-web-api/no-leaked-timeout`. These rules now only report on Hook Effects.

## **References** [#references]

* Changelog: [v5.6.0](/docs/changelog#v560-2026-04-29)
* Full Changelog: [v4.2.1...v5.6.0](https://github.com/Rel1cx/eslint-react/compare/v4.2.1...v5.6.0)


# Announcing v5.7.0 (/docs/release-notes/v5.7.0)



<Callout type="warn">
  Starting with v5.7.0, the project has entered a **Long-Term Support (LTS) maintenance mode**. New feature development is temporarily on hold while the project prioritizes bug fixes, rule improvements, and documentation updates. See [#1740](https://github.com/Rel1cx/eslint-react/issues/1740) for details.
</Callout>

## **New Rules** [#new-rules]

### `react-x/no-unused-state` [#react-xno-unused-state]

The `react-x/no-unused-state` rule, which was re-added as a no-op in v5.6.6, is now **fully implemented**.

It detects state variables declared via `useState` (or similar state hooks) that are defined but never read, or only read inside an effect or effect dependency array (#1741).

## **Documentation Updates** [#documentation-updates]

* Updated minimum version requirements in README and docs:
  * **ESLint** 10.2.1
  * **TypeScript** 6.0.3
  * **pnpm** 10.33.2
* Fixed `no-unused-state` migration docs and removed rule reasons.

## **References** [#references]

* Changelog: [v5.7.0](/docs/changelog#v570-2026-05-02)
* Full Changelog: [v5.6.6...v5.7.0](https://github.com/Rel1cx/eslint-react/compare/v5.6.6...v5.7.0)


# function-component (/docs/rules/debug-function-component)





**Full Name in `eslint-plugin-react-debug`**

```plain copy
react-debug/function-component
```

**Features**

`🐞`

## Rule Details [#rule-details]

This rule reports all function components in JSON format. It detects function declarations, arrow functions, components wrapped with `React.memo` or `React.forwardRef`, components that call Hooks, and components containing the `"use memo"` or `"use no memo"` directive.

## Examples [#examples]

### Function declaration as a component [#function-declaration-as-a-component]

```tsx
// This rule reports function declarations that return JSX.
function MyComponent() {
  return <button />;
}
```

### Arrow function as a component [#arrow-function-as-a-component]

```tsx
// This rule reports arrow functions that return JSX.
const MyComponent = () => <button />;
```

### Component wrapped with React.memo [#component-wrapped-with-reactmemo]

```tsx
import React from "react";

// This rule reports components wrapped with React.memo.
const MyComponent = React.memo(() => <button />);
```

### Component wrapped with React.forwardRef [#component-wrapped-with-reactforwardref]

```tsx
import React from "react";

// This rule reports components wrapped with React.forwardRef.
const MyComponent = React.forwardRef(() => <button />);
```

### Component that calls a Hook inside [#component-that-calls-a-hook-inside]

```tsx
import React, { useEffect } from "react";

// This rule reports function components that use React Hooks.
function MyComponent() {
  useEffect(() => {}, []);
}
```

### Component with the "use memo" directive [#component-with-the-use-memo-directive]

```tsx
// This rule reports components that contain the "use memo" directive.
function MyComponent() {
  "use memo";
}
```

### Component with the "use no memo" directive [#component-with-the-use-no-memo-directive]

```tsx
// This rule reports components that contain the "use no memo" directive.
function MyComponent() {
  "use no memo";
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.16.0] - 2026-07-15">
    ### Changed [#changed]

    * Reported component `hookCalls` counts now include tagged template literal hook calls (e.g. `useMotionTemplate\`...\`\`). (#1909)
  </Accordion>

  <Accordion title="[4.2.1] - 2026-04-01">
    ### Fixed [#fixed]

    * Marked rule as 🔧 (has auto-fix). (#1633)
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `function-component` rule.
    * Reports detected function components for debugging purposes.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/function-component/function-component.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/function-component/function-component.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/function-component/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-debug/hook`](./debug-hook)\
  Reports all React Hooks in JSON format.


# hook (/docs/rules/debug-hook)





**Full Name in `eslint-plugin-react-debug`**

```plain copy
react-debug/hook
```

**Features**

`🐞`

## Rule Details [#rule-details]

This rule reports all React Hooks in JSON format. It detects built-in Hooks (such as `useState`, `useEffect`) as well as custom Hooks that follow the `use` prefix naming convention.

## Examples [#examples]

### Built-in hook used inside a custom hook [#built-in-hook-used-inside-a-custom-hook]

```tsx
import React, { useState } from "react";

// This rule reports calls to built-in React Hooks.
function useToggle() {
  const [value, setValue] = useState(false);

  return [value, () => setValue((x) => !x)] as const;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.16.0] - 2026-07-15">
    ### Changed [#changed]

    * Hook call counts now include tagged template literal hook calls (e.g. `useMotionTemplate\`...\`\`). (#1909)
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `hook` rule (originally named `react-hooks`). (#19)
    * Reports detected React hooks and their call counts for debugging purposes.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/hook/hook.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/hook/hook.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/hook/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-debug/function-component`](./debug-function-component)\
  Reports all function components in JSON format.


# is-from-react (/docs/rules/debug-is-from-react)





**Full Name in `eslint-plugin-react-debug`**

```plain copy
react-debug/is-from-react
```

**Features**

`🐞`

## Rule Details [#rule-details]

This rule reports all identifiers initialized from React in JSON format. It tracks named imports, default imports, namespace accesses, and chained member accesses originating from the configured React `importSource`.

## Examples [#examples]

### Named imports from React [#named-imports-from-react]

```tsx
// This rule reports named imports that originate from React.
import { useState } from "react";
//       ^^^^^^^^
//       - [initialized from react] name: 'useState', import source: 'react'.
```

### Default import and namespace access [#default-import-and-namespace-access]

```tsx
// This rule reports the default React import and member accesses.
import React from "react";
//     ^^^^^
//     - [initialized from react] name: 'React', import source: 'react'.

const Children = React.Children;
//    ^^^^^^^^   ^^^^^ ^^^^^^^^
//    |          |     - [initialized from react] name: 'Children', import source: 'react'.
//    |          - [initialized from react] name: 'React', import source: 'react'.
//    - [initialized from react] name: 'Children', import source: 'react'.
```

### Chained member access from React imports [#chained-member-access-from-react-imports]

```tsx
// This rule reports identifiers derived from React through chained access.
const toArray = Children.toArray;
//    ^^^^^^^   ^^^^^^^^ ^^^^^^^
//    |         |        - [initialized from react] name: 'toArray', import source: 'react'.
//    |         - [initialized from react] name: 'Children', import source: 'react'.
//    - [initialized from react] name: 'Children', import source: 'react'.
```

### Custom React import source [#custom-react-import-source]

When [`settings["react-x"].importSource`](https://eslint-react.xyz/docs/configuration#importsource) is set to `"@pika/react"`:

```tsx
// This rule respects the custom importSource setting.
import { useState } from "@pika/react";
//       ^^^^^^^^
//       - [initialized from react] name: 'useState', import source: '@pika/react'.
```

```tsx
import React from "@pika/react";
//     ^^^^^
//     - [initialized from react] name: 'React', import source: '@pika/react'.

const Children = React.Children;
//    ^^^^^^^^   ^^^^^ ^^^^^^^^
//    |          |     - [initialized from react] name: 'Children', import source: '@pika/react'.
//    |          - [initialized from react] name: 'React', import source: '@pika/react'.
//    - [initialized from react] name: 'Children', import source: '@pika/react'.
```

```tsx
const toArray = Children.toArray;
//    ^^^^^^^   ^^^^^^^^ ^^^^^^^
//    |         |        - [initialized from react] name: 'toArray', import source: '@pika/react'.
//    |         - [initialized from react] name: 'Children', import source: '@pika/react'.
//    - [initialized from react] name: 'Children', import source: '@pika/react'.
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.15.1] - 2024-10-26">
    ### Added [#added]

    * Initial release of the `is-from-react` rule.
    * Reports whether identifiers are initialized from React for debugging purposes.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/is-from-react/is-from-react.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/is-from-react/is-from-react.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/is-from-react/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-debug/is-from-ref`](./debug-is-from-ref)\
  Reports all identifiers initialized or derived from refs in JSON format.


# is-from-ref (/docs/rules/debug-is-from-ref)





**Full Name in `eslint-plugin-react-debug`**

```plain copy
react-debug/is-from-ref
```

**Features**

`🐞`

## Rule Details [#rule-details]

This rule reports all identifiers initialized or derived from refs in JSON format. It detects variables assigned from `useRef` and values read from `ref.current`.

## Examples [#examples]

### Ref initialized with useRef [#ref-initialized-with-useref]

```tsx
import React from "react";

function MyComponent() {
  // This rule reports identifiers initialized from a ref.
  const myRef = React.useRef(42);
  //    ^^^^^
  //    - {"name": "myRef", "init": "React.useRef(42)"}

  return null;
}
```

### Value read from a ref [#value-read-from-a-ref]

```tsx
import React from "react";

function MyComponent() {
  const myRef = React.useRef(42);

  // This rule reports identifiers derived from reading ref.current.
  const value = myRef.current;
  //    ^^^^^
  //    - {"name": "value", "init": "myRef.current"}

  return null;
}
```

## Options [#options]

### Shared Settings [#shared-settings]

Custom ref hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalRefHooks": "(useMyRef|useCustomRef)"
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.18.0] - 2026-07-23">
    ### Changed [#changed]

    * Replaced `isUseRefCall` with `isUseRefLikeCall` when resolving ref init expressions; custom ref hooks matching the `additionalRefHooks` setting are now recognized.
  </Accordion>

  <Accordion title="[2.8.3] - 2026-02-02">
    ### Fixed [#fixed]

    * Fixed rule export. (#1445)
  </Accordion>

  <Accordion title="[2.7.4] - 2026-01-25">
    ### Added [#added]

    * Initial release of the `is-from-ref` rule. (#1433)
    * Reports whether values are initialized from refs for debugging purposes.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/is-from-ref/is-from-ref.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/is-from-ref/is-from-ref.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/is-from-ref/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-debug/is-from-react`](./debug-is-from-react)\
  Reports all identifiers initialized from React in JSON format.


# jsx (/docs/rules/debug-jsx)





**Full Name in `eslint-plugin-react-debug`**

```plain copy
react-debug/jsx
```

**Features**

`🐞`

## Rule Details [#rule-details]

This rule reports all JSX elements and fragments in JSON format. It includes information about the JSX runtime (automatic or classic), factory, fragment factory, and import source derived from `tsconfig.json` or pragma comments.

## Examples [#examples]

### Automatic runtime JSX [#automatic-runtime-jsx]

```json title="tsconfig.json"
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxFactory": "React.createElement",
    "jsxFragmentFactory": "React.Fragment",
    "jsxImportSource": "react"
  }
}
```

```tsx
import React from "react";

// This rule reports JSX elements and includes automatic runtime information.
const element = <div>Hello World</div>;
//              ^^^^^^^^^^^^^^^^^^^^^^
//              - [jsx element] jsx: 'react-jsx', jsxFactory: 'React.createElement', jsxFragmentFactory: 'React.Fragment', jsxRuntime: 'automatic', jsxImportSource: 'react'
```

### Classic runtime with pragma comments [#classic-runtime-with-pragma-comments]

```tsx
/** @jsx Preact.h */
/** @jsxFrag Preact.Fragment */
/** @jsxImportSource preact */
/** @jsxRuntime classic */

import Preact from "preact";

// This rule reports JSX elements and includes classic runtime information from pragma comments.
const element = <div>Hello World</div>;
//              ^^^^^^^^^^^^^^^^^^^^^^
//              - [jsx element] jsx: 'react', jsxFactory: 'Preact.h', jsxFragmentFactory: 'Preact.Fragment', jsxRuntime: 'classic', jsxImportSource: 'preact'
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.41.0] - 2025-04-08">
    ### Added [#added]

    * Initial release of the `jsx` rule. (#1041)
    * Reports JSX elements and their properties for debugging purposes.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/jsx/jsx.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/jsx/jsx.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-debug/src/rules/jsx/CHANGELOG.md)


# no-dangerously-set-innerhtml-with-children (/docs/rules/dom-no-dangerously-set-innerhtml-with-children)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-dangerously-set-innerhtml-with-children
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-dangerously-set-innerhtml-with-children
```

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

When using `dangerouslySetInnerHTML`, the content of the DOM element is set from the `__html` property. The content of the DOM element is completely replaced, so the children will not be rendered as expected.

## Examples [#examples]

### Using `dangerouslySetInnerHTML` together with children [#using-dangerouslysetinnerhtml-together-with-children]

When you set `dangerouslySetInnerHTML`, React replaces the element's contents entirely, so any children you provide are silently ignored.

```tsx
// 🔴 Problem: dangerouslySetInnerHTML and children are used together.
// The <p> child will not be rendered.
function MyComponent() {
  return (
    <div dangerouslySetInnerHTML={{ __html: "Hello World" }}>
      <p>Goodbye World</p>
    </div>
  );
}
```

```tsx
// 🟢 Recommended: use only dangerouslySetInnerHTML without children.
function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: "Hello World" }} />;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false positive where a computed identifier key in spread props (e.g. `{...{ [key]: … }}`) was treated as the static `dangerouslySetInnerHTML` or `children` prop. The actual property name is the runtime value of the variable; computed string literal keys are still recognized.
  </Accordion>

  <Accordion title="[5.8.12] - 2026-06-05">
    ### Added [#added]

    * Added test cases for multiline whitespace (with tabs) trimming behavior. (#1837)
  </Accordion>

  <Accordion title="[2.0.5] - 2025-10-01">
    ### Changed [#changed]

    * Moved error marker from `dangerouslySetInnerHTML` to children. (#1256)
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added-1]

    * Initial release of the `no-dangerously-set-innerhtml-with-children` rule.
    * Reports usage of `dangerouslySetInnerHTML` when children are also present.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children/no-dangerously-set-innerhtml-with-children.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children/no-dangerously-set-innerhtml-with-children.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `dangerouslySetInnerHTML`](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html)

***

## See Also [#see-also]

* [`react-dom/no-dangerously-set-innerhtml`](./dom-no-dangerously-set-innerhtml)\
  Disallows DOM elements from using `dangerouslySetInnerHTML`.
* [`react-dom/no-void-elements-with-children`](./dom-no-void-elements-with-children)\
  Disallows `children` in void DOM elements.


# no-dangerously-set-innerhtml (/docs/rules/dom-no-dangerously-set-innerhtml)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-dangerously-set-innerhtml
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-dangerously-set-innerhtml
```

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability.

Read more about using [dangerouslySetInnerHTML](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html).

## Examples [#examples]

### Using `dangerouslySetInnerHTML` to render raw HTML [#using-dangerouslysetinnerhtml-to-render-raw-html]

Using `dangerouslySetInnerHTML` bypasses React's built-in XSS protections and should be avoided whenever possible.

```tsx
// 🔴 Problem: dangerouslySetInnerHTML exposes the application to XSS risks.
function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: "Hello, World!" }} />;
}
```

### Rendering Markdown with `dangerouslySetInnerHTML` [#rendering-markdown-with-dangerouslysetinnerhtml]

When converting Markdown to HTML, `dangerouslySetInnerHTML` can be used to display the rendered output. However, this should only be done with trusted input.

```tsx
// 🔴 Problem: Using dangerouslySetInnerHTML to render Markdown
import { Remarkable } from 'remarkable';

const md = new Remarkable();

function renderMarkdownToHTML(markdown) {
  const renderedHTML = md.render(markdown);
  return { __html: renderedHTML };
}

export default function MarkdownPreview({ markdown }) {
  const markup = renderMarkdownToHTML(markdown);
  return <div dangerouslySetInnerHTML={markup} />;
}
```

### Passing untrusted input to `dangerouslySetInnerHTML` [#passing-untrusted-input-to-dangerouslysetinnerhtml]

Passing untrusted input to `dangerouslySetInnerHTML` is a serious security risk that can lead to XSS attacks.

```tsx
// 🔴 Problem: Passing untrusted input directly to dangerouslySetInnerHTML
const post = {
  content: `<img src="" onerror='alert("you were hacked")'>`,
};

export default function MarkdownPreview() {
  // SECURITY HOLE: passing untrusted input to dangerouslySetInnerHTML
  const markup = { __html: post.content };
  return <div dangerouslySetInnerHTML={markup} />;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * No longer reports `dangerouslySetInnerHTML` spread props whose key is a computed string literal (e.g. `<div {...{ ["dangerouslySetInnerHTML"]: { __html: html } }} />`), since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false positive where a computed identifier key in spread props (e.g. `<div {...{ [key]: { __html: html } }} />`) was treated as the static `dangerouslySetInnerHTML` prop. The actual property name is the runtime value of the variable; computed string literal keys (e.g. `{...{ ["dangerouslySetInnerHTML"]: … }}`) are still reported.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-dangerously-set-innerhtml` rule.
    * Reports usage of `dangerouslySetInnerHTML` in React components.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml/no-dangerously-set-innerhtml.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml/no-dangerously-set-innerhtml.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `dangerouslySetInnerHTML`](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html)

***

## See Also [#see-also]

* [`react-dom/no-dangerously-set-innerhtml-with-children`](./dom-no-dangerously-set-innerhtml-with-children)\
  Disallows DOM elements from using `dangerouslySetInnerHTML` and `children` at the same time.
* [`react-dom/no-void-elements-with-children`](./dom-no-void-elements-with-children)\
  Disallows `children` in void DOM elements.


# no-find-dom-node (/docs/rules/dom-no-find-dom-node)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-find-dom-node
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-find-dom-node
```

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This API will be removed in a future major version of React. [See the alternatives](https://react.dev/reference/react-dom/findDOMNode#alternatives).

## Examples [#examples]

### Using `findDOMNode` to access a DOM node [#using-finddomnode-to-access-a-dom-node]

`findDOMNode` is a legacy API that will be removed. Use refs instead to reliably access DOM nodes.

```tsx
// 🔴 Problem: findDOMNode is deprecated and will be removed.
import React, { Component } from "react";
import { findDOMNode } from "react-dom";

class AutoSelectingInput extends Component {
  componentDidMount() {
    const input = findDOMNode(this);
    //            ^^^ 'findDOMNode' will be removed in a future version of React. Use the alternatives instead.
    if (input instanceof HTMLInputElement) {
      input.select();
    }
  }
  render() {
    return <input defaultValue="Hello" />;
  }
}
```

```tsx
// 🟢 Recommended: use createRef to access the underlying DOM node.
import React, { Component } from "react";

class AutoSelectingInput extends Component {
  inputRef = React.createRef<HTMLInputElement>();

  componentDidMount() {
    const input = this.inputRef.current;
    input?.select();
  }

  render() {
    return <input ref={this.inputRef} defaultValue="Hello" />;
  }
}
```

### Using `findDOMNode` in a function component [#using-finddomnode-in-a-function-component]

`findDOMNode` is also problematic in function components because it relies on the component instance (`this`), which does not exist in function components.

```tsx
// 🔴 Problem: findDOMNode is deprecated and does not work well with function components.
import { useEffect } from 'react';
import { findDOMNode } from 'react-dom';

function AutoSelectingInput() {
  useEffect(() => {
    const input = findDOMNode(this);
    input.select();
  }, []);

  return <input defaultValue="Hello" />;
}
```

```tsx
// 🟢 Recommended: use useRef to access the underlying DOM node.
import { useEffect, useRef } from 'react';

function AutoSelectingInput() {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.select();
  }, []);

  return <input ref={ref} defaultValue="Hello" />;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * No longer reports `findDOMNode` calls made through computed string-literal member access (e.g. `obj["findDOMNode"]()`), since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-find-dom-node` rule. Closes #173. (#179)
    * Reports usage of `findDOMNode` which is deprecated in React.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node/no-find-dom-node.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node/no-find-dom-node.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `findDOMNode`](https://react.dev/reference/react-dom/findDOMNode)

***

## See Also [#see-also]

* [`react-dom/no-flush-sync`](./dom-no-flush-sync)\
  Disallows `flushSync`.


# no-flush-sync (/docs/rules/dom-no-flush-sync)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-flush-sync
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-flush-sync
```

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

`flushSync` can significantly hurt performance and may unexpectedly force pending Suspense boundaries to show their fallback state.

Most of the time, `flushSync` can be avoided, so use `flushSync` as a last resort.

## Examples [#examples]

### Using `flushSync` to force synchronous updates [#using-flushsync-to-force-synchronous-updates]

`flushSync` forces React to flush pending work synchronously, which can degrade performance and cause Suspense fallbacks to appear unexpectedly.

```tsx
// 🔴 Problem: flushSync hurts performance and can trigger unexpected fallback states.
import { flushSync } from "react-dom";

flushSync(() => {
  setSomething(123);
});
```

### Using `flushSync` inside browser APIs that require synchronous DOM updates [#using-flushsync-inside-browser-apis-that-require-synchronous-dom-updates]

Some browser APIs expect results inside of callbacks to be written to the DOM synchronously, by the end of the callback, so the browser can do something with the rendered DOM. In these cases, `flushSync` is the appropriate tool.

Due to current implementation limitations, this rule will still report an error for such legitimate uses. However, you can safely suppress it with `// eslint-disable-next-line` in these scenarios.

```tsx
// 🔵 OK: the beforeprint event needs the DOM updated before the print dialog opens
import { useState, useEffect } from "react";
import { flushSync } from "react-dom";

export default function PrintApp() {
  const [isPrinting, setIsPrinting] = useState(false);

  useEffect(() => {
    function handleBeforePrint() {
      // eslint-disable-next-line @eslint-react/dom-no-flush-sync
      flushSync(() => {
        setIsPrinting(true);
      });
    }

    function handleAfterPrint() {
      setIsPrinting(false);
    }

    window.addEventListener("beforeprint", handleBeforePrint);
    window.addEventListener("afterprint", handleAfterPrint);
    return () => {
      window.removeEventListener("beforeprint", handleBeforePrint);
      window.removeEventListener("afterprint", handleAfterPrint);
    };
  }, []);

  return (
    <>
      <h1>isPrinting: {isPrinting ? "yes" : "no"}</h1>
      <button onClick={() => window.print()}>
        Print
      </button>
    </>
  );
}
```

### Using `flushSync` with `startViewTransition` [#using-flushsync-with-startviewtransition]

Similarly, `flushSync` can be appropriate when used inside `startViewTransition` (or a helper wrapping it) to ensure the DOM is updated synchronously before the browser captures the transition state.

<Callout type="warn">
  The View Transitions API is still experimental and not fully supported in all browsers.
</Callout>

```tsx
// 🔵 OK: startViewTransition needs the DOM updated synchronously before capture
import { useState } from "react";
import { flushSync } from "react-dom";
import { transitionHelper } from "./utils";

export default function App() {
  const [count, setCount] = useState(0);

  const onIncrementClick = () => {
    transitionHelper({
      updateDOM() {
        // eslint-disable-next-line @eslint-react/dom-no-flush-sync
        flushSync(() => {
          setCount(count + 1);
        });
      }
    });
  };

  return (
    <div>
      <button onClick={onIncrementClick}>Increment</button>
      <div className="count">{count}</div>
    </div>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * No longer reports `flushSync` calls made through computed string-literal member access (e.g. `obj["flushSync"]()`), since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[1.33.0] - 2025-03-14">
    ### Changed [#changed-2]

    * Updated rule severity. (#988)
  </Accordion>

  <Accordion title="[1.28.0] - 2025-02-23">
    ### Added [#added]

    * Initial release of the `no-flush-sync` rule. (#942)
    * Reports usage of `flushSync` which should be avoided in most cases.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync/no-flush-sync.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync/no-flush-sync.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `flushSync`](https://react.dev/reference/react-dom/flushSync)
* [Chrome Developers: Working with frameworks in View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#working_with_frameworks)

***

## See Also [#see-also]

* [`react-dom/no-find-dom-node`](./dom-no-find-dom-node)\
  Disallows `findDOMNode`.


# no-hydrate (/docs/rules/dom-no-hydrate)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-hydrate
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-hydrate
```

**Features**

`🔄`

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

`ReactDOM.hydrate()` is deprecated in React 18. This rule encourages migrating to the new `hydrateRoot()` API which provides better error handling and concurrent features support.

## Examples [#examples]

### Using the deprecated `ReactDOM.hydrate()` API [#using-the-deprecated-reactdomhydrate-api]

In React 18, `ReactDOM.hydrate()` is deprecated in favor of `hydrateRoot()`.

```tsx
// 🔴 Problem: ReactDOM.hydrate() is deprecated.
import Component from "Component";
import ReactDOM from "react-dom";

ReactDOM.hydrate(<Component />, document.getElementById("app"));
```

```tsx
// 🟢 Recommended: use hydrateRoot() for better error handling and concurrent features.
import Component from "Component";
import ReactDOM from "react-dom";
import { hydrateRoot } from "react-dom/client";

hydrateRoot(document.getElementById("app"), <Component />);
```

### Using `hydrate()` from `react-dom` [#using-hydrate-from-react-dom]

Importing `hydrate` directly from `react-dom` is also deprecated and should be migrated to `hydrateRoot()`.

```tsx
// 🔴 Problem: hydrate() from react-dom is deprecated.
import { hydrate } from 'react-dom';

const container = document.getElementById('app');
hydrate(<App tab="home" />, container);
```

```tsx
// 🟢 Recommended: use hydrateRoot() from react-dom/client.
import { hydrateRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);
```

### Hydrating a server-rendered app safely [#hydrating-a-server-rendered-app-safely]

When hydrating a server-rendered application, verify that the DOM node exists before calling `hydrateRoot` to avoid runtime errors.

```tsx
// 🟢 Recommended: Verify the DOM node exists before hydrating
import { hydrateRoot } from "react-dom/client";
import App from "./App";

const domNode = document.getElementById("root");
if (domNode) {
  hydrateRoot(domNode, <App />);
} else {
  console.error("Hydration target not found");
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access (e.g. `obj["hydrate"]()`) are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[1.35.0] - 2025-03-18">
    ### Added [#added]

    * Initial release of the `no-hydrate` rule. (#995)
    * Reports usage of `ReactDOM.hydrate` and recommends using `createRoot().hydrate` instead.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-hydrate/no-hydrate.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-hydrate/no-hydrate.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-hydrate/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot)
* [React Docs: `hydrate`](https://18.react.dev/reference/react-dom/hydrate)

***

## See Also [#see-also]

* [`react-dom/no-render`](./dom-no-render)\
  Replaces usage of `ReactDOM.render()` with `createRoot(node).render()`.


# no-missing-button-type (/docs/rules/dom-no-missing-button-type)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-missing-button-type
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-missing-button-type
```

**Features**

`🔧`

**Presets**

`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

The default `type` of a button is `submit`, which causes the submission of a form when placed inside a `form` element. This is likely not the behavior you want inside a React application.

Allowed button types are `submit`, `button`, or `reset`.

## Examples [#examples]

### Rendering a `<button>` without an explicit `type` [#rendering-a-button-without-an-explicit-type]

A button without a `type` attribute defaults to `submit`, which can unintentionally submit forms.

```tsx
// 🔴 Problem: missing explicit type; defaults to submit.
function MyComponent() {
  return <button>Click me</button>;
  //     ^^^ Missing 'type' attribute on button component.
}
```

```tsx
// 🟢 Recommended: explicitly declare the button type.
function MyComponent() {
  return <button type="button">Click me</button>;
}
```

### Buttons inside forms [#buttons-inside-forms]

Inside a `<form>`, the default `type="submit"` can cause unexpected submissions. Always be explicit about whether a button submits the form or performs an independent action.

```tsx
// 🟢 Recommended: explicitly declare button types in forms
function Search() {
  function search(formData: FormData) {
    const query = formData.get("query");
    alert(`You searched for '${query}'`);
  }

  return (
    <form action={search}>
      <input name="query" />
      <button type="submit">Search</button>
    </form>
  );
}
```

### Independent action buttons inside forms [#independent-action-buttons-inside-forms]

Buttons that perform local UI actions (such as incrementing a counter) inside a form should use `type="button"` to prevent accidental form submission.

```tsx
// 🟢 Recommended: use type="button" for independent actions inside a form
import { useState } from "react";

function ShippingForm() {
  const [count, setCount] = useState(1);

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    console.log(Object.fromEntries(formData), { count });
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Number of items:
        <button type="button" onClick={() => setCount((c) => c - 1)}>–</button>
        {count}
        <button type="button" onClick={() => setCount((c) => c + 1)}>+</button>
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false negative where a computed identifier key in spread props (e.g. `<button {...{ [key]: "submit" }} />`) was treated as the static `type` prop, suppressing the missing-type report. The actual property name is the runtime value of the variable; computed string literal keys (e.g. `{...{ ["type"]: "button" }}`) still count as providing `type`.
  </Accordion>

  <Accordion title="[2.0.3] - 2025-09-30">
    ### Fixed [#fixed-1]

    * Fixed false positive when specifying non-trivial expression as value of type attribute. Closes #1247. (#1250)
  </Accordion>

  <Accordion title="[1.15.1] - 2024-10-26">
    ### Fixed [#fixed-2]

    * Fixed false positive when using type attribute in a JSX expression.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-missing-button-type` rule. (#76)
    * Reports `<button>` elements that are missing an explicit `type` attribute.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type/no-missing-button-type.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type/no-missing-button-type.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type/CHANGELOG.md)

## Further Reading [#further-reading]

* [MDN: `button`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#notes)

***

## See Also [#see-also]

* [`react-dom/no-missing-iframe-sandbox`](./dom-no-missing-iframe-sandbox)\
  Enforces an explicit `sandbox` attribute for `iframe` elements.


# no-missing-iframe-sandbox (/docs/rules/dom-no-missing-iframe-sandbox)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-missing-iframe-sandbox
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-missing-iframe-sandbox
```

**Features**

`🔧`

**Presets**

`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

The sandbox attribute enables an extra set of restrictions for the content in the iframe. Using the sandbox attribute is considered a good security practice.

## Examples [#examples]

### Rendering an `<iframe>` without a `sandbox` attribute [#rendering-an-iframe-without-a-sandbox-attribute]

An iframe without `sandbox` allows the embedded content unrestricted capabilities, which is a security risk.

```tsx
// 🔴 Problem: missing sandbox attribute leaves the iframe unrestricted.
function MyComponent() {
  return <iframe src="https://eslint-react.xyz" />;
  //     ^^^ Missing 'sandbox' attribute on iframe component.
}
```

```tsx
// 🟢 Recommended: add a sandbox attribute to restrict the iframe's capabilities.
function MyComponent() {
  return <iframe src="https://eslint-react.xyz" sandbox="allow-popups" />;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false negative where a computed identifier key in spread props (e.g. `<iframe {...{ [key]: "" }} />`) was treated as the static `sandbox` prop, suppressing the missing-sandbox report. The actual property name is the runtime value of the variable; computed string literal keys still count as providing `sandbox`.
  </Accordion>

  <Accordion title="[1.15.1] - 2024-10-26">
    ### Fixed [#fixed-1]

    * Fixed false positive when the `sandbox` attribute is set to `sandbox=""`. Closes #700.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-missing-iframe-sandbox` rule. (#77)
    * Reports `<iframe>` elements that are missing a `sandbox` attribute.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox/no-missing-iframe-sandbox.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox/no-missing-iframe-sandbox.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox/CHANGELOG.md)

## Further Reading [#further-reading]

* [MDN: `iframe` `sandbox`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes)

***

## See Also [#see-also]

* [`react-dom/no-missing-button-type`](./dom-no-missing-button-type)\
  Enforces an explicit `type` attribute for `button` elements.
* [`react-dom/no-unsafe-iframe-sandbox`](./dom-no-unsafe-iframe-sandbox)\
  Enforces that the `sandbox` attribute for `iframe` elements is not set to unsafe combinations.


# no-render-return-value (/docs/rules/dom-no-render-return-value)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-render-return-value
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-render-return-value
```

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

`ReactDOM.render()` currently returns a reference to the root React component instance. However, using this return value is legacy and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root React component instance, the preferred solution is to attach a [callback ref](https://react.dev/learn/manipulating-the-dom-with-refs) to the root element.

## Examples [#examples]

### Capturing the return value of `ReactDOM.render()` [#capturing-the-return-value-of-reactdomrender]

The return value of `ReactDOM.render()` is considered legacy and may break with future React updates.

```tsx
// 🔴 Problem: depending on the return value of ReactDOM.render().
import ReactDOM from "react-dom";

const instance = ReactDOM.render(<div id="app" />, document.body);
//    ^^^ Do not depend on the return value from '{{objectName}}.render'.
```

```tsx
// 🟢 Recommended: use a callback ref on the root element instead.
import ReactDOM from "react-dom";

function doSomethingWithInst(inst: HTMLDivElement | null) {
  // ...
}

ReactDOM.render(<div id="app" ref={doSomethingWithInst} />, document.body);
```

### Using the callback parameter of `ReactDOM.render()` [#using-the-callback-parameter-of-reactdomrender]

The callback parameter of `ReactDOM.render()` is also legacy and should be avoided. Use `useEffect` inside the rendered component instead.

```tsx
// 🔴 Problem: using the callback parameter of ReactDOM.render().
import { render } from 'react-dom';

const container = document.getElementById('app');
render(<App tab="home" />, container, () => {
  console.log('rendered');
});
```

```tsx
// 🟢 Recommended: use useEffect inside the rendered component.
import { useEffect } from 'react';
import { createRoot } from 'react-dom/client';

function AppWithCallbackAfterRender() {
  useEffect(() => {
    console.log('rendered');
  });

  return <App tab="home" />;
}

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<AppWithCallbackAfterRender />);
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access (e.g. `obj["render"]()` whose return value is used) are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-render-return-value` rule. Closes #183. (#184)
    * Reports usage of the return value from `ReactDOM.render`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value/no-render-return-value.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value/no-render-return-value.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `render`](https://18.react.dev/reference/react-dom/render)


# no-render (/docs/rules/dom-no-render)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-render
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-render
```

**Features**

`🔄`

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

## Examples [#examples]

### Bootstrapping a React app with the legacy API [#bootstrapping-a-react-app-with-the-legacy-api]

```tsx
import Component from "Component";
import ReactDOM from "react-dom";

// 🔴 Problem: ReactDOM.render() is the legacy API and will be removed in React 18+
ReactDOM.render(<Component />, document.getElementById("app"));
```

```tsx
import Component from "Component";
import { createRoot } from "react-dom/client";

// 🟢 Recommended: Use createRoot() from "react-dom/client" instead
createRoot(document.getElementById("app")).render(<Component />);
```

### Using `render()` from `react-dom` [#using-render-from-react-dom]

Importing `render` directly from `react-dom` is also deprecated and should be migrated to `createRoot()`.

```tsx
// 🔴 Problem: render() from react-dom is the legacy API.
import { render } from 'react-dom';

const container = document.getElementById('app');
render(<App tab="home" />, container);
```

```tsx
// 🟢 Recommended: use createRoot() from react-dom/client.
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);
```

### Bootstrapping a React app with error handling [#bootstrapping-a-react-app-with-error-handling]

When bootstrapping a React application, check that the DOM node exists before creating the root to avoid runtime errors.

```tsx
// 🟢 Recommended: Verify the DOM node exists before creating a root
import { createRoot } from "react-dom/client";
import App from "./App";

const domNode = document.getElementById("root");
if (domNode) {
  const root = createRoot(domNode);
  root.render(<App />);
} else {
  console.error("Root element not found");
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access (e.g. `obj["render"]()`) are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[1.35.0] - 2025-03-18">
    ### Added [#added]

    * Initial release of the `no-render` rule. (#993)
    * Reports usage of `ReactDOM.render` and recommends using `createRoot` instead.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-render/no-render.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-render/no-render.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-render/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `createRoot`](https://react.dev/reference/react-dom/client/createRoot)
* [React Docs: `render`](https://18.react.dev/reference/react-dom/render)

***

## See Also [#see-also]

* [`react-dom/no-hydrate`](./dom-no-hydrate)\
  Replaces usage of `ReactDOM.hydrate()` with `hydrateRoot()`.


# no-script-url (/docs/rules/dom-no-script-url)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-script-url
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-script-url
```

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

`javascript:` URLs are a form of [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. They allow an attacker to execute arbitrary JavaScript in the context of your website, which can be used to steal user data, deface your website, or perform other malicious actions.

## Examples [#examples]

### Passing URLs to link or resource attributes [#passing-urls-to-link-or-resource-attributes]

```tsx
function MyComponent() {
  // 🔴 Problem: `javascript:` URLs are a security risk and should be avoided
  return <a href="javascript:alert('Hello, world!')">Click me</a>;
  //        ^^^ Using a `javascript:` URL is a security risk and should be avoided.
}
```

```tsx
function MyComponent() {
  // 🟢 Recommended: Use a safe URL instead
  return <a href="/some-page">Click me</a>;
}
```

### Using event handlers instead of `javascript:` URLs [#using-event-handlers-instead-of-javascript-urls]

If you need to run JavaScript when a user clicks a link, attach an event handler to a `<button>` or use a safe `href` with an `onClick` handler on an `<a>` element.

```tsx
// 🟢 Recommended: Use a button with an onClick handler for actions
function MyComponent() {
  function handleClick() {
    alert("Hello, world!");
  }

  return <button onClick={handleClick}>Click me</button>;
}
```

```tsx
// 🟢 Recommended: Use a safe href with an onClick handler for links
function MyComponent() {
  function handleClick(event: React.MouseEvent) {
    event.preventDefault();
    alert("Hello, world!");
  }

  return (
    <a href="/safe-fallback" onClick={handleClick}>
      Click me
    </a>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-script-url` rule.
    * Reports usage of `javascript:` URLs in JSX attributes.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-script-url/no-script-url.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-script-url/no-script-url.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-script-url/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-dom/no-dangerously-set-innerhtml`](./dom-no-dangerously-set-innerhtml)\
  Disallows DOM elements from using `dangerouslySetInnerHTML`.
* [`react-dom/no-unsafe-target-blank`](./dom-no-unsafe-target-blank)\
  Disallows `target="_blank"` without `rel="noreferrer noopener"`.


# no-string-style-prop (/docs/rules/dom-no-string-style-prop)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-string-style-prop
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-string-style-prop
```

## Rule Details [#rule-details]

Using a string value for the `style` prop is not valid in React. The style prop must be an object with camelCased CSS properties. This rule helps catch incorrect string usage that would cause runtime errors.

## Examples [#examples]

### Setting inline styles on JSX elements [#setting-inline-styles-on-jsx-elements]

```tsx
function MyComponent() {
  // 🔴 Problem: Passing a CSS string to the style prop causes a runtime error
  return <div style="color: red;" />;
}
```

```tsx
function MyComponent() {
  // 🟢 Recommended: Pass an object with camelCased CSS properties
  return <div style={{ color: "red" }} />;
}
```

### Setting multiple inline styles [#setting-multiple-inline-styles]

When you need to set multiple CSS properties, always pass them as a single style object with camelCased property names.

```tsx
// 🟢 Recommended: use a style object with camelCased properties
function Box() {
  return (
    <div
      style={{
        margin: 20,
        height: 100,
        width: 100,
        border: "2px solid black",
        backgroundColor: "blue",
      }}
    />
  );
}
```

### Using dynamic styles driven by state [#using-dynamic-styles-driven-by-state]

When an element's appearance depends on state or user input, compute the style object during rendering instead of using a string.

```tsx
// 🟢 Recommended: compute style objects dynamically from state
import { useState } from "react";

function Pointer() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div
      onPointerMove={(e) => setPosition({ x: e.clientX, y: e.clientY })}
      style={{
        position: "absolute",
        backgroundColor: "pink",
        borderRadius: "50%",
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: "none",
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }}
    />
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false positive where a computed identifier key in spread props (e.g. `<div {...{ [key]: "color: red" }} />`) was treated as the static `style` prop. The actual property name is the runtime value of the variable; computed string literal keys are still recognized.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-string-style-prop` rule. (#59)
    * Reports string values passed to the `style` prop instead of objects.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-string-style-prop/no-string-style-prop.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-string-style-prop/no-string-style-prop.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-string-style-prop/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Adding styles](https://react.dev/learn#adding-styles)

***

## See Also [#see-also]

* [`react-dom/no-unknown-property`](./dom-no-unknown-property)\
  Disallows unknown `DOM` properties.
* [`react-jsx/no-namespace`](./jsx-no-namespace)\
  Disallow JSX namespace syntax, as React does not support them.


# no-unknown-property (/docs/rules/dom-no-unknown-property)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-unknown-property
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-unknown-property
```

**Features**

`🔧` `⚙️`

## Rule Details [#rule-details]

In JSX, most DOM properties and attributes should be camel-cased to be consistent with standard JavaScript style. This can be a source of error if you are used to writing plain HTML. Only `data-*` and `aria-*` attributes use hyphens and lowercase letters in JSX.

## Examples [#examples]

### Writing standard HTML attributes in JSX [#writing-standard-html-attributes-in-jsx]

```tsx
// 🔴 Problem: HTML attributes like `class` must be written as `className` in JSX
const Hello = <div class="hello">Hello World</div>;
const Alphabet = <div abc="something">Alphabet</div>;
```

```tsx
// 🟢 Recommended: Use React's camelCase property names for DOM elements
const Hello = <div className="hello">Hello World</div>;
const Button = <button disabled>Cannot click me</button>;
const Img = <img src={catImage} alt="A cat sleeping on a keyboard" />;
```

### Using ARIA and data attributes [#using-aria-and-data-attributes]

```tsx
// 🔴 Problem: Non-standard aria-* attributes are not valid
const IconButton = <div aria-foo="bar" />;
```

```tsx
// 🟢 Recommended: Use valid aria-* and data-* attributes
const IconButton = <button aria-label="Close" onClick={this.close}>{closeIcon}</button>;
const Data = <div data-index={12}>Some data</div>;
```

### Passing arbitrary props to React components and custom elements [#passing-arbitrary-props-to-react-components-and-custom-elements]

```tsx
// 🔵 OK: React components can accept any props you define
const MyComponent = <App class="foo-bar" />;
const AnotherComponent = <Foo.bar for="bar" />;

// 🔵 OK: Custom web components are also ignored
const MyElem = <div class="foo" is="my-elem"></div>;
const AtomPanel = <atom-panel class="foo"></atom-panel>;
```

## Rule Options [#rule-options]

```js
...
"react/no-unknown-property": [<enabled>, { ignore: <ignore>, requireDataLowercase: <requireDataLowercase> }]
...
```

* `enabled`: enables the rule. 0=off, 1=warn, 2=error. Defaults to 0.
* `ignore`: optional array of property and attribute names to ignore during validation.
* `requireDataLowercase`: optional (default: `false`), requires data-\* attributes to contain only lowercase characters. React will issue a warning when data-\* attributes contain uppercase characters. To catch such attributes, set the `requireDataLowercase` option to `true`.

If you are using a library that passes something as a prop to JSX elements, add those props to the ignored properties.

For example, if you use [emotion](https://emotion.sh/docs/introduction) and its [`css` prop](https://emotion.sh/docs/css-prop),
add the following to your ESLint config file:

## Configuration Examples [#configuration-examples]

```ts title="eslint.config.ts"
// ...
export default [
  // ...
  {
    files: ["**/*.tsx"],
    rules: {
      "@eslint-react/dom-no-unknown-property": ['error', { ignore: ['css'] }]
  }
];
```

Now the following code passes:

```tsx
const StyledDiv = <div css={{ color: "pink" }}></div>;
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.8.3] - 2026-05-20">
    ### Fixed [#fixed]

    * Added React 19 `precedence` and `blocking` attributes to known properties with version-gated tag checks, preventing false positives on `<style>`, `<link>`, and `<script>` elements.
  </Accordion>

  <Accordion title="[2.12.4] - 2026-02-11">
    ### Changed [#changed]

    * Refactored to fix ESLint and TypeScript issues. (#1490)
  </Accordion>

  <Accordion title="[1.52.8] - 2025-08-29">
    ### Changed [#changed-1]

    * Updated rule implementation and documentation.
  </Accordion>

  <Accordion title="[1.17.1] - 2024-11-22">
    ### Fixed [#fixed-1]

    * Added popover API props to known properties. Closes #865.
  </Accordion>

  <Accordion title="[1.16.2] - 2024-11-20">
    ### Changed [#changed-2]

    * Disabled rule in presets by default.
  </Accordion>

  <Accordion title="[1.16.0] - 2024-10-31">
    ### Added [#added]

    * Initial release of the `no-unknown-property` rule. (#847)
    * Reports unknown DOM properties on JSX elements.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property/no-unknown-property.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property/no-unknown-property.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-dom/no-string-style-prop`](./dom-no-string-style-prop)\
  Disallows the use of string style prop in JSX. Use an object instead..
* [`react-jsx/no-namespace`](./jsx-no-namespace)\
  Disallow JSX namespace syntax, as React does not support them.


# no-unsafe-iframe-sandbox (/docs/rules/dom-no-unsafe-iframe-sandbox)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-unsafe-iframe-sandbox
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-unsafe-iframe-sandbox
```

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This rule reports cases where the attribute contains `allow-scripts` and `allow-same-origin` at the same time, as this combination allows the embedded document to remove the sandbox attribute and bypass the restrictions.

## Examples [#examples]

### Sandboxing third-party content in an iframe [#sandboxing-third-party-content-in-an-iframe]

```tsx
function MyComponent() {
  return (
    // 🔴 Problem: allow-scripts together with allow-same-origin lets the embedded
    // document escape the sandbox by removing the attribute via JavaScript
    <iframe
      src="https://eslint-react.xyz"
      sandbox="allow-scripts allow-same-origin"
    />
  );
}
```

```tsx
function MyComponent() {
  // 🟢 Recommended: Use a safer sandbox value that does not combine both flags
  return <iframe src="https://eslint-react.xyz" sandbox="allow-popups" />;
}
```

### Restrictive sandboxing for untrusted content [#restrictive-sandboxing-for-untrusted-content]

When embedding untrusted third-party content, use a restrictive `sandbox` attribute that limits the embedded document's capabilities without allowing script execution combined with same-origin access.

```tsx
// 🟢 Recommended: Use restrictive sandbox values for untrusted content
function MyComponent() {
  return (
    <iframe
      src="https://example.com"
      sandbox="allow-popups allow-popups-to-escape-sandbox"
    />
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false positive where a computed identifier key in spread props (e.g. `<iframe {...{ [key]: "allow-scripts allow-same-origin" }} />`) was treated as the static `sandbox` prop and its value checked for unsafe combinations. The actual property name is the runtime value of the variable; computed string literal keys are still checked.
  </Accordion>

  <Accordion title="[2.3.9] - 2025-11-22">
    ### Fixed [#fixed-1]

    * Fixed severity documentation in rule docs. (#1327)
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-unsafe-iframe-sandbox` rule. (#78)
    * Reports unsafe `sandbox` attribute values on `<iframe>` elements.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox/no-unsafe-iframe-sandbox.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox/no-unsafe-iframe-sandbox.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox/CHANGELOG.md)

## Further Reading [#further-reading]

* [MDN: `iframe` `sandbox`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes)

***

## See Also [#see-also]

* [`react-dom/no-missing-iframe-sandbox`](./dom-no-missing-iframe-sandbox)\
  Enforces an explicit `sandbox` attribute for `iframe` elements.
* [`react-dom/no-unsafe-target-blank`](./dom-no-unsafe-target-blank)\
  Disallows `target="_blank"` without `rel="noreferrer noopener"`.


# no-unsafe-target-blank (/docs/rules/dom-no-unsafe-target-blank)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-unsafe-target-blank
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-unsafe-target-blank
```

**Features**

`🔧`

**Presets**

`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

When using `target="_blank"` on links without `rel="noreferrer noopener"`, the opened page can access the `window.opener` property of the original page, which creates a security vulnerability known as tabnabbing.

## Examples [#examples]

### Opening external links in a new tab [#opening-external-links-in-a-new-tab]

```tsx
function MyComponent() {
  return (
    // 🔴 Problem: target="_blank" without rel allows the opened page to access window.opener
    <a href="https://eslint-react.xyz" target="_blank">
      Example
    </a>
  );
}
```

```tsx
function MyComponent() {
  return (
    // 🟢 Recommended: Always add rel="noreferrer noopener" when using target="_blank"
    <a href="https://eslint-react.xyz" target="_blank" rel="noreferrer noopener">
      Example
    </a>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.2] - 2026-07-03">
    ### Changed [#changed]

    * Computed identifier keys in spread props (e.g. `<a {...{ [key]: "_blank" }} />`) are no longer treated as statically providing the `target`, `href`, or `rel` props, since the actual property name is the runtime value of the variable. Computed string literal keys are still recognized. This avoids both false positives (a computed key mistaken for `target="_blank"`) and false negatives (a computed key mistaken for a safe `rel`).
  </Accordion>

  <Accordion title="[2.12.4] - 2026-02-11">
    ### Changed [#changed-1]

    * Refactored to remove unnecessary `P.shape` usages.
  </Accordion>

  <Accordion title="[2.3.12] - 2025-12-02">
    ### Fixed [#fixed]

    * Fixed to skip unrelated components.
  </Accordion>

  <Accordion title="[1.15.1] - 2024-10-26">
    ### Fixed [#fixed-1]

    * Fixed links with `rel="noreferrer"` to be valid. Closes #562.
    * Refactored to skip links that are not `href` or used as `href`.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-unsafe-target-blank` rule. (#79)
    * Reports unsafe `target="_blank"` links without `rel="noopener noreferrer"`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank/no-unsafe-target-blank.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank/no-unsafe-target-blank.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank/CHANGELOG.md)

## Further Reading [#further-reading]

* [MDN: `target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)
* [MDN: `rel`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
* [MDN: `Window.opener`](https://developer.mozilla.org/en-US/docs/Web/API/Window/opener)

***

## See Also [#see-also]

* [`react-dom/no-unsafe-iframe-sandbox`](./dom-no-unsafe-iframe-sandbox)\
  Enforces that the `sandbox` attribute for `iframe` elements is not set to unsafe combinations.


# no-use-form-state (/docs/rules/dom-no-use-form-state)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-use-form-state
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-use-form-state
```

**Features**

`🔄`

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

## Examples [#examples]

### Managing form state with server actions [#managing-form-state-with-server-actions]

```tsx
import { useFormState } from "react-dom";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  // 🔴 Problem: useFormState from "react-dom" is deprecated in favor of useActionState
  const [state, formAction] = useFormState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}
```

```tsx
import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  // 🟢 Recommended: Use useActionState from "react" instead
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}
```

### Using useActionState with async server actions [#using-useactionstate-with-async-server-actions]

`useActionState` can manage the pending state of asynchronous actions, making it easier to show loading indicators while the action is running.

```tsx
// 🟢 Recommended: Use useActionState to track pending state
import { useActionState } from "react";

async function addToCart(previousCount: number, formData: FormData) {
  // Simulate an async server action
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return previousCount + 1;
}

function Checkout() {
  const [count, dispatchAction, isPending] = useActionState(addToCart, 0);

  return (
    <div className="checkout">
      <h2>Checkout</h2>
      <div className="row">
        <span>Tickets</span>
        <span>Qty: {count}</span>
      </div>
      <button onClick={() => dispatchAction()} disabled={isPending}>
        Add Ticket{isPending ? " 🌀" : ""}
      </button>
    </div>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access (e.g. `obj["useFormState"]()`) are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[1.35.0] - 2025-03-18">
    ### Added [#added]

    * Initial release of the `no-use-form-state` rule. (#994)
    * Reports usage of `useFormState` and recommends using `useActionState` instead.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state/no-use-form-state.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state/no-use-form-state.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `useActionState`](https://react.dev/reference/react/useActionState)


# no-void-elements-with-children (/docs/rules/dom-no-void-elements-with-children)





**Full Name in `eslint-plugin-react-dom`**

```plain copy
react-dom/no-void-elements-with-children
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/dom-no-void-elements-with-children
```

**Presets**

`dom`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Self-closing HTML elements (ex: `<img />`, `<br />`, `<hr />`) are collectively known as void DOM elements. React will give you a warning if you try to give these elements children:

> Invariant Violation: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

## Examples [#examples]

### Adding children or inner HTML to elements [#adding-children-or-inner-html-to-elements]

```tsx
// 🔴 Problem: Void elements like <br> cannot contain children
<br>Children</br>
<br children="Children" />
<br dangerouslySetInnerHTML={{ __html: 'HTML' }} />
React.createElement('br', undefined, 'Children')
React.createElement('br', { children: 'Children' })
React.createElement('br', { dangerouslySetInnerHTML: { __html: 'HTML' } })
```

```tsx
// 🟢 Recommended: Use non-void container elements for children or inner HTML
<div>Children</div>
<div children="Children" />
<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />
React.createElement('div', undefined, 'Children')
React.createElement('div', { children: 'Children' })
React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } })
```

### Using void elements correctly [#using-void-elements-correctly]

Void elements like `<img>` and `<input>` cannot contain children. Use attributes such as `alt` or `placeholder` to provide descriptive text instead.

```tsx
// 🟢 Recommended: Use attributes instead of children for void elements
function UserProfile() {
  return (
    <>
      <img src="/avatar.png" alt="User avatar" />
      <input type="text" placeholder="Enter your name" />
      <hr />
    </>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false positive where a computed identifier key in spread props (e.g. `<br {...{ [key]: value }} />`) was treated as the static `children` or `dangerouslySetInnerHTML` prop. The actual property name is the runtime value of the variable; computed string literal keys are still recognized.
  </Accordion>

  <Accordion title="[1.50.0] - 2025-05-16">
    ### Fixed [#fixed-1]

    * Fixed `polorphicPropName` not working with the rule. Closes #1108. (#1108)
  </Accordion>

  <Accordion title="[1.33.0] - 2025-03-14">
    ### Changed [#changed]

    * Updated rule severity. (#988)
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-children-in-void-dom-elements` rule.
    * Reports void DOM elements (e.g., `<img>`, `<input>`) that have children.

    ### Changed [#changed-1]

    * Renamed rule from `no-children-in-void-dom-elements` to `no-void-elements-with-children`. (#888)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children/no-void-elements-with-children.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children/no-void-elements-with-children.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children/CHANGELOG.md)

## Further Reading [#further-reading]

* [MDN: Void elements](https://developer.mozilla.org/en-US/docs/Glossary/Void_element)

***

## See Also [#see-also]

* [`react-dom/no-dangerously-set-innerhtml-with-children`](./dom-no-dangerously-set-innerhtml-with-children)\
  Disallows DOM elements from using `dangerouslySetInnerHTML` and `children` at the same time.
* [`react-dom/no-dangerously-set-innerhtml`](./dom-no-dangerously-set-innerhtml)\
  Disallows DOM elements from using `dangerouslySetInnerHTML`.


# error-boundaries (/docs/rules/error-boundaries)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/error-boundaries
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/error-boundaries
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Try/catch blocks can't catch errors that happen during React's rendering process. Errors thrown in rendering methods or lifecycle hooks bubble up through the component tree. Only [Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) can catch these errors.

Similarly, the `use` hook doesn't throw errors in the traditional sense — it suspends component execution. When `use` encounters a rejected promise, only Error Boundaries (and Suspense boundaries) can handle these cases. A catch block around `use` would never run.

## Examples [#examples]

### Wrapping JSX in try/catch [#wrapping-jsx-in-trycatch]

React's rendering is declarative. When you write `return <ChildComponent />`, you're describing what the UI should look like — you're not imperatively executing `ChildComponent`. If a child throws during rendering, React handles that error propagation internally through the component tree, bypassing any try/catch in JavaScript's call stack.

```tsx
// 🔴 Problem: try/catch cannot catch rendering errors in child components
function Parent() {
  try {
    return <ChildComponent />;
    //      ^^^ Use an Error Boundary to catch errors in child components.
  } catch (error) {
    return <div>Error occurred</div>;
  }
}
```

```tsx
// 🟢 Recommended: Use an Error Boundary to catch rendering errors
function Parent() {
  return (
    <ErrorBoundary fallback={<div>Error occurred</div>}>
      <ChildComponent />
    </ErrorBoundary>
  );
}
```

### Using try/catch with the `use` hook [#using-trycatch-with-the-use-hook]

The `use` hook doesn't throw errors in the traditional sense — it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. When the promise rejects, React propagates the error through the component tree to the nearest Error Boundary.

```tsx
// 🔴 Problem: The catch block will never execute
function Component({ promise }) {
  try {
    const data = use(promise);
    //           ^^^ Use an Error Boundary instead of try/catch around the 'use' hook.
    return <div>{data}</div>;
  } catch (error) {
    return <div>Failed to load</div>;
  }
}
```

```tsx
// 🟢 Recommended: Use an Error Boundary with Suspense to handle async data
function App() {
  return (
    <ErrorBoundary fallback={<div>Failed to load</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <DataComponent promise={fetchData()} />
      </Suspense>
    </ErrorBoundary>
  );
}
```

### Non-rendering operations [#non-rendering-operations]

Try/catch is perfectly valid for synchronous operations like `JSON.parse`, `localStorage` access, or data transformations that happen before JSX is returned. It is also valid inside event handlers and effects. The rule only flags try/catch blocks that wrap JSX return statements or `use` hook calls inside component functions.

```tsx
// 🔵 OK: Synchronous data processing
function Component() {
  let data;
  try {
    data = JSON.parse(text);
  } catch (e) {
    data = null;
  }
  return <div>{data}</div>;
}
```

```tsx
// 🔵 OK: Error handling in event handlers
function Component() {
  const handleClick = () => {
    try {
      doSomething();
    } catch (e) {
      console.error(e);
    }
  };
  return <button onClick={handleClick}>Click</button>;
}
```

## Troubleshooting [#troubleshooting]

### Why is the linter telling me not to wrap `use` in `try`/`catch`? [#why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch]

The `use` hook doesn't throw errors in the traditional sense — it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against `try`/`catch` around `use` to prevent confusion as the `catch` block would never run.

```tsx
// 🔴 Problem: try/catch around `use` hook
function Component({ promise }) {
  try {
    const data = use(promise); // Won't catch — `use` suspends, not throws
    return <div>{data}</div>;
  } catch (error) {
    return <div>Failed to load</div>; // Unreachable
  }
}
```

```tsx
// 🟢 Recommended: Use an Error Boundary with Suspense
function App() {
  return (
    <ErrorBoundary fallback={<div>Failed to load</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <DataComponent promise={fetchData()} />
      </Suspense>
    </ErrorBoundary>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.6.0] - 2026-04-29">
    ### Fixed [#fixed]

    * Resolved catch block over-reporting in error boundary detection. Closes #1617. (#1730)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/error-boundaries/error-boundaries.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/error-boundaries/error-boundaries.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/error-boundaries/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `error-boundaries` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/error-boundaries)
* [React Docs: Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)
* [React Docs: `use`](https://react.dev/reference/react/use)

***

## See Also [#see-also]

* [`react-x/no-class-component`](./no-class-component)\
  Disallows class components except for error boundaries.


# exhaustive-deps (/docs/rules/exhaustive-deps)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/exhaustive-deps
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/exhaustive-deps
```

**Features**

`⚙️` `🔧`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

React hooks like `useEffect`, `useMemo`, and `useCallback` accept dependency arrays. When a value referenced inside these hooks is not included in the dependency array, React won't re-run the effect or recalculate the value when that dependency changes. This causes stale closures where the hook uses outdated values.

If you find yourself fighting with this rule, you likely need to restructure your code rather than suppress the warning. See [Removing Effect Dependencies](https://react.dev/learn/removing-effect-dependencies) to learn how.

## Examples [#examples]

### Missing dependencies in `useEffect` [#missing-dependencies-in-useeffect]

When a prop or state value is used inside `useEffect` but omitted from the dependency array, the effect will see a stale value after the component re-renders.

```tsx
import { useEffect } from "react";

function MyComponent({ userId }) {
  useEffect(() => {
    fetchUser(userId);
    //        ^^^ 'userId' is missing from the dependency array.
  }, []); // Missing 'userId'
}
```

```tsx
import { useEffect } from "react";

function MyComponent({ userId }) {
  useEffect(() => {
    fetchUser(userId);
  }, [userId]);
}
```

### Missing dependencies in `useMemo` [#missing-dependencies-in-usememo]

`useMemo` will return a cached result until its dependencies change. Omitting a dependency means the memoized value won't update when that input changes.

```tsx
import { useMemo } from "react";

function MyComponent({ items, sortOrder }) {
  const sorted = useMemo(() => {
    return items.sort(sortOrder);
    //                ^^^ 'sortOrder' is missing from the dependency array.
  }, [items]); // Missing 'sortOrder'
}
```

```tsx
import { useMemo } from "react";

function MyComponent({ items, sortOrder }) {
  const sorted = useMemo(() => {
    return items.sort(sortOrder);
  }, [items, sortOrder]);
}
```

### Missing dependencies in `useCallback` [#missing-dependencies-in-usecallback]

A `useCallback` with incomplete dependencies may call a handler with stale prop or state values.

```tsx
import { useCallback } from "react";

function MyComponent({ onSave, value }) {
  const handleClick = useCallback(() => {
    onSave(value);
    //     ^^^ 'value' is missing from the dependency array.
  }, [onSave]); // Missing 'value'
}
```

```tsx
import { useCallback } from "react";

function MyComponent({ onSave, value }) {
  const handleClick = useCallback(() => {
    onSave(value);
  }, [onSave, value]);
}
```

### Adding a function dependency causes infinite loops [#adding-a-function-dependency-causes-infinite-loops]

When a function is defined in the component body, it is recreated on every render. Adding it to a dependency array causes the effect to re-run endlessly.

```tsx
// 🔴 Problem: logItems is a new reference on every render, causing an infinite loop
function MyComponent({ items }) {
  const logItems = () => {
    console.log(items);
  };

  useEffect(() => {
    logItems();
  }, [logItems]);
}
```

In most cases, move the function call out of the effect or inline the logic directly:

```tsx
// 🟢 Recommended: Inline the logic directly into the effect
function MyComponent({ items }) {
  useEffect(() => {
    console.log(items);
  }, [items]);
}
```

If the function is genuinely needed as a stable reference, wrap it with `useCallback`:

```tsx
// 🟢 Recommended: Use useCallback to keep the function reference stable
function MyComponent({ items }) {
  const logItems = useCallback(() => {
    console.log(items);
  }, [items]);

  useEffect(() => {
    logItems();
  }, [logItems]);
}
```

### Running an effect only once on mount [#running-an-effect-only-once-on-mount]

You want to run an effect once on mount, but the linter complains about missing dependencies. Omitting a dependency that is used inside the effect means the effect will see a stale value when that prop changes.

```tsx
// 🔴 Problem: missing dependency causes stale closure
function MyComponent({ userId }) {
  useEffect(() => {
    sendAnalytics(userId);
  }, []); // Missing 'userId'
}
```

The recommended fix is to include the dependency. If `userId` changes and you want the effect to re-run, this is the correct behavior:

```tsx
// 🟢 Recommended: Include all dependencies
function MyComponent({ userId }) {
  useEffect(() => {
    sendAnalytics(userId);
  }, [userId]);
}
```

If you truly need to run once and read the latest value without reacting to changes, use a ref:

```tsx
// 🟢 Recommended: Use a ref as a run-once guard
function MyComponent({ userId }) {
  const sent = useRef(false);

  useEffect(() => {
    if (sent.current) return;
    sent.current = true;
    sendAnalytics(userId);
  }, [userId]);
}
```

## Options [#options]

### Rule Options [#rule-options]

This rule accepts an optional configuration object:

```ts
type Options = {
  additionalHooks?: string;
  enableDangerousAutofixThisMayCauseInfiniteLoops?: boolean;
};
```

```json
{
  "react-x/exhaustive-deps": ["warn", {
    "additionalHooks": "(useMyCustomHook|useAnotherHook)"
  }]
}
```

#### `additionalHooks` [#additionalhooks]

A regex string matching custom hooks that should be checked for exhaustive dependencies in the same way as `useEffect`, `useMemo`, and `useCallback`.

**Note:** When this rule-level option is specified, it takes precedence over the shared `settings` configuration described below.

#### `enableDangerousAutofixThisMayCauseInfiniteLoops` [#enabledangerousautofixthismaycauseinfiniteloops]

When `true`, promotes the suggested fix to an auto-fix. This is dangerous — automatically adding all missing dependencies can introduce infinite loops in effects that intentionally omit dependencies. Use only as a one-time migration aid.

Default: `false`

### Shared Settings [#shared-settings]

Custom effect hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalEffectHooks": "/^(useMyEffect|useCustomEffect)$/u"
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[3.0.0] - 2026-03-16">
    ### Fixed [#fixed]

    * Correctly handle callback-local variables and parent-object dependencies. (#1531)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/exhaustive-deps/exhaustive-deps.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/exhaustive-deps/exhaustive-deps.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/exhaustive-deps/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `exhaustive-deps` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/exhaustive-deps)
* [React Docs: Removing Effect Dependencies](https://react.dev/learn/removing-effect-dependencies)
* [React Docs: `useEffect`](https://react.dev/reference/react/useEffect)
* [React Docs: `useCallback`](https://react.dev/reference/react/useCallback)
* [React Docs: `useMemo`](https://react.dev/reference/react/useMemo)

***

## See Also [#see-also]

* [`react-x/rules-of-hooks`](./rules-of-hooks)\
  Enforces the Rules of Hooks.


# globals (/docs/rules/globals)





<Callout type="warn">
  This is an evaluation implementation and may contain false positives or negatives that have not yet been fully audited. Review each report carefully before applying fixes.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/globals
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/globals
```

**Features**

`🧪`

## Rule Details [#rule-details]

Global variables exist outside React's control. When you modify them during render, you break React's assumption that rendering is pure. This can cause components to behave differently between development and production, break Fast Refresh, and make your app impossible to optimize with features like React Compiler.

## Examples [#examples]

### Mutating module-level variables during render [#mutating-module-level-variables-during-render]

Module-level variables are shared across all component instances. Mutating them during render creates hidden shared state that React cannot track.

```tsx
// 🔴 Problem: Global counter
let renderCount = 0;
function Component() {
  renderCount++; // Mutating a global variable during render
  return <div>Count: {renderCount}</div>;
}
```

```tsx
// 🟢 Recommended: Use useState to manage the count
function Component() {
  const [clickCount, setClickCount] = useState(0);
  const handleClick = () => {
    setClickCount(c => c + 1);
  };
  return (
    <button onClick={handleClick}>
      Clicked: {clickCount} times
    </button>
  );
}
```

### Modifying `window` or DOM globals during render [#modifying-window-or-dom-globals-during-render]

Writing to browser globals during render causes side effects that leak outside the component and may behave differently between server and client.

```tsx
// 🔴 Problem: Modifying a window property
function Component({ userId }) {
  window.currentUser = userId; // Global side effect
  return <div>User: {userId}</div>;
}
```

```tsx
// 🟢 Recommended: Sync external state in an effect
function Component({ title }) {
  useEffect(() => {
    document.title = title; // Side effect moved out of the render phase
  }, [title]);
  return <div>Page: {title}</div>;
}
```

### Mutating global arrays or objects [#mutating-global-arrays-or-objects]

Pushing to or modifying global collections during render makes their state unpredictable across renders and component instances.

```tsx
// 🔴 Problem: Mutating a global array
const events = [];
function Component({ event }) {
  events.push(event); // Global array mutation
  return <div>Events: {events.length}</div>;
}
```

```tsx
// 🟢 Recommended: Use Context to pass global values
function Component() {
  const user = useContext(UserContext);
  return <div>User: {user.id}</div>;
}
```

### Mutations through aliases and render helpers [#mutations-through-aliases-and-render-helpers]

Renaming a global value locally does not make it local. The rule also follows directly called helpers, because their side effects still run during render.

```tsx
const cache = {};

function Component() {
  const alias = cache;
  const updateCache = () => {
    alias.value = computeValue(); // Global mutation through an alias
  };
  updateCache(); // The helper runs during render
  return <div>{cache.value}</div>;
}
```

Helpers that run later in an effect or event handler are not treated as render-time mutations.

### Cache manipulation during render [#cache-manipulation-during-render]

Even caches that seem local can be mutated during render, making their contents depend on render order rather than predictable data flow.

```tsx
// 🔴 Problem: Modifying a cache during render
const cache = {};
function Component({ id }) {
  if (!cache[id]) {
    cache[id] = fetchData(id); // Mutating the cache during render
  }
  return <div>{cache[id]}</div>;
}
```

```tsx
// 🟢 Recommended: Use useMemo to compute and cache the value
function Component({ id }) {
  const data = useMemo(() => fetchData(id), [id]);
  return <div>{data}</div>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.2] - 2026-07-11">
    ### Changed [#changed]

    * Refactored global mutation analysis to propagate effects through directly called helpers and stable local aliases.

    ### Fixed [#fixed]

    * Added detection for global writes in destructuring assignments and property deletion with `delete`.
  </Accordion>

  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed-1]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` when resolving mutating array method names.
    * Mutating method calls made through computed string-literal member access (e.g. `alias2["push"](1)`) are no longer treated as global mutations, since the runtime property name cannot be statically determined.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/globals/globals.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/globals/globals.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/globals/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `globals` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/globals)
* [React Docs: Components and Hooks must be pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure)
* [React Docs: Keeping Components Pure](https://react.dev/learn/keeping-components-pure)


# immutability (/docs/rules/immutability)





<Callout type="warn">
  This is an evaluation implementation and may contain false positives or negatives that have not yet been fully audited. Review each report carefully before applying fixes.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/immutability
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/immutability
```

**Features**

`🧪`

## Rule Details [#rule-details]

A function that mutates a variable captured from an enclosing scope is, in effect, a mutable value: unlike a mutable array or object, the caller of the function has no way to prevent the mutation from happening once the function is invoked. This rule flags such functions when they are handed to a context that expects a stable, "frozen" value:

* Passed as a JSX prop
* Passed as an argument to a hook call
* Returned from a custom hook

Mutations to `ref`-like values (an identifier named `ref` or ending in `Ref`) are exempted, since refs are mutable by design.

## Examples [#examples]

```tsx
// 🔴 Problem: `fn` mutates `cache` after render
function Component() {
  const cache = new Map();
  const fn = () => {
    cache.set("key", "value");
  };
  return <Foo fn={fn} />;
}
```

```tsx
// 🟢 Recommended: use state instead of a captured mutable variable
function Component() {
  const [cache, setCache] = useState(() => new Map());
  const fn = () => {
    setCache((prev) => new Map(prev).set("key", "value"));
  };
  return <Foo fn={fn} />;
}
```

## Options [#options]

### Shared Settings [#shared-settings]

Custom ref hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalRefHooks": "(useMyRef|useCustomRef)"
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.18.0] - 2026-07-23">
    ### Changed [#changed]

    * Replaced `isUseRefCall` with `isUseRefLikeCall` for `useRef()` provenance detection; values initialized by custom ref hooks matching the `additionalRefHooks` setting are now recognized as refs.
  </Accordion>

  <Accordion title="[5.16.1] - 2026-07-16">
    ### Fixed [#fixed]

    * Added `useHistory` to known navigation hooks, so navigation methods such as `.push()` are not treated as in-place mutations inside frozen callbacks.
  </Accordion>

  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed-1]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` when resolving mutating method names.
    * Mutating method calls made through computed string-literal member access (e.g. `obj["push"](1)`) are no longer treated as captured local mutations, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.14.7] - 2026-07-13">
    ### Fixed [#fixed-1]

    * Extended the navigation-hook mutation exemption to values initialized by `useNavigate()` and `useNavigation()`, preventing navigation methods such as `.push()` from being treated as in-place mutations inside frozen callbacks.
  </Accordion>

  <Accordion title="[5.14.6] - 2026-07-13">
    ### Changed [#changed-2]

    * Simplified immutability analysis helpers by sharing initializer provenance checks for `useRef()` and `useRouter()` and using AST parent traversal for function-boundary detection.

    ### Fixed [#fixed-2]

    * Fixed a false positive where Next.js `useRouter().push()` calls inside frozen callbacks were treated as in-place mutations of the captured router value; variable-declarator aliases of the router are recognized too.
  </Accordion>

  <Accordion title="[5.14.3] - 2026-07-11">
    ### Changed [#changed-3]

    * Split AST fact collection from captured-mutation effect inference and reporting.
    * Synchronized `immutability.spec.md` with the current React Compiler validation pass, including conditional known-effect propagation and terminal operand validation.

    ### Fixed [#fixed-3]

    * Excluded resolvable global/module-scope bindings from captured-local mutation effects.
    * Followed identifier-only variable-declarator aliases when resolving mutation targets and `useRef()` provenance.
  </Accordion>

  <Accordion title="[5.13.2] - 2026-07-09">
    ### Fixed [#fixed-4]

    * Fixed a false positive where mutating `.current` on a `useRef()`-initialized variable whose name didn't follow the `ref`/`*Ref` naming convention (e.g. `const mounted = useRef(false); mounted.current = true;`) was incorrectly flagged when the containing function was passed to a hook. Added `isInitializedFromUseRef`/`isRefLikeChain` in `lib.ts` to also exempt refs by call-site detection (`useRef()`), not naming alone. Closes #1893. (#1893)
  </Accordion>

  <Accordion title="[5.12.0] - 2026-07-08">
    ### Added [#added]

    * Added a second, mutation-site diagnostic (`mutates`: "This modifies 'name'.") reported alongside the existing usage-site diagnostic, so each violation now surfaces both locations described by `immutability.spec.md`'s dual-location error format (as two separate ESLint problems, since ESLint has no native multi-location diagnostic).

    ### Changed [#changed-4]

    * Replaced the naming-heuristic-only ref exemption plumbing with a leaner `lib.ts` (`isRefLikeName`, `hasRefLikeNameInChain`, `MUTATING_METHODS`) scoped to the new detection algorithm.
    * Reworded the `default` message to closely follow the SPEC's usage-site message ("This function may (indirectly) reassign or modify 'name' after render") plus its description ("...which can cause inconsistent behavior on subsequent renders. Consider using state instead").
    * Reworked the rule from scratch to match the React Compiler's `ValidateNoFreezingKnownMutableFunctions` validation pass described in `immutability.spec.md`: it now detects functions that (transitively) mutate a captured local variable and flags them when passed as a JSX prop, passed as a hook argument, or returned from a hook, instead of flagging direct state/props mutations.

    ### Removed [#removed]

    * Removed the `mutatingArrayMethod`, `mutatingAssignment`, and `noRefLikeStateName` diagnostics along with the direct state/props mutation checks and the `additionalStateHooks` dependency; this behavior may return as a separate rule/pass in the future.
  </Accordion>

  <Accordion title="[5.7.3] - 2026-05-02">
    ### Added [#added-1]

    * Added `noRefLikeStateName` diagnostic to prevent state variables from being named `ref` or ending with `Ref`, which would otherwise bypass the ref exemption heuristic.
    * Added ref mutation exemption via a naming heuristic: any object whose identifier is `ref` or ends with `Ref` is treated as a mutable ref and skipped from immutability checks. This covers both local refs and refs received as props (e.g., `inputRef.current = x`, `props.myRef.current.push(1)`).

    ### Changed [#changed-5]

    * `isUseReducerCall` detection now delegates to `core.isUseReducerCall` instead of a local implementation.

    ### Fixed [#fixed-5]

    * Fixed false positives when mutating `RefObject<T>` values received as props. Closes #1751. (#1751)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/immutability/immutability.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/immutability/immutability.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/immutability/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `immutability` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/immutability)
* [React Docs: Components and Hooks must be pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure)
* [React Docs: Keeping Components Pure](https://react.dev/learn/keeping-components-pure)

***

## See Also [#see-also]

* [`react-x/purity`](./purity)\
  Validates that components and hooks are pure by checking that they do not call known-impure functions during render.


# Rules (/docs/rules)





<Callout type="info">
  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.
</Callout>

<InlineTOC items="toc">
  Table of Contents
</InlineTOC>

* 🌟 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
* 🎛️ Severity in `recommended` and/or `strict` presets

## X Rules [#x-rules]

| Rule                                                                                           |   🎛️   |     🌟    | Description                                                                                                                                                                 |  `react` |
| :--------------------------------------------------------------------------------------------- | :-----: | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: |
| [`error-boundaries`](/docs/rules/error-boundaries)                                             | 2️⃣ 2️⃣ |           | Validates usage of Error Boundaries instead of try/catch for errors in child components                                                                                     |          |
| [`exhaustive-deps`](/docs/rules/exhaustive-deps)                                               | 1️⃣ 1️⃣ | `⚙️` `🔧` | Verifies the list of dependencies for Hooks like `useEffect` and similar                                                                                                    |          |
| [`globals`](/docs/rules/globals)                                                               | 0️⃣ 0️⃣ |    `🧪`   | Validates against assignment/mutation of globals during render, part of ensuring that side effects must run outside of render                                               |          |
| [`immutability`](/docs/rules/immutability)                                                     | 0️⃣ 0️⃣ |    `🧪`   | 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)                       | 2️⃣ 2️⃣ |           | Disallows accessing `this.state` inside `setState` calls                                                                                                                    |          |
| [`no-array-index-key`](/docs/rules/no-array-index-key)                                         | 1️⃣ 1️⃣ |           | Disallows using an item's index in the array as its key                                                                                                                     |          |
| [`no-children-count`](/docs/rules/no-children-count)                                           | 1️⃣ 1️⃣ |           | Disallows the use of `Children.count` from the `react` package                                                                                                              |          |
| [`no-children-for-each`](/docs/rules/no-children-for-each)                                     | 1️⃣ 1️⃣ |           | Disallows the use of `Children.forEach` from the `react` package                                                                                                            |          |
| [`no-children-map`](/docs/rules/no-children-map)                                               | 1️⃣ 1️⃣ |           | Disallows the use of `Children.map` from the `react` package                                                                                                                |          |
| [`no-children-only`](/docs/rules/no-children-only)                                             | 1️⃣ 1️⃣ |           | Disallows the use of `Children.only` from the `react` package                                                                                                               |          |
| [`no-children-to-array`](/docs/rules/no-children-to-array)                                     | 1️⃣ 1️⃣ |           | Disallows the use of `Children.toArray` from the `react` package                                                                                                            |          |
| [`no-class-component`](/docs/rules/no-class-component)                                         | 0️⃣ 2️⃣ |           | Disallows class components except for error boundaries                                                                                                                      |          |
| [`no-clone-element`](/docs/rules/no-clone-element)                                             | 1️⃣ 1️⃣ |           | Disallows `cloneElement`                                                                                                                                                    |          |
| [`no-component-will-mount`](/docs/rules/no-component-will-mount)                               | 2️⃣ 2️⃣ |    `🔄`   | Replaces usage of `componentWillMount` with `UNSAFE_componentWillMount`                                                                                                     | >=16.3.0 |
| [`no-component-will-receive-props`](/docs/rules/no-component-will-receive-props)               | 2️⃣ 2️⃣ |    `🔄`   | Replaces usage of `componentWillReceiveProps` with `UNSAFE_componentWillReceiveProps`                                                                                       | >=16.3.0 |
| [`no-component-will-update`](/docs/rules/no-component-will-update)                             | 2️⃣ 2️⃣ |    `🔄`   | Replaces usage of `componentWillUpdate` with `UNSAFE_componentWillUpdate`                                                                                                   | >=16.3.0 |
| [`no-context-provider`](/docs/rules/no-context-provider)                                       | 1️⃣ 1️⃣ |    `🔄`   | Replaces usage of `<Context.Provider>` with `<Context>`                                                                                                                     | >=19.0.0 |
| [`no-create-ref`](/docs/rules/no-create-ref)                                                   | 2️⃣ 2️⃣ |           | Disallows `createRef` in function components and Hooks                                                                                                                      |          |
| [`no-direct-mutation-state`](/docs/rules/no-direct-mutation-state)                             | 2️⃣ 2️⃣ |           | Disallows direct mutation of `this.state`                                                                                                                                   |          |
| [`no-duplicate-key`](/docs/rules/no-duplicate-key)                                             | 0️⃣ 0️⃣ |    `🧪`   | Prevents duplicate `key` props on sibling elements when rendering lists                                                                                                     |          |
| [`no-forward-ref`](/docs/rules/no-forward-ref)                                                 | 1️⃣ 1️⃣ |    `🔄`   | Replaces usage of `forwardRef` with passing `ref` as a prop                                                                                                                 | >=19.0.0 |
| [`no-implicit-children`](/docs/rules/no-implicit-children)                                     | 0️⃣ 0️⃣ | `💭` `🧪` | Prevents implicitly passing the `children` prop to components                                                                                                               |          |
| [`no-implicit-key`](/docs/rules/no-implicit-key)                                               | 0️⃣ 0️⃣ | `💭` `🧪` | Prevents implicitly passing the `key` prop to components                                                                                                                    |          |
| [`no-implicit-ref`](/docs/rules/no-implicit-ref)                                               | 0️⃣ 0️⃣ | `💭` `🧪` | Prevents implicitly passing the `ref` prop to components                                                                                                                    |          |
| [`no-leaked-conditional-rendering`](/docs/rules/no-leaked-conditional-rendering)               | 0️⃣ 0️⃣ |    `💭`   | Prevents problematic leaked values from being rendered                                                                                                                      |          |
| [`no-missing-component-display-name`](/docs/rules/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`](/docs/rules/no-missing-context-display-name)               | 0️⃣ 0️⃣ |    `🔧`   | Enforces that all contexts have a `displayName` that can be used in DevTools                                                                                                |          |
| [`no-missing-key`](/docs/rules/no-missing-key)                                                 | 2️⃣ 2️⃣ |           | Disallows missing `key` on items in list rendering                                                                                                                          |          |
| [`no-misused-capture-owner-stack`](/docs/rules/no-misused-capture-owner-stack)                 | 0️⃣ 2️⃣ |    `🧪`   | Prevents incorrect usage of `captureOwnerStack`                                                                                                                             |          |
| [`no-nested-component-definitions`](/docs/rules/no-nested-component-definitions)               | 2️⃣ 2️⃣ |           | Disallows nesting component definitions inside other components                                                                                                             |          |
| [`no-nested-lazy-component-declarations`](/docs/rules/no-nested-lazy-component-declarations)   | 2️⃣ 2️⃣ |           | 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)       | 1️⃣ 1️⃣ |           | 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)     | 1️⃣ 1️⃣ |           | 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)   | 1️⃣ 1️⃣ |           | Disallows calling `this.setState` in `componentWillUpdate` outside functions such as callbacks                                                                              |          |
| [`no-unnecessary-use-prefix`](/docs/rules/no-unnecessary-use-prefix)                           | 1️⃣ 1️⃣ |           | 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)                 | 1️⃣ 1️⃣ |           | Warns about the use of `UNSAFE_componentWillMount` in class components                                                                                                      |          |
| [`no-unsafe-component-will-receive-props`](/docs/rules/no-unsafe-component-will-receive-props) | 1️⃣ 1️⃣ |           | Warns about the use of `UNSAFE_componentWillReceiveProps` in class components                                                                                               |          |
| [`no-unsafe-component-will-update`](/docs/rules/no-unsafe-component-will-update)               | 1️⃣ 1️⃣ |           | Warns about the use of `UNSAFE_componentWillUpdate` in class components                                                                                                     |          |
| [`no-unstable-context-value`](/docs/rules/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`](/docs/rules/no-unstable-default-props)                           | 0️⃣ 1️⃣ |    `⚙️`   | Prevents using referential-type values as default props in object destructuring                                                                                             |          |
| [`no-unused-class-component-members`](/docs/rules/no-unused-class-component-members)           | 1️⃣ 1️⃣ |           | Warns about unused class component methods and properties                                                                                                                   |          |
| [`no-unused-props`](/docs/rules/no-unused-props)                                               | 0️⃣ 0️⃣ | `💭` `🧪` | Warns about component props that are defined but never used                                                                                                                 |          |
| [`no-unused-state`](/docs/rules/no-unused-state)                                               | 0️⃣ 0️⃣ |    `🧪`   | Warns about state variables that are defined but never used                                                                                                                 |          |
| [`no-use-context`](/docs/rules/no-use-context)                                                 | 1️⃣ 1️⃣ |    `🔄`   | Replaces usage of `useContext` with `use`                                                                                                                                   | >=19.0.0 |
| [`purity`](/docs/rules/purity)                                                                 | 1️⃣ 1️⃣ |           | Validates that components and hooks are pure by checking that they do not call known-impure functions during render                                                         |          |
| [`refs`](/docs/rules/refs)                                                                     | 0️⃣ 0️⃣ |    `🧪`   | 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)                                                 | 2️⃣ 2️⃣ | `⚙️` `🔧` | Enforces the Rules of Hooks                                                                                                                                                 |          |
| [`set-state-in-effect`](/docs/rules/set-state-in-effect)                                       | 1️⃣ 1️⃣ |           | 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)                                       | 2️⃣ 2️⃣ |    `🧪`   | Validates against unconditionally setting state during render, which can trigger additional renders and potential infinite render loops                                     |          |
| [`static-components`](/docs/rules/static-components)                                           | 2️⃣ 2️⃣ |    `🧪`   | Validates that components are static, not recreated every render                                                                                                            |          |
| [`unsupported-syntax`](/docs/rules/unsupported-syntax)                                         | 2️⃣ 2️⃣ |           | Validates against syntax that React Compiler does not support                                                                                                               |          |
| [`use-memo`](/docs/rules/use-memo)                                                             | 2️⃣ 2️⃣ |           | Validates that `useMemo` is called with a callback that returns a value                                                                                                     |          |
| [`use-state`](/docs/rules/use-state)                                                           | 1️⃣ 1️⃣ |    `⚙️`   | 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 [#jsx-rules]

<Callout type="info">
  JSX rules check for issues exclusive to JSX syntax, which are absent from standard JavaScript (like handwritten `createElement()` calls).
</Callout>

| Rule                                                                               |   🎛️   |     🌟    | Description                                                                                                                                                                  | `react` |
| :--------------------------------------------------------------------------------- | :-----: | :-------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----: |
| [`no-children-prop`](/docs/rules/jsx-no-children-prop)                             | 1️⃣ 2️⃣ |    `🔧`   | Disallows passing `children` as a prop                                                                                                                                       |         |
| [`no-children-prop-with-children`](/docs/rules/jsx-no-children-prop-with-children) | 2️⃣ 2️⃣ |    `🔧`   | Disallows passing `children` as a prop when children are also passed as nested content                                                                                       |         |
| [`no-comment-textnodes`](/docs/rules/jsx-no-comment-textnodes)                     | 1️⃣ 1️⃣ |           | 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)                       | 2️⃣ 2️⃣ |           | Prevent patterns that cause deoptimization when using the automatic JSX runtime                                                                                              |         |
| [`no-leaked-dollar`](/docs/rules/jsx-no-leaked-dollar)                             | 1️⃣ 1️⃣ |    `🔧`   | 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)                       | 1️⃣ 1️⃣ |    `🔧`   | 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)                                     | 2️⃣ 2️⃣ |           | Disallow JSX namespace syntax, as React does not support them                                                                                                                |         |
| [`no-useless-fragment`](/docs/rules/jsx-no-useless-fragment)                       | 0️⃣ 1️⃣ | `⚙️` `🔧` | Disallows useless fragment elements                                                                                                                                          |         |

## RSC Rules [#rsc-rules]

<Callout type="info">
  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).
</Callout>

| Rule                                                         |   🎛️   |     🌟    | Description                                                       |  `react` |
| :----------------------------------------------------------- | :-----: | :-------: | :---------------------------------------------------------------- | :------: |
| [`function-definition`](/docs/rules/rsc-function-definition) | 2️⃣ 2️⃣ | `🔧` `🧪` | Validates and transforms React Client/Server Function definitions | >=19.0.0 |

## DOM Rules [#dom-rules]

<Callout type="info">
  DOM rules target [React DOM](https://react.dev/reference/react#react-dom)-specific concerns including security vulnerabilities, deprecated APIs, and DOM property usage.
</Callout>

| Rule                                                                                                       |   🎛️   |     🌟    | Description                                                                                   | `react-dom` |
| :--------------------------------------------------------------------------------------------------------- | :-----: | :-------: | :-------------------------------------------------------------------------------------------- | :---------: |
| [`no-dangerously-set-innerhtml`](/docs/rules/dom-no-dangerously-set-innerhtml)                             | 1️⃣ 1️⃣ |           | Disallows DOM elements from using `dangerouslySetInnerHTML`                                   |             |
| [`no-dangerously-set-innerhtml-with-children`](/docs/rules/dom-no-dangerously-set-innerhtml-with-children) | 2️⃣ 2️⃣ |           | Disallows DOM elements from using `dangerouslySetInnerHTML` and `children` at the same time   |             |
| [`no-find-dom-node`](/docs/rules/dom-no-find-dom-node)                                                     | 2️⃣ 2️⃣ |           | Disallows `findDOMNode`                                                                       |             |
| [`no-flush-sync`](/docs/rules/dom-no-flush-sync)                                                           | 2️⃣ 2️⃣ |           | Disallows `flushSync`                                                                         |             |
| [`no-hydrate`](/docs/rules/dom-no-hydrate)                                                                 | 2️⃣ 2️⃣ |    `🔄`   | Replaces usage of `ReactDOM.hydrate()` with `hydrateRoot()`                                   |   >=18.0.0  |
| [`no-missing-button-type`](/docs/rules/dom-no-missing-button-type)                                         | 0️⃣ 1️⃣ |    `🔧`   | Enforces an explicit `type` attribute for `button` elements                                   |             |
| [`no-missing-iframe-sandbox`](/docs/rules/dom-no-missing-iframe-sandbox)                                   | 0️⃣ 1️⃣ |    `🔧`   | Enforces an explicit `sandbox` attribute for `iframe` elements                                |             |
| [`no-render`](/docs/rules/dom-no-render)                                                                   | 2️⃣ 2️⃣ |    `🔄`   | Replaces usage of `ReactDOM.render()` with `createRoot(node).render()`                        |   >=18.0.0  |
| [`no-render-return-value`](/docs/rules/dom-no-render-return-value)                                         | 2️⃣ 2️⃣ |           | Disallows the return value of `ReactDOM.render`                                               |             |
| [`no-script-url`](/docs/rules/dom-no-script-url)                                                           | 1️⃣ 1️⃣ |           | Disallows `javascript:` URLs as attribute values                                              |             |
| [`no-string-style-prop`](/docs/rules/dom-no-string-style-prop)                                             | 0️⃣ 0️⃣ |           | Disallows the use of string style prop in JSX. Use an object instead                          |             |
| [`no-unknown-property`](/docs/rules/dom-no-unknown-property)                                               | 0️⃣ 0️⃣ | `🔧` `⚙️` | Disallows unknown `DOM` properties                                                            |             |
| [`no-unsafe-iframe-sandbox`](/docs/rules/dom-no-unsafe-iframe-sandbox)                                     | 1️⃣ 1️⃣ |           | 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)                                         | 0️⃣ 1️⃣ |    `🔧`   | Disallows `target="_blank"` without `rel="noreferrer noopener"`                               |             |
| [`no-use-form-state`](/docs/rules/dom-no-use-form-state)                                                   | 2️⃣ 2️⃣ |    `🔄`   | Replaces usage of `useFormState` with `useActionState`                                        |   >=19.0.0  |
| [`no-void-elements-with-children`](/docs/rules/dom-no-void-elements-with-children)                         | 2️⃣ 2️⃣ |           | Disallows `children` in void DOM elements                                                     |             |

## Web API Rules [#web-api-rules]

<Callout type="info">
  Web API rules prevent resource leaks by detecting uncleaned Web API subscriptions in components and hooks.
</Callout>

| Rule                                                                                     |   🎛️   |  🌟  | Description                                                                                                                              |
| :--------------------------------------------------------------------------------------- | :-----: | :--: | :--------------------------------------------------------------------------------------------------------------------------------------- |
| [`no-leaked-event-listener`](/docs/rules/web-api-no-leaked-event-listener)               | 1️⃣ 1️⃣ |      | Enforces that every `addEventListener` in a component or custom hook has a corresponding `removeEventListener`                           |
| [`no-leaked-fetch`](/docs/rules/web-api-no-leaked-fetch)                                 | 1️⃣ 1️⃣ | `🧪` | 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) | 1️⃣ 1️⃣ |      | 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)                           | 1️⃣ 1️⃣ |      | 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)             | 1️⃣ 1️⃣ |      | 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)                             | 1️⃣ 1️⃣ |      | Enforces that every `setTimeout` in a component or custom hook has a corresponding `clearTimeout`                                        |

## Naming Convention Rules [#naming-convention-rules]

<Callout type="info">
  Naming convention rules enforce consistent naming patterns for `React` entities.
</Callout>

| Rule                                                         |   🎛️   |  🌟 | Description                                                                                                          |
| :----------------------------------------------------------- | :-----: | :-: | :------------------------------------------------------------------------------------------------------------------- |
| [`context-name`](/docs/rules/naming-convention-context-name) | 1️⃣ 1️⃣ |     | 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)           | 1️⃣ 1️⃣ |     | Enforces identifier names assigned from `useId` calls to be either `id` or end with `Id`                             |
| [`ref-name`](/docs/rules/naming-convention-ref-name)         | 1️⃣ 1️⃣ |     | Enforces identifier names assigned from `useRef` calls to be either `ref` or end with `Ref`                          |

## Debug Rules [#debug-rules]

<Callout type="warn">
  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. They can also serve as a rule-based alternative to [react-docgen](https://react-docgen.dev/).
</Callout>

| Rule                                                         |   🎛️   |  🌟  | Description                                                             |
| :----------------------------------------------------------- | :-----: | :--: | :---------------------------------------------------------------------- |
| [`function-component`](/docs/rules/debug-function-component) | 0️⃣ 0️⃣ | `🐞` | Reports all function components in JSON format                          |
| [`hook`](/docs/rules/debug-hook)                             | 0️⃣ 0️⃣ | `🐞` | Reports all React Hooks in JSON format                                  |
| [`is-from-react`](/docs/rules/debug-is-from-react)           | 0️⃣ 0️⃣ | `🐞` | Reports all identifiers initialized from React in JSON format           |
| [`is-from-ref`](/docs/rules/debug-is-from-ref)               | 0️⃣ 0️⃣ | `🐞` | Reports all identifiers initialized or derived from refs in JSON format |
| [`jsx`](/docs/rules/debug-jsx)                               | 0️⃣ 0️⃣ | `🐞` | Reports all JSX elements and fragments in JSON format                   |


# no-children-prop-with-children (/docs/rules/jsx-no-children-prop-with-children)





**Full Name in [`eslint-plugin-react-jsx`](https://npmx.dev/package/eslint-plugin-react-jsx/v/latest)**

```plain copy
react-jsx/no-children-prop-with-children
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/jsx-no-children-prop-with-children
```

**Features**

`🔧`

**Presets**

`jsx`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

When using JSX, `children` should be passed either as a prop or as nested content between the opening and closing tags, but not both. Passing `children` both ways is redundant and can lead to confusion about which children will actually be rendered.

## Examples [#examples]

### Passing children both as a prop and as nested content [#passing-children-both-as-a-prop-and-as-nested-content]

```tsx
interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  // 🔴 Problem: Don't use children prop when element already has nested children
  return <div children={children}>{children}</div>;
}
```

```tsx
// 🔴 Problem: Don't use children prop when element already has nested children
<Component children="text">text</Component>
```

### Passing children only as nested content [#passing-children-only-as-nested-content]

```tsx
interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  // 🟢 Recommended: Use nested children
  return <div>{children}</div>;
}
```

```tsx
// 🟢 Recommended: Use nested children
<Component>text</Component>
```

### Passing children only as a prop [#passing-children-only-as-a-prop]

```tsx
// 🔵 OK: Use children prop when no nested children
<Component children="text" />
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.17.0] - 2026-07-17">
    ### Changed [#changed]

    * Refactored rule implementation: extracted `createElement` children-prop detection into the shared `@/utils/find-create-element-children-prop` helper and the JSX attribute removal fix into `@/utils/remove-jsx-attribute`.
  </Accordion>

  <Accordion title="[5.16.1] - 2026-07-16">
    ### Fixed [#fixed]

    * `React.createElement` calls whose props argument is wrapped in a TypeScript type assertion (e.g. `{ children: "x" } as Props`) are now reported.
    * Computed property keys written as template literals (e.g. `{ [`children`]: "x" }`) are now recognized as the `children` prop.
    * Fixed a false positive where a computed identifier key in a `createElement` props object (e.g. `{ [propName]: "Children" }`) was treated as the static `children` prop.
  </Accordion>

  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed-1]

    * Fixed a false positive where a computed identifier key in spread props (e.g. `<Comp {...{ [key]: value }}>text</Comp>`) was treated as the static `children` prop. The actual property name is the runtime value of the variable; computed string literal keys are still reported.
  </Accordion>

  <Accordion title="[5.8.7] - 2026-05-29">
    ### Fixed [#fixed-2]

    * Aligned children filtering with React source behaviour: empty string expressions are now treated as non-meaningful children, matching runtime behaviour. (#1805)
  </Accordion>

  <Accordion title="[4.2.1] - 2026-04-01">
    ### Added [#added]

    * Initial release of the `no-children-prop-with-children` rule.
    * Reports passing `children` as a prop when children are also passed as nested content.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-children-prop-with-children/no-children-prop-with-children.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-children-prop-with-children/no-children-prop-with-children.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-children-prop-with-children/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Passing JSX as children](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children)

***

## See Also [#see-also]

* [`react-jsx/no-children-prop`](./jsx-no-children-prop)\
  Disallows passing `children` as a prop.


# no-children-prop (/docs/rules/jsx-no-children-prop)





**Full Name in [`eslint-plugin-react-jsx`](https://npmx.dev/package/eslint-plugin-react-jsx/v/latest)**

```plain copy
react-jsx/no-children-prop
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/jsx-no-children-prop
```

**Features**

`🔧`

**Presets**

`jsx`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Most of the time, `children` should be actual children, not passed in as a prop.

When using JSX, `children` should be nested between the opening and closing tags. When not using JSX, `children` should be passed as additional arguments to `React.createElement`.

## Examples [#examples]

### Passing children as a prop [#passing-children-as-a-prop]

```tsx
interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  // 🔴 Problem: Children should always be actual children, not passed in as a prop.
  return <div children={children} />;
}
```

### Passing children as nested content [#passing-children-as-nested-content]

```tsx
interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  // 🟢 Recommended: Nest children between opening and closing tags
  return <div>{children}</div>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.17.0] - 2026-07-17">
    ### Changed [#changed]

    * Refactored rule implementation: extracted `createElement` children-prop detection into the shared `@/utils/find-create-element-children-prop` helper and the JSX attribute removal fix into `@/utils/remove-jsx-attribute`.
  </Accordion>

  <Accordion title="[5.16.1] - 2026-07-16">
    ### Fixed [#fixed]

    * `React.createElement` calls whose props argument is wrapped in a TypeScript type assertion (e.g. `{ children: "x" } as Props`) are now reported.
    * The suggestion fix now escapes JSX-sensitive characters (`<`, `>`, `{`, `}`, `&`) when moving a string `children` prop value into element content.
    * Computed property keys written as template literals (e.g. `{ [`children`]: "x" }`) are now recognized as the `children` prop.
    * Fixed a false positive where a computed identifier key in a `createElement` props object (e.g. `{ [propName]: "Children" }`) was treated as the static `children` prop.
  </Accordion>

  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed-1]

    * Fixed a false positive where a computed identifier key in spread props (e.g. `<Comp {...{ [key]: value }} />`) was treated as the static `children` prop. The actual property name is the runtime value of the variable; computed string literal keys are still reported.
  </Accordion>

  <Accordion title="[5.8.12] - 2026-06-05">
    ### Changed [#changed-1]

    * Removed local `trimLikeReact` helper from `lib.ts` in favor of utilities from `@eslint-react/jsx`. (#1836)
  </Accordion>

  <Accordion title="[5.8.7] - 2026-05-29">
    ### Fixed [#fixed-2]

    * Corrected `trimLikeReact` JSDoc to clarify it is an auto-fixer formatting utility, not a model of React's rendering behaviour. (#1805)
  </Accordion>

  <Accordion title="[4.2.1] - 2026-04-01">
    ### Added [#added]

    * Relocated rule from `eslint-plugin-react-x` to `eslint-plugin-react-jsx`.
    * Added suggestion-fix feature to move children from prop to element content.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added-1]

    * Initial release of the `no-children-prop` rule. (#132)
    * Reports passing `children` as a prop instead of as nested content.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-children-prop/no-children-prop.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-children-prop/no-children-prop.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-children-prop/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Passing JSX as children](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children)

***

## See Also [#see-also]

* [`react-jsx/no-children-prop-with-children`](./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)





**Full Name in [`eslint-plugin-react-jsx`](https://npmx.dev/package/eslint-plugin-react-jsx/v/latest)**

```plain copy
react-jsx/no-comment-textnodes
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/jsx-no-comment-textnodes
```

**Presets**

`jsx`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This rule prevents comment strings (ex: beginning with `//` or `/*`) from being accidentally inserted into a JSX element's text nodes.

Comments inside JSX elements should be placed inside braces (`{/* comment */}`) to prevent them from being rendered as text.

## Examples [#examples]

### Writing JavaScript-style comments directly inside JSX [#writing-javascript-style-comments-directly-inside-jsx]

```tsx
function MyComponent() {
  return (
    <div>
      // 🔴 Problem: This will be rendered as text
      /* Problem: This will also be rendered as text */
    </div>
  );
}
```

### Using proper JSX comment syntax [#using-proper-jsx-comment-syntax]

```tsx
function MyComponent() {
  return (
    <div>
      {/* Recommended: This is a valid comment inside JSX */}
      <span>Hello</span>
    </div>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.17.0] - 2026-07-17">
    ### Changed [#changed]

    * Removed the dead `Literal` visitor: JSX text children are always `JSXText` nodes.
  </Accordion>

  <Accordion title="[4.2.1] - 2026-04-01">
    ### Added [#added]

    * Relocated rule from `eslint-plugin-react-x` to `eslint-plugin-react-jsx`.
    * Reports comments used as text nodes in JSX.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-comment-textnodes/no-comment-textnodes.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-comment-textnodes/no-comment-textnodes.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-comment-textnodes/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: JSX](https://react.dev/learn/writing-markup-with-jsx)


# no-key-after-spread (/docs/rules/jsx-no-key-after-spread)





**Full Name in [`eslint-plugin-react-jsx`](https://npmx.dev/package/eslint-plugin-react-jsx/v/latest)**

```plain copy
react-jsx/no-key-after-spread
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/jsx-no-key-after-spread
```

**Presets**

`jsx`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

When using the JSX automatic runtime, `key` is a special prop in the JSX transform. See the [Babel REPL](https://babeljs.io/repl#?browsers=last%202%20chrome%20versions\&build=\&builtIns=false\&corejs=3.21\&spec=false\&loose=false\&code_lz=DwEwlgbgBA1gpgTwLwCICMKoG8B0eAOATgPb4DOAvlAPQB8A3AFCiTZ45GmWyKoBMmOkxbR4yFAGZMAYwA2AQzJkAcvIC2cVIIbNw0OYpXrNKTGNRSaDIA\&forceAllTransforms=false\&modules=false\&shippedProposals=false\&evaluate=true\&fileSize=false\&timeTravel=false\&sourceType=module\&lineWrap=true\&presets=react\&prettier=false\&targets=\&version=7.27.0\&externalPlugins=\&assumptions=%7B%7D) and the [TypeScript Playground](https://www.typescriptlang.org/play/?target=99\&jsx=4#code/DwEwlgbgBA1gpgTwLwCICMKoG8B0eAOATgPb4DOAvlAPQB8A3ALABQok2eORplsiqAJkx0mrcNHjIUAZkwBjADYBDMmQBySgLZxUwhizbRFK9Vp0pMk1ABY99IA).

If the `key` prop is before any spread props, it is passed as the `key` argument of the `_jsx` / `_jsxs` / `_jsxDev` function. But if the `key` prop is after spread props, the compiler uses `createElement` instead and passes `key` as a regular prop.

## Examples [#examples]

### Using `key` after spread props [#using-key-after-spread-props]

```tsx
// 🔴 Problem: The 'key' prop must be placed before any spread props when using the new JSX transform.
<div {...props} key="2" />;
```

### Using `key` before or without spread props [#using-key-before-or-without-spread-props]

```tsx
// 🟢 Recommended: 'key' placed before spread props
<div key="1" {...props} />;

// 🟢 Recommended: 'key' without spread props
<div key="3" className="" />;

// 🔵 OK: 'key' can also appear after regular props
<div className="" key="3" />;
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.17.1] - 2026-07-17">
    ### Changed [#changed]

    * Reworked the attribute scan to a pipeline style: `dropWhile` and `not` from `@local/eff` skip attributes before the first spread, `Check.is` from `@eslint-react/ast` detects spread props, and the new `isAttribute` from `@eslint-react/jsx` matches `key`.
  </Accordion>

  <Accordion title="[4.2.1] - 2026-04-01">
    ### Added [#added]

    * Relocated and renamed rule from `react-x/jsx-key-before-spread` to `react-jsx/no-key-after-spread`.
    * Reports patterns that cause deoptimization when using the automatic JSX runtime (e.g. placing `key` after spread props).
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-key-after-spread/no-key-after-spread.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-key-after-spread/no-key-after-spread.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-key-after-spread/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
* [Babel Preset React: runtime](https://babeljs.io/docs/babel-preset-react#runtime)
* [TSConfig: jsx](https://www.typescriptlang.org/tsconfig/#jsx)


# no-leaked-dollar (/docs/rules/jsx-no-leaked-dollar)





**Full Name in [`eslint-plugin-react-jsx`](https://npmx.dev/package/eslint-plugin-react-jsx/v/latest)**

```plain copy
react-jsx/no-leaked-dollar
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-leaked-dollar
```

**Features**

`🔧`

**Presets**

`jsx`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This can happen when refactoring from a template literal to JSX and forgetting to remove the dollar sign. This results in an unintentional `$` being rendered in the output.

```tsx
function MyComponent({ user }) {
  return `Hello ${user.name}`;
}
```

When refactored to JSX, it might look like this:

```tsx
function MyComponent({ user }) {
  return <>Hello ${user.name}</>;
}
```

In this example, the `$` before `{user.name}` is unnecessary and will be rendered as part of the output.

## Examples [#examples]

### Leaving `$` from template literals when refactoring to JSX [#leaving--from-template-literals-when-refactoring-to-jsx]

```tsx
function MyComponent({ user }) {
  // 🔴 Problem: Possible unintentional '$' sign before expression.
  return <div>Hello ${user.name}</div>;
}
```

```tsx
function MyComponent({ user }) {
  // 🔴 Problem: Possible unintentional '$' sign before expression.
  return <div>${user.name} is your name</div>;
}
```

```tsx
function MyComponent({ count, total }) {
  // 🔴 Problem: Possible unintentional '$' sign before expression.
  return <div>Progress: ${count} / ${total}</div>;
}
```

### Using correct JSX expression syntax [#using-correct-jsx-expression-syntax]

```tsx
// 🔵 OK: Template literals are fine outside JSX
function MyComponent({ user }) {
  return `Hello ${user.name}`;
}
```

```tsx
function MyComponent({ user }) {
  // 🟢 Recommended: Remove the '$' when using JSX expressions
  return <div>Hello {user.name}</div>;
}
```

### Intentionally rendering `$` before a value [#intentionally-rendering--before-a-value]

```tsx
function MyComponent({ price }) {
  // 🔵 OK: Intentionally rendering '$' as literal text before a JSX expression
  return <div>${price}</div>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.17.0] - 2026-07-17">
    ### Fixed [#fixed]

    * The intentional-`$` exemption (e.g. `<div>${price}</div>`) is no longer defeated by surrounding whitespace or empty siblings: a lone `$` before a single expression is allowed whenever all other siblings are non-substantive.
  </Accordion>

  <Accordion title="[5.16.1] - 2026-07-16">
    ### Changed [#changed]

    * The rule no longer treats `$` character references (`&#36;`, `&#x24;`) as leaked dollar signs; only a literal `$` in the source is reported.
  </Accordion>

  <Accordion title="[4.2.3] - 2026-04-03">
    ### Added [#added]

    * Initial release of the `no-leaked-dollar` rule. (#1688)
    * Reports leaked dollar signs (`$`) in JSX text nodes that may be rendered unexpectedly.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-leaked-dollar/no-leaked-dollar.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-leaked-dollar/no-leaked-dollar.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-leaked-dollar/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: JSX](https://react.dev/learn/writing-markup-with-jsx)
* [MDN: Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)

***

## See Also [#see-also]

* [`react-jsx/no-leaked-semicolon`](./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-leaked-semicolon (/docs/rules/jsx-no-leaked-semicolon)





**Full Name in [`eslint-plugin-react-jsx`](https://npmx.dev/package/eslint-plugin-react-jsx/v/latest)**

```plain copy
react-jsx/no-leaked-semicolon
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/jsx-no-leaked-semicolon
```

**Features**

`🔧`

**Presets**

`jsx`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

When refactoring JSX, trailing semicolons may be accidentally left immediately after JSX elements or fragments. This causes `;` to be unexpectedly rendered as text nodes:

```tsx
// before
return <div />;

// after
return (
  <div>
    <div />;
  </div>
);
```

## Examples [#examples]

### Accidentally leaving semicolons inside JSX [#accidentally-leaving-semicolons-inside-jsx]

```tsx
// 🔴 Problem: Semicolon leaks into rendered text
function MyComponent() {
  return (
    <div>
      <div />;
    </div>
  );
}
```

```tsx
// 🔴 Problem: Semicolon leaks into rendered text
function MyComponent() {
  return (
    <div>
      <Component>
        <div />
      </Component>;
    </div>
  );
}
```

### Proper JSX without leaked semicolons [#proper-jsx-without-leaked-semicolons]

```tsx
// 🟢 Recommended: No semicolon after JSX elements
function MyComponent() {
  return (
    <div>
      <div />
    </div>
  );
}
```

### Intentionally rendering semicolons as text [#intentionally-rendering-semicolons-as-text]

```tsx
// 🔵 OK: Semicolon is intentionally placed as separate text
function MyComponent() {
  return (
    <div>
      <div />
      ;
    </div>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.17.0] - 2026-07-17">
    ### Fixed [#fixed]

    * Consecutive leaked semicolons (e.g. `;;`) at the start of a JSX text node are now detected.

    ### Changed [#changed]

    * Removed the dead `Literal` visitor: JSX text children are always `JSXText` nodes.
  </Accordion>

  <Accordion title="[5.16.1] - 2026-07-16">
    ### Fixed [#fixed-1]

    * Leaked semicolons followed by spaces or tabs before a newline, including CRLF line endings, are now detected.
  </Accordion>

  <Accordion title="[4.2.3] - 2026-04-03">
    ### Added [#added]

    * Initial release of the `no-leaked-semicolon` rule. (#1686)
    * Reports leaked semicolons (`;`) in JSX text nodes that may be rendered unexpectedly.
    * Added suggest fix support. (#1688)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-leaked-semicolon/no-leaked-semicolon.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-leaked-semicolon/no-leaked-semicolon.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-leaked-semicolon/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: JSX](https://react.dev/learn/writing-markup-with-jsx)

***

## See Also [#see-also]

* [`react-jsx/no-leaked-dollar`](./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-namespace (/docs/rules/jsx-no-namespace)





**Full Name in [`eslint-plugin-react-jsx`](https://npmx.dev/package/eslint-plugin-react-jsx/v/latest)**

```plain copy
react-jsx/no-namespace
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/jsx-no-namespace
```

**Presets**

`jsx`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

React does not support XML namespaced tags (e.g. `<ns:Component />`). Although the JSX specification permits namespaces, React does not implement them. Using a namespaced element will cause a runtime error.

## Examples [#examples]

### Using namespace tags in JSX [#using-namespace-tags-in-jsx]

```tsx
// 🔴 Problem: Namespace tag — not supported by React.
<ns:testcomponent />
```

```tsx
// 🔴 Problem: PascalCase namespace is also not allowed.
<Ns:TestComponent />
```

```tsx
// 🔴 Problem: SVG-style namespace is also not allowed.
<svg:circle cx="50" cy="50" r="40" />
```

### Using standard JSX tags [#using-standard-jsx-tags]

```tsx
// 🟢 Recommended: Plain element — no namespace.
<testcomponent />
```

```tsx
// 🟢 Recommended: Member expression — not a namespace.
<object.TestComponent />
```

```tsx
// 🟢 Recommended: PascalCase component.
<TestComponent />
```

## Versions [#versions]

<Accordions>
  <Accordion title="[4.2.1] - 2026-04-01">
    ### Added [#added]

    * Relocated rule from `eslint-plugin-react-dom` to `eslint-plugin-react-jsx`.
    * Reports JSX namespace syntax, which React does not support.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-namespace/no-namespace.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-namespace/no-namespace.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-namespace/CHANGELOG.md)

## Further Reading [#further-reading]

* [Babel Preset React: throwIfNamespace](https://babeljs.io/docs/babel-preset-react#throwifnamespace)
* [React Docs: JSX](https://react.dev/learn/writing-markup-with-jsx)


# no-useless-fragment (/docs/rules/jsx-no-useless-fragment)





**Full Name in [`eslint-plugin-react-jsx`](https://npmx.dev/package/eslint-plugin-react-jsx/v/latest)**

```plain copy
react-jsx/no-useless-fragment
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/jsx-no-useless-fragment
```

**Features**

`⚙️` `🔧`

**Presets**

`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

A fragment is redundant if it contains only one child or if it is the child of an host element and is not a [keyed fragment](https://react.dev/reference/react/Fragment#caveats).

## Examples [#examples]

### Returning a single element wrapped in a fragment [#returning-a-single-element-wrapped-in-a-fragment]

```tsx
// 🔴 Problem: Fragment with only one child is redundant
<><Foo /></>
```

### Using empty fragments [#using-empty-fragments]

```tsx
// 🔴 Problem: Empty fragment serves no purpose
<></>
```

### Wrapping children unnecessarily inside a host element [#wrapping-children-unnecessarily-inside-a-host-element]

```tsx
// 🔴 Problem: Fragment inside a host element is redundant
<p><>foo</></p>
```

```tsx
// 🔴 Problem: Fragment inside a host element with no key is redundant
<section>
  <>
    <div />
    <div />
  </>
</section>
```

### Returning a single expression directly [#returning-a-single-expression-directly]

```tsx
// 🟢 Recommended: Return the expression directly instead of wrapping in a fragment
{foo}
```

```tsx
// 🟢 Recommended: Return the element directly instead of wrapping in a fragment
<Foo />
```

### Using fragments with multiple children or expressions [#using-fragments-with-multiple-children-or-expressions]

```tsx
// 🟢 Recommended: Fragment with multiple children
<>
  <Foo />
  <Bar />
</>
```

```tsx
// 🔵 OK: Text and expression children (multiple children)
<>foo {bar}</>
```

```tsx
// 🔵 OK: Leading space with expression (multiple children)
<> {foo}</>
```

```tsx
// 🔵 OK: Expression child (allowed by default via allowExpressions)
<>{children}</>
```

```tsx
// 🔵 OK: Expression child (allowed by default via allowExpressions)
<>{props.children}</>
```

```tsx
// 🔵 OK: Single text node assigned to a variable
const cat = <>meow</>
```

```tsx
// 🔵 OK: Fragment inside a custom component (preserves grouping)
<SomeComponent>
  <>
    <div />
    <div />
  </>
</SomeComponent>
```

```tsx
// 🔵 OK: Keyed fragment
<Fragment key={item.id}>{item.value}</Fragment>
```

## Rule Options [#rule-options]

```ts
type Options = {
  allowEmptyFragment?: boolean;
  allowExpressions?: boolean;
};
```

### `allowEmptyFragment` [#allowemptyfragment]

When set to `true`, allows fragments that contain no children.

Default: `false`

### `allowExpressions` [#allowexpressions]

When set to `true`, allows fragments that contain a single expression child.

Default: `true`

## Note [#note]

[By default, this rule always allows single expressions in a fragment](https://github.com/Rel1cx/eslint-react/pull/188). This is useful in places like TypeScript where `string` does not satisfy the expected return type of `JSX.Element`. A common workaround is to wrap the variable holding a string in a fragment and expression. To change this behavior, use the `allowExpressions` option.

### Examples of correct code for single expressions in fragments [#examples-of-correct-code-for-single-expressions-in-fragments]

```tsx
<>{foo}</>

<Fragment>{foo}</Fragment>
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.17.0] - 2026-07-17">
    ### Changed [#changed]

    * Refactored rule implementation: hoisted detection and fix helpers out of `create` to the module level and unified the per-reason report path; no behavior change.

    ### Added [#added]

    * Added targeted test cases for fragments in attribute positions, `allowEmptyFragment` interplay with the host-component reason, and empty options objects.
  </Accordion>

  <Accordion title="[5.16.1] - 2026-07-16">
    ### Fixed [#fixed]

    * `allowExpressions: false` now only flags fragments with a single expression child, matching the option's documented behavior, instead of flagging any fragment inside a JSX element.
    * Fragments with spread attributes (e.g. `<Fragment {...props}>`) are no longer auto-fixed.
    * Auto-fixer now removes leading indentation when collapsing whitespace-only fragments.
  </Accordion>

  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed-1]

    * Fixed a false negative where a computed identifier key in spread props (e.g. `<Fragment {...{ [key]: value }}>`) was treated as the static `key` or `ref` prop, suppressing the useless-fragment report. The actual property name is the runtime value of the variable; computed string literal keys are still recognized.
  </Accordion>

  <Accordion title="[5.8.12] - 2026-06-05">
    ### Changed [#changed-1]

    * Migrated child text cleanup logic to `@eslint-react/jsx/collapseMultilineText` and `@eslint-react/jsx/getChildren`, removing local `lib.ts` helpers. (#1836, #1838)
    * Improved auto-fixer to use `collapseMultilineText` for JSX text children, aligning with Babel's `cleanJSXElementLiteralChild` pattern. (#1836)

    ### Added [#added-1]

    * Added targeted test cases for whitespace boundary handling, multiline text collapsing, tab conversion, and `JSXEmptyExpression` edge cases. (#1837)
  </Accordion>

  <Accordion title="[5.8.7] - 2026-05-29">
    ### Fixed [#fixed-2]

    * Fixed false negative: `<>{''}</>` is now correctly reported as useless because React ignores empty string children. (#1805)
    * Corrected `trimLikeReact` JSDoc to clarify it is an auto-fixer formatting utility, not a model of React's rendering behaviour.
  </Accordion>

  <Accordion title="[4.2.1] - 2026-04-01">
    ### Added [#added-2]

    * Relocated rule from `eslint-plugin-react-x` to `eslint-plugin-react-jsx`.
  </Accordion>

  <Accordion title="[1.15.1] - 2024-10-26">
    ### Added [#added-3]

    * Added `allowEmptyFragment` option. Closes #1265. (#1335)
  </Accordion>

  <Accordion title="[1.7.2] - 2024-08-07">
    ### Fixed [#fixed-3]

    * Fixed false positive when passing a `ref` to a `Fragment`. Closes #1567. (#1568)
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added-4]

    * Initial release of the `no-useless-fragment` rule. (#64)
    * Reports unnecessary `Fragment` usage that can be simplified.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-useless-fragment/no-useless-fragment.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-useless-fragment/no-useless-fragment.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-jsx/src/rules/no-useless-fragment/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `Fragment`](https://react.dev/reference/react/Fragment)
* [GitHub Gist: `clemmy/react_state_preservation_behavior`](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)


# context-name (/docs/rules/naming-convention-context-name)





**Full Name in `eslint-plugin-react-naming-convention`**

```plain copy
react-naming-convention/context-name
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/naming-convention-context-name
```

**Presets**

`naming-convention`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Enforces that the context has a valid component name with the suffix `Context`.

## Examples [#examples]

```tsx
// 🔴 Problem: Identifier 'theme' does not have the 'Context' suffix
const theme = createContext("");
```

```tsx
// 🔴 Problem: Identifier 'themeContext' is not PascalCase
const themeContext = createContext("");
```

```tsx
// 🟢 Recommended: PascalCase with 'Context' suffix
const ThemeContext = createContext("");
```

```tsx
// 🟢 Recommended: Name is exactly 'Context'
const Context = createContext("");
```

```tsx
// 🔵 OK: PascalCase with 'Context' suffix (MemberExpression)
obj.nested.ThemeContext = createContext("");
```

```tsx
// 🔵 OK: PascalCase with 'Context' suffix (class property)
class Foo { ThemeContext = createContext(""); }
```

## Versions [#versions]

<Accordions>
  <Accordion title="[3.0.0] - 2026-03-16">
    ### Changed [#changed]

    * Removed React 19 version restriction from the rule. (#1558)
  </Accordion>

  <Accordion title="[2.5.3] - 2026-01-09">
    ### Changed [#changed-1]

    * Updated rule to include React version checks. Closes #1382. (#1384)
  </Accordion>

  <Accordion title="[1.40.0] - 2025-04-01">
    ### Changed [#changed-2]

    * Enabled rule in recommended presets. (#1024)
  </Accordion>

  <Accordion title="[1.29.0] - 2025-03-01">
    ### Added [#added]

    * Initial release of the `context-name` rule. (#952)
    * Reports React contexts that do not follow the recommended naming convention.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/context-name/context-name.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/context-name/context-name.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/context-name/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Context](https://react.dev/learn/passing-data-deeply-with-context)
* [React Docs: `createContext`](https://react.dev/reference/react/createContext)

***

## See Also [#see-also]

* [`react-naming-convention/id-name`](./naming-convention-id-name)\
  Enforces identifier names assigned from `useId` calls to be either `id` or end with `Id`.
* [`react-naming-convention/ref-name`](./naming-convention-ref-name)\
  Enforces identifier names assigned from `useRef` calls to be either `ref` or end with `Ref`.


# id-name (/docs/rules/naming-convention-id-name)





**Full Name in `eslint-plugin-react-naming-convention`**

```plain copy
react-naming-convention/id-name
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/naming-convention-id-name
```

**Presets**

`naming-convention`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Enforces identifier names assigned from `useId` calls to be either `id` or end with `Id`.

## Examples [#examples]

```tsx
// 🔴 Problem: Identifier 'myRef' does not end with 'Id'
const myRef = useId();
```

```tsx
// 🔴 Problem: Identifier 'randomString' does not end with 'Id'
const randomString = useId();
```

```tsx
// 🟢 Recommended: Name ends with 'Id'
const myId = useId();
```

```tsx
// 🟢 Recommended: Name is exactly 'id'
const id = useId();
```

```tsx
// 🔵 OK: Name ends with 'Id' (MemberExpression)
obj.nested.myId = useId();
```

```tsx
// 🔵 OK: Returning the result directly from a custom Hook
function useCustomId() {
  return useId();
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[2.13.0] - 2026-02-15">
    ### Added [#added]

    * Initial release of the `id-name` rule. (#1497)
    * Reports `React.useId()` calls that do not follow the recommended naming convention.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/id-name/id-name.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/id-name/id-name.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/id-name/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `useId`](https://react.dev/reference/react/useId)

***

## See Also [#see-also]

* [`react-naming-convention/context-name`](./naming-convention-context-name)\
  Enforces identifier names assigned from `createContext` calls to be a valid component name with the suffix `Context`.
* [`react-naming-convention/ref-name`](./naming-convention-ref-name)\
  Enforces identifier names assigned from `useRef` calls to be either `ref` or end with `Ref`.


# ref-name (/docs/rules/naming-convention-ref-name)





**Full Name in `eslint-plugin-react-naming-convention`**

```plain copy
react-naming-convention/ref-name
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/naming-convention-ref-name
```

**Presets**

`naming-convention`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Enforces identifier names assigned from `useRef` calls to be either `ref` or end with `Ref`.

## Examples [#examples]

```tsx
// 🔴 Problem: Identifier 'myId' does not end with 'Ref'
const myId = useRef(null);
```

```tsx
// 🔴 Problem: Identifier 'node' does not end with 'Ref'
const node = useRef(null);
```

```tsx
// 🟢 Recommended: Name ends with 'Ref'
const myRef = useRef(null);
```

```tsx
// 🟢 Recommended: Name is exactly 'ref'
const ref = useRef(null);
```

```tsx
// 🔵 OK: Name ends with 'Ref' (MemberExpression)
obj.nested.myRef = useRef(null);
```

```tsx
// 🔵 OK: The result is immediately accessed via a member expression instead of being stored in a ref variable
const value = useRef(null).current.value;
```

```tsx
// 🔵 OK: The result is immediately accessed via a member expression instead of being stored in a ref variable (same as above)
const useOnce = <T,>(fn: () => T) => (useRef<{ value: T }>().current ??= { value: fn() }).value;
```

## Options [#options]

### Shared Settings [#shared-settings]

Custom ref hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalRefHooks": "(useMyRef|useCustomRef)"
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.18.0] - 2026-07-23">
    ### Changed [#changed]

    * Replaced `isUseRefCall` with `isUseRefLikeCall`; identifiers assigned from custom ref hooks matching the `additionalRefHooks` setting are now checked by this rule.
    * Removed the `includes("useRef")` text precheck so files that only use custom ref hooks matching `additionalRefHooks` are no longer skipped.
  </Accordion>

  <Accordion title="[2.5.1] - 2026-01-05">
    ### Fixed [#fixed]

    * Fixed false positive with immediate dereference. Closes #1375. (#1376)
  </Accordion>

  <Accordion title="[2.5.0] - 2025-12-31">
    ### Added [#added]

    * Initial release of the `use-ref-name` rule. (#1366)
    * Reports `useRef` hooks that do not follow the recommended naming convention.

    ### Changed [#changed-1]

    * Renamed rule from `use-ref-name` to `ref-name` and added it to recommended presets. (#1367)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/ref-name/ref-name.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/ref-name/ref-name.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-naming-convention/src/rules/ref-name/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `useRef`](https://react.dev/reference/react/useRef)
* [React Docs: Plain Object `.current`](https://react.dev/reference/eslint-plugin-react-hooks/lints/refs#plain-object-current)

***

## See Also [#see-also]

* [`react-naming-convention/context-name`](./naming-convention-context-name)\
  Enforces identifier names assigned from `createContext` calls to be a valid component name with the suffix `Context`.
* [`react-naming-convention/id-name`](./naming-convention-id-name)\
  Enforces identifier names assigned from `useId` calls to be either `id` or end with `Id`.


# no-access-state-in-setstate (/docs/rules/no-access-state-in-setstate)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-access-state-in-setstate
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-access-state-in-setstate
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using `this.state` inside `setState` calls might result in errors when two state updates are batched, causing references to the old state rather than the current state.

## Examples [#examples]

### Reading this.state inside setState may return a stale value [#reading-thisstate-inside-setstate-may-return-a-stale-value]

React batches state updates. When you read `this.state` immediately after calling `setState`, it still holds the old value. This demonstrates why the updater function is safer.

```tsx
// 🔴 Problem: this.state is not updated immediately after setState
import React from "react";

class MyComponent extends React.Component {
  state = { name: "Taylor" };

  handleClick = () => {
    console.log(this.state.name); // "Taylor"
    this.setState({ name: "Robin" });
    console.log(this.state.name); // Still "Taylor"!
  };

  render() {
    return <button onClick={this.handleClick}>Change name</button>;
  }
}
```

### Incrementing state based on the previous value [#incrementing-state-based-on-the-previous-value]

When multiple `setState` calls are batched together, reading `this.state` directly may give you a stale value. The updater function receives the latest state as an argument, ensuring correctness even with batching.

```tsx
// 🔴 Problem: Reading this.state directly inside setState may get a stale value when batched
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  foo: number;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  state = {
    foo: 1,
  };

  render() {
    return (
      <button onClick={() => this.setState({ foo: this.state.foo + 1 })} />
      //                                          ^^^ Do not access 'this.state' within 'setState'. Use the update function instead.
    );
  }
}
```

```tsx
// 🟢 Recommended: Use an updater function; React passes the latest state
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  foo: number;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  state = {
    foo: 1,
  };

  render() {
    return (
      <button
        onClick={() => this.setState((state) => ({ foo: state.foo + 1 }))}
      />
    );
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with direct non-computed identifier checks when resolving `state` property access and destructuring.
    * Accesses like `this["state"]` or destructuring from `{ "state": value }` are no longer treated as `state` access, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[0.10.11] - 2024-01-20">
    ### Added [#added]

    * Initial release of the `no-access-state-in-setstate` rule. (#319)
    * Detects accessing `this.state` inside `setState` calls, which can lead to stale state issues. Recommends using the callback form of `setState` or functional updates instead.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate/no-access-state-in-setstate.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate/no-access-state-in-setstate.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `setState`](https://react.dev/reference/react/Component#setstate)
* [React Docs: How to migrate to a function component](https://react.dev/reference/react/Component#alternatives)

***

## See Also [#see-also]

* [`react-x/no-direct-mutation-state`](./no-direct-mutation-state)\
  Disallows direct mutation of `this.state`.


# no-array-index-key (/docs/rules/no-array-index-key)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-array-index-key
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-array-index-key
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

The order of items in list rendering can change over time if an item is inserted, deleted, or the array is reordered. Using indexes as keys often leads to subtle, confusing errors.

## Examples [#examples]

### Rendering a list with stable identities [#rendering-a-list-with-stable-identities]

When your data items have a unique identifier, use it as the `key` so React can correctly track each element across reorders, insertions, and deletions.

```tsx
// 🔴 Problem: Using the array index as a key causes state issues when sorting, adding, or removing items
interface MyComponentProps {
  items: { id: string; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item, index) => (
        //              ^^^ Do not use an item's index in the array as its key.
        <li key={index}>{item.name}</li>
      ))}
    </ul>
  );
}
```

```tsx
// 🟢 Recommended: Use the data's own unique identifier as the key
interface MyComponentProps {
  items: { id: string; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item) => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}
```

### Deriving the key from the index [#deriving-the-key-from-the-index]

Wrapping the index in a string or a conversion does not make it a stable identity — the key still changes whenever the list is reordered. The rule also reports indexes used in template literals, string concatenation, and `String()`, `Number()`, or `.toString()` conversions.

```tsx
// 🔴 Problem: The key is still derived from the array index
interface MyComponentProps {
  items: { id: string; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item, index) => (
        //              ^^^ Do not use an item's index in the array as its key.
        <li key={`item-${index}`}>{item.name}</li>
      ))}
      {items.map((item, index) => (
        //              ^^^ Do not use an item's index in the array as its key.
        <li key={String(index)}>{item.name}</li>
      ))}
    </ul>
  );
}
```

```tsx
// 🟢 Recommended: Derive the key from the data itself
interface MyComponentProps {
  items: { id: string; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item) => <li key={`item-${item.id}`}>{item.name}</li>)}
    </ul>
  );
}
```

### Falling back to the index [#falling-back-to-the-index]

Using the index as a fallback when an identifier is missing still gives some items an unstable identity. The rule checks every branch a key may evaluate to, including `??`, `||`, and ternary expressions.

```tsx
// 🔴 Problem: Items without an id silently fall back to the index
interface MyComponentProps {
  items: { id?: string; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item, index) => (
        //              ^^^ Do not use an item's index in the array as its key.
        <li key={item.id ?? index}>{item.name}</li>
      ))}
    </ul>
  );
}
```

```tsx
// 🟢 Recommended: Assign a stable id when the item is created, not at render time
interface MyComponentProps {
  items: { id: string; name: string }[];
}

function createItem(name: string) {
  return { id: crypto.randomUUID(), name };
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item) => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}
```

### Rendering nested lists [#rendering-nested-lists]

When rendering nested lists, both the outer and inner items need stable keys. Using the item's own identifier ensures React can correctly track elements at every level.

```tsx
// 🟢 Recommended: Use stable identifiers for both outer and inner list items
interface Recipe {
  id: string;
  name: string;
  ingredients: string[];
}

function RecipeList({ recipes }: { recipes: Recipe[] }) {
  return (
    <div>
      <h1>Recipes</h1>
      {recipes.map((recipe) => (
        <div key={recipe.id}>
          <h2>{recipe.name}</h2>
          <ul>
            {recipe.ingredients.map((ingredient) => (
              <li key={ingredient}>{ingredient}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}
```

### Rendering multiple elements per list item [#rendering-multiple-elements-per-list-item]

When each list item needs to render multiple elements, use `Fragment` with a stable key so React can track the group without adding extra DOM nodes.

```tsx
// 🟢 Recommended: Use Fragment with a stable key for multi-element items
import { Fragment } from "react";

interface Person {
  id: string;
  name: string;
  bio: string;
}

function List({ people }: { people: Person[] }) {
  const listItems = people.map((person) => (
    <Fragment key={person.id}>
      <h1>{person.name}</h1>
      <p>{person.bio}</p>
    </Fragment>
  ));
  return <ul>{listItems}</ul>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[5.8.18] - 2026-06-11">
    ### Changed [#changed-2]

    * Replaced name-based index parameter tracking with scope-based resolution, so identifiers that shadow an index parameter are no longer misreported.

    ### Added [#added]

    * Detect `Number(index)` coercion, in addition to `String(index)` and `index.toString()`.
    * Detect index usage in `??`, `||`, and ternary fallback branches of a `key` value (e.g. `key={item.id ?? index}`).
    * Detect string-literal `'key'` properties in `createElement`/`cloneElement` props objects.
  </Accordion>

  <Accordion title="[5.6.0] - 2026-04-29">
    ### Fixed [#fixed]

    * Fixed type expression handling by unwrapping type expressions before inspecting AST node types. (#1732)
  </Accordion>

  <Accordion title="[2.10.0] - 2026-02-05">
    ### Changed [#changed-3]

    * Refactored array index parameter retrieval and improved callback position logic.
  </Accordion>

  <Accordion title="[1.24.0] - 2025-01-21">
    ### Changed [#changed-4]

    * Improved performance of the rule. (#913)
  </Accordion>

  <Accordion title="[1.17.3] - 2024-12-03">
    ### Fixed [#fixed-1]

    * Fixed 'no-array-index-key' mistaking 'foo.bar.map' for 'React.Children.map' method. Closes #860. (#868)
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Changed [#changed-5]

    * Re-implemented rule to use improved array method utilities for more accurate detection of array index usage as keys.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added-1]

    * Initial release of the `no-array-index-key` rule.
    * Reports usage of array indices as keys in JSX elements.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-array-index-key/no-array-index-key.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-array-index-key/no-array-index-key.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-array-index-key/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
* [React Docs: Rendering Lists](https://react.dev/learn/rendering-lists)

***

## See Also [#see-also]

* [`react-x/no-duplicate-key`](./no-duplicate-key)\
  Prevents duplicate `key` props on sibling elements when rendering lists.
* [`react-x/no-implicit-key`](./no-implicit-key)\
  Prevents implicitly passing the `key` prop to components.
* [`react-x/no-missing-key`](./no-missing-key)\
  Disallows missing `key` on items in list rendering.


# no-children-count (/docs/rules/no-children-count)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-children-count
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-children-count
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using `Children.count` to inspect the children tree is a form of React child introspection. It creates fragile coupling between parent and child components:

* Breaks when children are wrapped in HOCs, `forwardRef`, or `memo`.
* Prevents React from optimizing rendering.
* Creates implicit contracts that types can't enforce.
* Makes composition unpredictable with fragments, portals, and other React features.

Prefer these alternatives:

* Compound components with context
* Render props or slot props
* Data-driven APIs (array of config objects)
* CSS-based solutions (grid, flexbox, `:nth-child`, etc.)

[See common alternatives](https://react.dev/reference/react/Children#alternatives).

## Examples [#examples]

### Counting children to conditionally render [#counting-children-to-conditionally-render]

Relying on `Children.count` makes your component tightly coupled to React's internal children representation. Instead, let the parent decide what to render or use standard JavaScript patterns.

For example, if you need to know how many items to display, you can accept an array as a prop directly and use `.length`:

```tsx
// 🟢 Recommended: accept data as an array prop
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <>
      <h1>Total rows: {items.length}</h1>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </>
  );
}
```

```tsx
// 🔴 Problem: Using Children.count to determine the number of children
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  return (
    <>
      <h1>Total rows: {Children.count(children)}</h1>
      ...
    </>
  );
}
```

### Using component composition [#using-component-composition]

Instead of counting children, compose components so that the parent controls the layout and the child components render what they receive.

```tsx
// 🟢 Recommended: use component composition to wrap items
interface RowListProps {
  children: React.ReactNode;
}

function RowList({ children }: RowListProps) {
  return <div className="RowList">{children}</div>;
}

interface RowProps {
  children: React.ReactNode;
}

function Row({ children }: RowProps) {
  return <div className="Row">{children}</div>;
}

function App() {
  return (
    <RowList>
      <Row><p>First item</p></Row>
      <Row><p>Second item</p></Row>
    </RowList>
  );
}
```

### Conditionally rendering based on item count [#conditionally-rendering-based-on-item-count]

If a component needs to show different UI depending on how many items there are, let the parent compute the count from its own data rather than inspecting children.

```tsx
// 🟢 Recommended: compute the count from props in the parent
interface ItemListProps {
  items: string[];
}

function ItemList({ items }: ItemListProps) {
  const hasItems = items.length > 0;
  return (
    <div>
      {hasItems ? (
        <ul>
          {items.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>No items available.</p>
      )}
    </div>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-children-count` rule. Closes #106. (#129)
    * Reports usage of `React.Children.count`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-count/no-children-count.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-count/no-children-count.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-count/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `Children`](https://react.dev/reference/react/Children)
* [Astryx `no-react-introspection` Rule](https://github.com/facebook/astryx/blob/main/internal/eslint-plugin-astryx/no-react-introspection.js)

***

## See Also [#see-also]

* [`react-x/no-children-for-each`](./no-children-for-each)\
  Disallows the use of `Children.forEach` from the `react` package.
* [`react-x/no-children-map`](./no-children-map)\
  Disallows the use of `Children.map` from the `react` package.
* [`react-x/no-children-only`](./no-children-only)\
  Disallows the use of `Children.only` from the `react` package.
* [`react-x/no-children-to-array`](./no-children-to-array)\
  Disallows the use of `Children.toArray` from the `react` package.


# no-children-for-each (/docs/rules/no-children-for-each)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-children-for-each
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-children-for-each
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using `Children.forEach` to iterate over the children tree is a form of React child introspection. It creates fragile coupling between parent and child components:

* Breaks when children are wrapped in HOCs, `forwardRef`, or `memo`.
* Prevents React from optimizing rendering.
* Creates implicit contracts that types can't enforce.
* Makes composition unpredictable with fragments, portals, and other React features.

Prefer these alternatives:

* Compound components with context
* Render props or slot props
* Data-driven APIs (array of config objects)
* CSS-based solutions (grid, flexbox, `:nth-child`, etc.)

[See common alternatives](https://react.dev/reference/react/Children#alternatives).

## Examples [#examples]

### Iterating over children to augment them [#iterating-over-children-to-augment-them]

Using `Children.forEach` to walk through and transform children is brittle because it relies on React's internal children structure. Prefer letting the parent handle iteration with standard array methods or restructuring your component API.

For example, if you need to interleave separators between children, let the parent pass an array directly and use `.map()`:

```tsx
// 🟢 Recommended: accept data as an array prop and use standard JS methods
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <>
      {items.map((item, index) => (
        <div key={item}>
          {item}
          {index < items.length - 1 && <hr />}
        </div>
      ))}
    </>
  );
}
```

```tsx
// 🔴 Problem: Using Children.forEach to iterate over and transform children
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  const result = [];
  Children.forEach(children, (child, index) => {
    result.push(child);
    result.push(<hr key={index} />);
  });
  // ...
}
```

### Using data props and CSS instead of augmenting children [#using-data-props-and-css-instead-of-augmenting-children]

If you need to add separators or other decorations between items, let the parent control the layout with CSS or pass structured data as props rather than transforming children.

```tsx
// 🟢 Recommended: control separators with CSS or pass data as props
interface Item {
  id: string;
  name: string;
}

function List({ items }: { items: Item[] }) {
  return (
    <ul className="list-with-separators">
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// CSS: .list-with-separators li + li { border-top: 1px solid #ccc; }
```

```tsx
// 🟢 Recommended: pass structured data when each item needs custom wrapping
interface Row {
  id: string;
  content: React.ReactNode;
}

function RowList({ rows }: { rows: Row[] }) {
  return (
    <div className="RowList">
      {rows.map((row) => (
        <div className="Row" key={row.id}>
          {row.content}
        </div>
      ))}
    </div>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-children-for-each` rule. Closes #106. (#129)
    * Reports usage of `React.Children.forEach`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-for-each/no-children-for-each.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-for-each/no-children-for-each.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-for-each/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `Children`](https://react.dev/reference/react/Children)
* [Astryx `no-react-introspection` Rule](https://github.com/facebook/astryx/blob/main/internal/eslint-plugin-astryx/no-react-introspection.js)

***

## See Also [#see-also]

* [`react-x/no-children-count`](./no-children-count)\
  Disallows the use of `Children.count` from the `react` package.
* [`react-x/no-children-map`](./no-children-map)\
  Disallows the use of `Children.map` from the `react` package.
* [`react-x/no-children-only`](./no-children-only)\
  Disallows the use of `Children.only` from the `react` package.
* [`react-x/no-children-to-array`](./no-children-to-array)\
  Disallows the use of `Children.toArray` from the `react` package.


# no-children-map (/docs/rules/no-children-map)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-children-map
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-children-map
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using `Children.map` to transform children is a form of React child introspection. It creates fragile coupling between parent and child components:

* Breaks when children are wrapped in HOCs, `forwardRef`, or `memo`.
* Prevents React from optimizing rendering.
* Creates implicit contracts that types can't enforce.
* Makes composition unpredictable with fragments, portals, and other React features.

Prefer these alternatives:

* Compound components with context
* Render props or slot props
* Data-driven APIs (array of config objects)
* CSS-based solutions (grid, flexbox, `:nth-child`, etc.)

[See common alternatives](https://react.dev/reference/react/Children#alternatives).

## Examples [#examples]

### Wrapping each child in a layout element [#wrapping-each-child-in-a-layout-element]

Using `Children.map` to wrap children assumes a specific React internals structure that may break. Instead, accept an array of data or let the parent map over items directly.

For example, if you need to wrap items in a styled container, accept an array of data as a prop and map over it:

```tsx
// 🟢 Recommended: accept data as an array prop and map over it
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <div className="RowList">
      {items.map((item) => (
        <div className="Row" key={item}>
          {item}
        </div>
      ))}
    </div>
  );
}
```

```tsx
// 🔴 Problem: Using Children.map to wrap each child in a styled container
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  return (
    <div className="RowList">
      {Children.map(children, (child) => <div className="Row">{child}</div>)}
    </div>
  );
}
```

### Passing structured data as props [#passing-structured-data-as-props]

Instead of passing React elements as children and wrapping them with `Children.map`, accept structured data as a prop and map over it directly. This gives you full control over rendering and keys.

```tsx
// 🟢 Recommended: accept structured data as a prop and map over it
interface Row {
  id: string;
  content: React.ReactNode;
}

interface RowListProps {
  rows: Row[];
}

function RowList({ rows }: RowListProps) {
  return (
    <div className="RowList">
      {rows.map((row) => (
        <div className="Row" key={row.id}>
          {row.content}
        </div>
      ))}
    </div>
  );
}

function App() {
  return (
    <RowList
      rows={[
        { id: "first", content: <p>This is the first item.</p> },
        { id: "second", content: <p>This is the second item.</p> },
        { id: "third", content: <p>This is the third item.</p> },
      ]}
    />
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-children-map` rule. Closes #106. (#129)
    * Reports usage of `React.Children.map`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-map/no-children-map.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-map/no-children-map.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-map/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `Children`](https://react.dev/reference/react/Children)
* [Astryx `no-react-introspection` Rule](https://github.com/facebook/astryx/blob/main/internal/eslint-plugin-astryx/no-react-introspection.js)

***

## See Also [#see-also]

* [`react-x/no-children-count`](./no-children-count)\
  Disallows the use of `Children.count` from the `react` package.
* [`react-x/no-children-for-each`](./no-children-for-each)\
  Disallows the use of `Children.forEach` from the `react` package.
* [`react-x/no-children-only`](./no-children-only)\
  Disallows the use of `Children.only` from the `react` package.
* [`react-x/no-children-to-array`](./no-children-to-array)\
  Disallows the use of `Children.toArray` from the `react` package.


# no-children-only (/docs/rules/no-children-only)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-children-only
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-children-only
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using `Children.only` to assert the children tree shape is a form of React child introspection. It creates fragile coupling between parent and child components:

* Breaks when children are wrapped in HOCs, `forwardRef`, or `memo`.
* Prevents React from optimizing rendering.
* Creates implicit contracts that types can't enforce.
* Makes composition unpredictable with fragments, portals, and other React features.

Prefer these alternatives:

* Compound components with context
* Render props or slot props
* Data-driven APIs (array of config objects)
* CSS-based solutions (grid, flexbox, `:nth-child`, etc.)

[See common alternatives](https://react.dev/reference/react/Children#alternatives).

## Examples [#examples]

### Enforcing a single child [#enforcing-a-single-child]

Using `Children.only` to assert that a component receives exactly one child is fragile. If you need to restrict children, consider documenting the prop type or using a different API design.

For example, if your component needs exactly one child element, you can type the prop as a single `ReactElement` instead of `React.ReactNode`:

```tsx
// 🟢 Recommended: type the children prop to enforce a single child at compile time
import { type ReactElement } from "react";

interface MyComponentProps {
  children: ReactElement;
}

function MyComponent({ children }: MyComponentProps) {
  return <div>{children}</div>;
}
```

```tsx
// 🔴 Problem: Using Children.only to enforce a single child
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  const element = Children.only(children);
  // ...
}
```

### Using a dedicated prop instead of children [#using-a-dedicated-prop-instead-of-children]

If your component is designed to work with a single element, consider accepting it as a regular prop instead of children. This makes the API clearer and avoids runtime checks.

```tsx
// 🟢 Recommended: accept the single element as a named prop
import { type ReactElement } from "react";

interface ModalProps {
  content: ReactElement;
}

function Modal({ content }: ModalProps) {
  return <div className="modal">{content}</div>;
}

function App() {
  return <Modal content={<p>Hello, world!</p>} />;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-children-only` rule. Closes #106. (#129)
    * Reports usage of `React.Children.only`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-only/no-children-only.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-only/no-children-only.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-only/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `Children`](https://react.dev/reference/react/Children)
* [Astryx `no-react-introspection` Rule](https://github.com/facebook/astryx/blob/main/internal/eslint-plugin-astryx/no-react-introspection.js)

***

## See Also [#see-also]

* [`react-x/no-children-count`](./no-children-count)\
  Disallows the use of `Children.count` from the `react` package.
* [`react-x/no-children-for-each`](./no-children-for-each)\
  Disallows the use of `Children.forEach` from the `react` package.
* [`react-x/no-children-map`](./no-children-map)\
  Disallows the use of `Children.map` from the `react` package.
* [`react-x/no-children-to-array`](./no-children-to-array)\
  Disallows the use of `Children.toArray` from the `react` package.


# no-children-to-array (/docs/rules/no-children-to-array)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-children-to-array
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-children-to-array
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using `Children.toArray` to materialize the children tree is a form of React child introspection. It creates fragile coupling between parent and child components:

* Breaks when children are wrapped in HOCs, `forwardRef`, or `memo`.
* Prevents React from optimizing rendering.
* Creates implicit contracts that types can't enforce.
* Makes composition unpredictable with fragments, portals, and other React features.

Prefer these alternatives:

* Compound components with context
* Render props or slot props
* Data-driven APIs (array of config objects)
* CSS-based solutions (grid, flexbox, `:nth-child`, etc.)

[See common alternatives](https://react.dev/reference/react/Children#alternatives).

## Examples [#examples]

### Converting children to an array for manipulation [#converting-children-to-an-array-for-manipulation]

Using `Children.toArray` to turn children into an array assumes internal React details that may change. If you need to reorder or filter items, accept structured data as props instead.

For example, if you need to reverse a list, let the parent pass an array prop and use standard array methods:

```tsx
// 🟢 Recommended: accept data as an array prop and manipulate it directly
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  const reversed = [...items].reverse();
  return (
    <>
      {reversed.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </>
  );
}
```

```tsx
// 🔴 Problem: Using Children.toArray to convert children into an array for manipulation
import React, { Children } from "react";

interface MyComponentProps {
  children: React.ReactNode;
}

function MyComponent({ children }: MyComponentProps) {
  const result = Children.toArray(children);
  result.reverse();
  // ...
}
```

### Passing structured data as props [#passing-structured-data-as-props]

Instead of converting children to an array, accept structured data as a prop and use standard array methods. This keeps your component decoupled from React's internal children representation.

```tsx
// 🟢 Recommended: accept structured data as a prop and map over it
interface Row {
  id: string;
  content: React.ReactNode;
}

interface RowListProps {
  rows: Row[];
}

function RowList({ rows }: RowListProps) {
  return (
    <div className="RowList">
      {rows.map((row) => (
        <div className="Row" key={row.id}>
          {row.content}
        </div>
      ))}
    </div>
  );
}

function App() {
  return (
    <RowList
      rows={[
        { id: "first", content: <p>This is the first item.</p> },
        { id: "second", content: <p>This is the second item.</p> },
        { id: "third", content: <p>This is the third item.</p> },
      ]}
    />
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-children-to-array` rule. Closes #106. (#129)
    * Reports usage of `React.Children.toArray`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-to-array/no-children-to-array.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-to-array/no-children-to-array.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-children-to-array/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `Children`](https://react.dev/reference/react/Children)
* [Astryx `no-react-introspection` Rule](https://github.com/facebook/astryx/blob/main/internal/eslint-plugin-astryx/no-react-introspection.js)

***

## See Also [#see-also]

* [`react-x/no-children-count`](./no-children-count)\
  Disallows the use of `Children.count` from the `react` package.
* [`react-x/no-children-for-each`](./no-children-for-each)\
  Disallows the use of `Children.forEach` from the `react` package.
* [`react-x/no-children-map`](./no-children-map)\
  Disallows the use of `Children.map` from the `react` package.
* [`react-x/no-children-only`](./no-children-only)\
  Disallows the use of `Children.only` from the `react` package.


# no-class-component (/docs/rules/no-class-component)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-class-component
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-class-component
```

**Presets**

`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Component is the base class for React components defined as JavaScript classes. Class components are still supported by React, but we don't recommend using them in new code.

We recommend defining components as functions instead of classes. [See how to migrate](https://react.dev/reference/react/Component#alternatives).

## Examples [#examples]

### Writing a new component [#writing-a-new-component]

For new code, prefer function components with Hooks. They are simpler, easier to compose, and align with React's current direction.

```tsx
// 🔴 Problem: Using a class component for new logic
import React from "react";

interface MyComponentProps {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps> {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
```

```tsx
// 🟢 Recommended: Use a function component instead
interface MyComponentProps {
  name: string;
}

function MyComponent({ name }: MyComponentProps) {
  return <h1>Hello, {name}!</h1>;
}
```

### Defining an error boundary [#defining-an-error-boundary]

Error boundaries must currently be implemented as class components because `componentDidCatch` and `getDerivedStateFromError` have no function-component equivalent. This is an allowed exception.

```tsx
// 🔵 OK: Error boundaries must be implemented as class components
import React, { Component } from "react";

interface ErrorBoundaryProps {
  children: React.ReactNode;
}

class ErrorBoundary extends Component<ErrorBoundaryProps> {
  state = { hasError: false };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
```

### Migrating a class component with state [#migrating-a-class-component-with-state]

Class components that manage local state can be converted to function components using the `useState` Hook.

```tsx
// 🟢 Recommended: Use a function component with Hooks
import { useState } from "react";

function Counter() {
  const [age, setAge] = useState(42);

  function handleAgeChange() {
    setAge((prevAge) => prevAge + 1);
  }

  return (
    <>
      <button onClick={handleAgeChange}>Increment age</button>
      <p>You are {age}.</p>
    </>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.44.0] - 2025-04-11">
    ### Changed [#changed]

    * Updated rule description to clarify the exception for error boundaries.
  </Accordion>

  <Accordion title="[1.10.0] - 2024-08-11">
    ### Added [#added]

    * Added exception for class components that use `componentDidCatch`, as they are required for error boundaries. Closes #495.

    ### Fixed [#fixed]

    * Fixed components using `getDerivedStateFromError` being incorrectly warned. Closes #531.
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Added [#added-1]

    * Initial release of the `no-class-component` rule. (#39)
    * Reports usage of class components to encourage migrating to function components.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-class-component/no-class-component.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-class-component/no-class-component.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-class-component/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Alternatives to class components](https://react.dev/reference/react/Component#alternatives)
* [Legacy React APIs: `Component`](https://react.dev/reference/react/Component)

***

## See Also [#see-also]

* [`react-x/error-boundaries`](./error-boundaries)\
  Validates usage of Error Boundaries instead of try/catch for errors in child components.


# no-clone-element (/docs/rules/no-clone-element)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-clone-element
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-clone-element
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using `cloneElement` to inject props into children is a form of React child introspection. It creates fragile coupling between parent and child components:

* Breaks when children are wrapped in HOCs, `forwardRef`, or `memo`.
* Prevents React from optimizing rendering.
* Creates implicit contracts that types can't enforce.
* Makes composition unpredictable with fragments, portals, and other React features.

Prefer these alternatives:

* Compound components with context
* Render props or slot props
* Data-driven APIs (array of config objects)
* CSS-based solutions (grid, flexbox, `:nth-child`, etc.)

Try the [alternatives to `cloneElement`](https://react.dev/reference/react/cloneElement#alternatives) instead.

## Examples [#examples]

### Augmenting an element's props dynamically [#augmenting-an-elements-props-dynamically]

Using `cloneElement` to inject props into a child element hides the data flow and breaks component encapsulation. Prefer passing props explicitly through render props or composition patterns.

```tsx
// 🔴 Problem: Using cloneElement to dynamically inject props into a child element
import { cloneElement } from "react";

const clonedElement = cloneElement(
  <Row title="Cabbage">Hello</Row>,
  { isHighlighted: true },
  "Goodbye",
);

console.log(clonedElement); // <Row title="Cabbage" isHighlighted={true}>Goodbye</Row>
```

### Wrapping children with injected props [#wrapping-children-with-injected-props]

Using `cloneElement` inside `Children.map` hides which props a child receives and breaks encapsulation. Prefer passing data explicitly via render props or by restructuring your component API.

```tsx
// 🔴 Problem: Using cloneElement to inject props into each child
import { Children, cloneElement, useState } from "react";

function List({ children }) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
    <div className="List">
      {Children.map(children, (child, index) =>
        cloneElement(child, {
          isHighlighted: index === selectedIndex,
        }),
      )}
      <button onClick={() => setSelectedIndex((i) => (i + 1) % Children.count(children))}>
        Next
      </button>
    </div>
  );
}
```

```tsx
// 🟢 Recommended: Pass isHighlighted explicitly via render props
import { useState } from "react";

function List({ items, renderItem }) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  return (
    <div className="List">
      {items.map((item, index) => {
        const isHighlighted = index === selectedIndex;
        return renderItem(item, isHighlighted);
      })}
      <button onClick={() => setSelectedIndex((i) => (i + 1) % items.length)}>
        Next
      </button>
    </div>
  );
}

function App() {
  return (
    <List
      items={products}
      renderItem={(product, isHighlighted) => (
        <Row key={product.id} title={product.title} isHighlighted={isHighlighted} />
      )}
    />
  );
}
```

### Using component composition instead of cloneElement [#using-component-composition-instead-of-cloneelement]

Instead of injecting props into children with `cloneElement`, compose components so that the parent controls the layout and passes props explicitly.

```tsx
// 🟢 Recommended: Use component composition to wrap and configure items
interface RowProps {
  title: string;
  isHighlighted?: boolean;
  children: React.ReactNode;
}

function Row({ title, isHighlighted, children }: RowProps) {
  return (
    <div className={isHighlighted ? "Row highlighted" : "Row"}>
      <h3>{title}</h3>
      {children}
    </div>
  );
}

function App() {
  return (
    <div className="List">
      <Row title="First" isHighlighted>
        <p>First item content</p>
      </Row>
      <Row title="Second">
        <p>Second item content</p>
      </Row>
    </div>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.10.1] - 2024-01-21">
    ### Changed [#changed]

    * Added rule to `recommended` and `recommended-legacy` presets.
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Added [#added]

    * Initial release of the `no-clone-element` rule. (#55)
    * Reports usage of `React.cloneElement` and recommends alternative patterns for passing props to children.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-clone-element/no-clone-element.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-clone-element/no-clone-element.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-clone-element/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `cloneElement` Alternatives](https://react.dev/reference/react/cloneElement#alternatives)
* [Legacy React APIs: `cloneElement`](https://react.dev/reference/react/cloneElement)
* [Astryx `no-react-introspection` Rule](https://github.com/facebook/astryx/blob/main/internal/eslint-plugin-astryx/no-react-introspection.js)


# no-component-will-mount (/docs/rules/no-component-will-mount)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-component-will-mount
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-component-will-mount
```

**Features**

`🔄`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This API was renamed from `componentWillMount` to `UNSAFE_componentWillMount`. The old name has been deprecated. In a future major version of React, only the new name will work.

## Examples [#examples]

### Using the deprecated lifecycle name [#using-the-deprecated-lifecycle-name]

If your codebase still references `componentWillMount`, you should rename it to `UNSAFE_componentWillMount` to stay compatible with future React versions. Eventually, consider migrating side effects to `componentDidMount` or function components with `useEffect`.

```tsx
// 🔴 Problem: Using the deprecated componentWillMount name
import React from "react";

interface MyComponentProps {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps> {
  componentWillMount() {
    // ...
  }
}
```

```tsx
// 🟢 Recommended: Use UNSAFE_componentWillMount instead of the old name
import React from "react";

interface MyComponentProps {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps> {
  UNSAFE_componentWillMount() {
    // ...
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.20.0] - 2024-12-16">
    ### Added [#added]

    * Added codemod autofix support. (#879)
  </Accordion>

  <Accordion title="[0.9.1] - 2023-12-05">
    ### Added [#added-1]

    * Initial release of the `no-component-will-mount` rule.
    * Reports usage of the `componentWillMount` lifecycle method.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount/no-component-will-mount.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount/no-component-will-mount.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `UNSAFE_componentWillMount`](https://react.dev/reference/react/Component#unsafe_componentwillmount)
* [React Docs: Updating to Async Rendering](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html)

***

## See Also [#see-also]

* [`react-x/no-component-will-receive-props`](./no-component-will-receive-props)\
  Replaces usage of `componentWillReceiveProps` with `UNSAFE_componentWillReceiveProps`.
* [`react-x/no-component-will-update`](./no-component-will-update)\
  Replaces usage of `componentWillUpdate` with `UNSAFE_componentWillUpdate`.


# no-component-will-receive-props (/docs/rules/no-component-will-receive-props)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-component-will-receive-props
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-component-will-receive-props
```

**Features**

`🔄`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This API was renamed from `componentWillReceiveProps` to `UNSAFE_componentWillReceiveProps`. The old name has been deprecated. In a future major version of React, only the new name will work.

## Examples [#examples]

### Using the legacy lifecycle method name in class components [#using-the-legacy-lifecycle-method-name-in-class-components]

React has renamed `componentWillReceiveProps` to `UNSAFE_componentWillReceiveProps`. The old name will no longer work in future versions.

```tsx
import React from "react";

// 🔴 Problem: Continuing to use the deprecated componentWillReceiveProps
class MyComponent extends React.Component {
  componentWillReceiveProps() {
    // ...
  }
}
```

```tsx
import React from "react";

// 🟢 Recommended: Use UNSAFE_componentWillReceiveProps instead
class MyComponent extends React.Component {
  UNSAFE_componentWillReceiveProps() {
    // ...
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.20.0] - 2024-12-16">
    ### Added [#added]

    * Added codemod autofix support. (#879)
  </Accordion>

  <Accordion title="[1.5.5] - 2024-02-18">
    ### Fixed [#fixed]

    * Fixed rule not working as expected.
  </Accordion>

  <Accordion title="[0.9.2] - 2023-12-06">
    ### Added [#added-1]

    * Initial release of the `no-component-will-receive-props` rule.
    * Reports usage of the `componentWillReceiveProps` lifecycle method.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props/no-component-will-receive-props.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props/no-component-will-receive-props.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `UNSAFE_componentWillReceiveProps`](https://react.dev/reference/react/Component#unsafe_componentwillreceiveprops)
* [React Docs: You Probably Don't Need Derived State](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)
* [React Docs: Updating to Async Rendering](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html)

***

## See Also [#see-also]

* [`react-x/no-component-will-mount`](./no-component-will-mount)\
  Replaces usage of `componentWillMount` with `UNSAFE_componentWillMount`.
* [`react-x/no-component-will-update`](./no-component-will-update)\
  Replaces usage of `componentWillUpdate` with `UNSAFE_componentWillUpdate`.


# no-component-will-update (/docs/rules/no-component-will-update)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-component-will-update
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-component-will-update
```

**Features**

`🔄`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This API was renamed from `componentWillUpdate` to `UNSAFE_componentWillUpdate`. The old name is deprecated. In a future major version of React, only the new name will work.

## Examples [#examples]

### Using the legacy lifecycle method name in class components [#using-the-legacy-lifecycle-method-name-in-class-components]

React has renamed `componentWillUpdate` to `UNSAFE_componentWillUpdate`. The old name will no longer work in future versions.

```tsx
import React from "react";

// 🔴 Problem: Continuing to use the deprecated componentWillUpdate
class MyComponent extends React.Component {
  componentWillUpdate() {
    // ...
  }
}
```

```tsx
import React from "react";

// 🟢 Recommended: Use UNSAFE_componentWillUpdate instead
class MyComponent extends React.Component {
  UNSAFE_componentWillUpdate() {
    // ...
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.20.0] - 2024-12-16">
    ### Added [#added]

    * Added codemod autofix support. (#879)
  </Accordion>

  <Accordion title="[0.9.2] - 2023-12-06">
    ### Added [#added-1]

    * Initial release of the `no-component-will-update` rule.
    * Reports usage of the `componentWillUpdate` lifecycle method.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-update/no-component-will-update.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-update/no-component-will-update.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-component-will-update/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `UNSAFE_componentWillUpdate`](https://react.dev/reference/react/Component#unsafe_componentwillupdate)
* [React Docs: Updating to Async Rendering](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html)

***

## See Also [#see-also]

* [`react-x/no-component-will-mount`](./no-component-will-mount)\
  Replaces usage of `componentWillMount` with `UNSAFE_componentWillMount`.
* [`react-x/no-component-will-receive-props`](./no-component-will-receive-props)\
  Replaces usage of `componentWillReceiveProps` with `UNSAFE_componentWillReceiveProps`.


# no-context-provider (/docs/rules/no-context-provider)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-context-provider
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-context-provider
```

**Features**

`🔄`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

In React 19, you can render `<Context>` as a provider instead of `<Context.Provider>`.

<Callout type="info">
  This rule works best in codebases that follow the [`naming-convention/context-name`](./naming-convention-context-name) rule.
</Callout>

## Examples [#examples]

### Using a Context Provider in React 19 [#using-a-context-provider-in-react-19]

Starting from React 19, Context itself can be used directly as a provider, so you no longer need to write `.Provider`.

```tsx
import ThemeContext from "./ThemeContext";

// 🔴 Problem: Continuing to use the legacy `<Context.Provider>` syntax
function App({ children }) {
  return (
    <ThemeContext.Provider value="light">
      {children}
    </ThemeContext.Provider>
  );
}
```

```tsx
import ThemeContext from "./ThemeContext";

// 🟢 Recommended: Use `<Context>` directly as a provider
function App({ children }) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );
}
```

### Nesting multiple context providers [#nesting-multiple-context-providers]

When multiple contexts are provided to the same subtree, the legacy `.Provider` syntax adds unnecessary noise. React 19 allows each context to be used directly.

```tsx
// 🔴 Problem: Nested legacy providers
import ThemeContext from "./ThemeContext";
import AuthContext from "./AuthContext";

function App({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      <AuthContext.Provider value={currentUser}>
        {children}
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}
```

```tsx
// 🟢 Recommended: Use contexts directly as providers
import ThemeContext from "./ThemeContext";
import AuthContext from "./AuthContext";

function App({ children }) {
  return (
    <ThemeContext value="dark">
      <AuthContext value={currentUser}>
        {children}
      </AuthContext>
    </ThemeContext>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[2.10.0] - 2026-02-05">
    ### Changed [#changed]

    * Updated documentation to use TIP callout instead of warning callout.
  </Accordion>

  <Accordion title="[1.34.1] - 2025-03-15">
    ### Fixed [#fixed]

    * Fixed false positive on components named `Provider` that are imported from third-party libraries. Closes #991. (#992)
  </Accordion>

  <Accordion title="[1.32.1] - 2025-03-13">
    ### Fixed [#fixed-1]

    * Fixed auto-fix incorrectly replacing `<Provider>` with `<>` in certain cases. Closes #984. (#985)
  </Accordion>

  <Accordion title="[1.26.2] - 2025-02-07">
    ### Changed [#changed-1]

    * Enhanced error messages to include the context name for clearer reporting. (#935)
  </Accordion>

  <Accordion title="[1.19.0] - 2024-12-16">
    ### Added [#added]

    * Initial release of the `no-context-provider` rule. (#873)
    * Reports usage of `<Context.Provider>` and recommends using `<Context>` directly, as supported in React 19.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-context-provider/no-context-provider.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-context-provider/no-context-provider.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-context-provider/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Blog: `<Context>` as a provider](https://react.dev/blog/2024/12/05/react-19#context-as-a-provider)
* [React Docs: `createContext`](https://react.dev/reference/react/createContext)

***

## See Also [#see-also]

* [`react-naming-convention/context-name`](./naming-convention-context-name)\
  Enforces identifier names assigned from `createContext` calls to be a valid component name with the suffix `Context`.
* [`react-x/no-use-context`](./no-use-context)\
  Replaces usage of `useContext` with `use`.


# no-create-ref (/docs/rules/no-create-ref)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-create-ref
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-create-ref
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

`createRef()` is a legacy API that is not recommended for use in new code. Instead, prefer using `useRef()` with function components.

This rule only reports `createRef` calls located inside a **function component** or a **Hook**. Calls in other locations, such as at the module top-level or inside plain utility functions and class components, are not reported.

## Examples [#examples]

### Using createRef in function components [#using-createref-in-function-components]

In function components, prefer the Hook `useRef` over `createRef`, which was designed for class components.

```tsx
import React, { createRef } from "react";

// 🔴 Problem: Using createRef in a function component
function MyComponent() {
  const ref = React.createRef<HTMLDivElement>();
  //          ^^^ [Deprecated] Use 'useRef' instead.

  return <div ref={ref} />;
}
```

```tsx
import React, { useRef } from "react";

// 🟢 Recommended: Use useRef in function components
function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);

  return <div ref={ref} />;
}
```

### Migrating from createRef to useRef [#migrating-from-createref-to-useref]

When migrating a class component to a function component, replace `createRef` with `useRef`.

```tsx
// 🔴 Problem: createRef inside a function component creates a new ref on every render
import { createRef } from "react";

function Form() {
  const inputRef = createRef(); // Does not persist across renders

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}
```

```tsx
// 🟢 Recommended: useRef persists the same ref object across renders
import { useRef } from "react";

function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}
```

### Using a typed ref with useRef [#using-a-typed-ref-with-useref]

When you need a strongly typed ref in a function component, use `useRef` with an explicit generic parameter instead of `createRef`.

```tsx
// 🟢 Recommended: Use useRef with an explicit type parameter
import { useRef } from "react";

function VideoPlayer() {
  const videoRef = useRef<HTMLVideoElement>(null);

  function handlePlay() {
    videoRef.current?.play();
  }

  function handlePause() {
    videoRef.current?.pause();
  }

  return (
    <>
      <video ref={videoRef} src="/video.mp4" />
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
    </>
  );
}
```

### Using createRef in Hooks [#using-createref-in-hooks]

The rule also applies inside custom Hooks. Prefer `useRef` so the ref persists across renders.

```tsx
import { createRef } from "react";

// 🔴 Problem: Using createRef inside a custom Hook
function useInputRef() {
  const ref = createRef<HTMLInputElement>();
  //          ^^^ [Deprecated] Use 'useRef' instead.

  return ref;
}
```

```tsx
import { useRef } from "react";

// 🟢 Recommended: Use useRef inside a custom Hook
function useInputRef() {
  const ref = useRef<HTMLInputElement>(null);

  return ref;
}
```

### Using createRef in class components [#using-createref-in-class-components]

`createRef` can still be used in class components, which is the intended use of this API.

```tsx
import React, { createRef } from "react";

// 🔵 OK: Using createRef in a class component is the intended use
class MyComponent extends React.Component {
  inputRef = createRef();
  // ...
}
```

### Using createRef outside components and Hooks [#using-createref-outside-components-and-hooks]

Calls outside of function components and Hooks are not reported, since `useRef` cannot be used there.

```tsx
import { createRef } from "react";

// 🔵 OK: Module top-level is not a function component or Hook
const ref = createRef<HTMLDivElement>();

// 🔵 OK: Plain utility functions are not function components or Hooks
function createRefHolder() {
  return createRef();
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.8.7] - 2026-05-29">
    ### Changed [#changed]

    * Reworked detection to only report `createRef` calls located inside a function component or a Hook, using the function component and Hook collectors (consistent with the `error-boundaries` rule). Calls at module top-level or inside plain utility functions are no longer reported.

    ### Added [#added]

    * Expanded test coverage: namespace `React.createRef()` calls, custom Hooks (function and arrow form), multiple calls within a single component, nested helper functions inside a component, and additional non-reporting cases (module top-level and plain utility functions).
  </Accordion>

  <Accordion title="[1.10.0] - 2024-08-11">
    ### Changed [#changed-1]

    * Optimized rule implementation to be smaller and faster.
  </Accordion>

  <Accordion title="[1.5.28] - 2024-07-20">
    ### Changed [#changed-2]

    * Optimized rule performance.
  </Accordion>

  <Accordion title="[0.10.4] - 2024-01-06">
    ### Fixed [#fixed]

    * Fixed issue where the same kind of error inside a component was only reported once.
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Added [#added-1]

    * Initial release of the `no-create-ref` rule. (#50)
    * Reports usage of `createRef` in function components and recommends using `useRef` instead.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-create-ref/no-create-ref.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-create-ref/no-create-ref.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-create-ref/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `useRef`](https://react.dev/reference/react/useRef)
* [Legacy React APIs: `createRef`](https://react.dev/reference/react/createRef)

***

## See Also [#see-also]

* [`react-naming-convention/ref-name`](./naming-convention-ref-name)\
  Enforces identifier names assigned from `useRef` calls to be either `ref` or end with `Ref`.
* [`react-x/no-forward-ref`](./no-forward-ref)\
  Replaces usage of `forwardRef` with passing `ref` as a prop.
* [`react-x/refs`](./refs)\
  Validates correct usage of refs by checking that `ref.current` is not read or written during render.


# no-direct-mutation-state (/docs/rules/no-direct-mutation-state)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-direct-mutation-state
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-direct-mutation-state
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Never mutate `this.state` directly, as calling `setState()` afterward may replace the mutation you made. Treat `this.state` as if it were immutable.

The only place it's acceptable to assign `this.state` is in a class component's `constructor`.

## Examples [#examples]

### Mutating this.state directly in an event handler [#mutating-thisstate-directly-in-an-event-handler]

Mutating `this.state` directly does not trigger a re-render, and a subsequent `setState` may overwrite the change.

```tsx
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  foo: string;
}

// 🔴 Problem: Assigning to this.state directly
class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  state = {
    foo: "bar",
  };

  render() {
    return (
      <div
        onClick={() => {
          this.state.foo = "baz";
          //   ^^^ Do not mutate state directly. Use 'setState()' instead.
        }}
      >
        {this.state.foo}
      </div>
    );
  }
}
```

```tsx
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  foo: string;
}

// 🟢 Recommended: Update state via setState
class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  state = {
    foo: "bar",
  };

  render() {
    return (
      <div
        onClick={() => {
          this.setState({ foo: "baz" });
        }}
      >
        {this.state.foo}
      </div>
    );
  }
}
```

### Mutating state in function components [#mutating-state-in-function-components]

Directly mutating a state object or array in a function component does not trigger a re-render and breaks React's state management.

```tsx
// 🔴 Problem: Mutating a state object directly instead of using the setter
import { useState } from "react";

function UserProfile() {
  const [user, setUser] = useState({ name: "Taylor", age: 25 });

  function handleClick() {
    user.age = user.age + 1; // Mutates state directly — won't re-render!
  }

  return (
    <button onClick={handleClick}>
      {user.name} is {user.age} years old
    </button>
  );
}
```

```tsx
// 🟢 Recommended: Always use the setter function with a new object
import { useState } from "react";

function UserProfile() {
  const [user, setUser] = useState({ name: "Taylor", age: 25 });

  function handleClick() {
    setUser({ ...user, age: user.age + 1 });
  }

  return (
    <button onClick={handleClick}>
      {user.name} is {user.age} years old
    </button>
  );
}
```

### Mutating arrays in state [#mutating-arrays-in-state]

Directly mutating an array in state (for example, with `push`, `pop`, or direct index assignment) does not trigger a re-render. Use immutable array methods instead.

```tsx
// 🔴 Problem: Mutating a state array directly
import { useState } from "react";

function TodoList() {
  const [todos, setTodos] = useState(["Buy milk", "Walk the dog"]);

  function handleAdd() {
    todos.push("New task"); // Mutates state directly — won't re-render!
  }

  return (
    <>
      <ul>{todos.map((todo) => <li key={todo}>{todo}</li>)}</ul>
      <button onClick={handleAdd}>Add task</button>
    </>
  );
}
```

```tsx
// 🟢 Recommended: Use immutable array methods like concat or the spread syntax
import { useState } from "react";

function TodoList() {
  const [todos, setTodos] = useState(["Buy milk", "Walk the dog"]);

  function handleAdd() {
    setTodos([...todos, "New task"]);
  }

  function handleRemove(index: number) {
    setTodos(todos.filter((_, i) => i !== index));
  }

  return (
    <>
      <ul>
        {todos.map((todo, index) => (
          <li key={todo}>
            {todo}{" "}
            <button onClick={() => handleRemove(index)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={handleAdd}>Add task</button>
    </>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.8.9] - 2026-06-01">
    ### Fixed [#fixed]

    * Fixed `isAssignmentToThisState` helper to correctly detect nested state mutations (e.g. `this.state.foo = "baz"`) and TypeScript-wrapped expressions (e.g. `(this.state as any).foo = "baz"`). Previously, only whole-state assignments (`this.state = X`) were detected.
  </Accordion>

  <Accordion title="[0.10.10] - 2024-01-14">
    ### Changed [#changed]

    * Improved detection to support checking for more cases.
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Added [#added]

    * Initial release of the `no-direct-mutation-state` rule. (#203)
    * Detects direct mutation of `this.state` in class components, which should always be treated as immutable.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state/no-direct-mutation-state.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state/no-direct-mutation-state.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `setState`](https://react.dev/reference/react/Component#setstate)
* [React Docs: Updating objects in state](https://react.dev/learn/updating-objects-in-state)
* [React Docs: Updating arrays in state](https://react.dev/learn/updating-arrays-in-state)

***

## See Also [#see-also]

* [`react-x/no-access-state-in-setstate`](./no-access-state-in-setstate)\
  Disallows accessing `this.state` inside `setState` calls.


# no-duplicate-key (/docs/rules/no-duplicate-key)





<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-duplicate-key
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-duplicate-key
```

**Features**

`🧪`

## Rule Details [#rule-details]

React uses keys to identify elements in an array. If two elements have the same key, React will not be able to distinguish them. This can lead to issues with state and rendering.

## Examples [#examples]

### Returning sibling elements with duplicate keys in an array [#returning-sibling-elements-with-duplicate-keys-in-an-array]

When multiple elements in an array use the same `key`, React cannot distinguish them correctly.

```tsx
// 🔴 Problem: Duplicate keys on sibling elements in an array
function MyComponent () {
  return [
    <li key="1">Item 1</li>
    <li key="1">Item 2</li>
  ]
};
```

```tsx
// 🟢 Recommended: Assign a unique key to each sibling element
function MyComponent () {
  return [
    <li key="1">Item 1</li>
    <li key="2">Item 2</li>
  ]
};
```

### Writing sibling elements with duplicate keys in JSX [#writing-sibling-elements-with-duplicate-keys-in-jsx]

Sibling elements written directly in JSX with the same key will also cause React identification issues.

```tsx
// 🔴 Problem: Duplicate keys on sibling elements in JSX
function MyComponent() {
  return (
    <ul>
      <li key="1">Item 1</li>
      <li key="1">Item 2</li>
    </ul>
  );
}
```

```tsx
// 🟢 Recommended: Ensure keys are unique among sibling elements
function MyComponent() {
  return (
    <ul>
      <li key="1">Item 1</li>
      <li key="2">Item 2</li>
    </ul>
  );
}
```

### Using a fixed key value in a map loop [#using-a-fixed-key-value-in-a-map-loop]

Using a fixed string as a key in loops like `map` causes every iteration to produce elements with the same key.

```tsx
// 🔴 Problem: All elements in a map loop use the same key
function MyComponent() {
  return (
    <ul>
      {["a", "b"].map((id) => <li key="1">{id}</li>)}
    </ul>
  );
}
```

```tsx
// 🟢 Recommended: Use a unique identifier from the data as the key
function MyComponent() {
  return (
    <ul>
      {["a", "b"].map((id) => <li key={id}>{id}</li>)}
    </ul>
  );
}
```

### Duplicate keys when rendering multiple lists side by side [#duplicate-keys-when-rendering-multiple-lists-side-by-side]

When two or more lists are rendered as siblings under the same parent element, using array indices as keys can produce duplicate key values.

```tsx
// 🔴 Problem: Two lists rendered side by side both use index keys
function App({ activeItems, archivedItems }) {
  return (
    <div>
      {activeItems.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
      {archivedItems.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </div>
  );
}
```

```tsx
// 🟢 Recommended: Use unique identifiers from the data
function App({ activeItems, archivedItems }) {
  return (
    <div>
      {activeItems.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
      {archivedItems.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[2.5.5] - 2026-01-12">
    ### Changed [#changed-2]

    * Removed rule from recommended configs and updated documentation.
  </Accordion>

  <Accordion title="[1.27.0] - 2025-02-21">
    ### Changed [#changed-3]

    * Changed severity of `no-duplicate-key` rule from `error` to `warn`. (#939)
  </Accordion>

  <Accordion title="[1.22.2] - 2024-12-30">
    ### Fixed [#fixed]

    * Corrected bind name from `ietr` to `iter`.

    ### Changed [#changed-4]

    * Re-implemented rule to improve its performance. (#891)
    * Added support for TypeScript's `as`, `satisfies`, and non-null assertion operator.
    * Skip processing when no `key=` attribute is present.
  </Accordion>

  <Accordion title="[1.12.3] - 2024-08-29">
    ### Fixed [#fixed-1]

    * Fixed false positives when the key is a variable. Closes #746.
  </Accordion>

  <Accordion title="[1.12.2] - 2024-08-27">
    ### Changed [#changed-5]

    * Improved performance of key comparison.
  </Accordion>

  <Accordion title="[0.10.1] - 2023-12-27">
    ### Fixed [#fixed-2]

    * Fixed key prop's value in error message.
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Added [#added]

    * Initial release of the `no-duplicate-key` rule.
    * Reports duplicate key props in JSX elements.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key/no-duplicate-key.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key/no-duplicate-key.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
* [React Docs: Rendering Lists](https://react.dev/learn/rendering-lists)

***

## See Also [#see-also]

* [`react-x/no-array-index-key`](./no-array-index-key)\
  Disallows using an item's index in the array as its key.
* [`react-x/no-implicit-key`](./no-implicit-key)\
  Prevents implicitly passing the `key` prop to components.
* [`react-x/no-missing-key`](./no-missing-key)\
  Disallows missing `key` on items in list rendering.


# no-forward-ref (/docs/rules/no-forward-ref)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-forward-ref
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-forward-ref
```

**Features**

`🔄`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead.

`forwardRef` will be deprecated in a future release. Learn more [here](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop).

## Examples [#examples]

### Wrapping function components with forwardRef [#wrapping-function-components-with-forwardref]

Starting from React 19, you can pass `ref` as a regular prop directly, without using `forwardRef`.

```tsx
import React, { forwardRef } from "react";

// 🔴 Problem: Using forwardRef to pass ref
const MyInput = forwardRef(function MyInput(props, ref) {
  return <input ref={ref} {...props} />;
});
```

```tsx
// 🟢 Recommended: Receive ref as a regular prop
function MyInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}
```

### Using typed React.forwardRef [#using-typed-reactforwardref]

Even with TypeScript generics, `forwardRef` can be replaced with a simpler props-based approach.

```tsx
import React from "react";

interface MyInputProps {
  value: string;
  onChange: (value: string) => void;
}

// 🔴 Problem: Using React.forwardRef with generic parameters
const MyInput = React.forwardRef<MyInputProps, HTMLInputElement>(
  function MyInput({ value, onChange }, ref) {
    return (
      <input
        ref={ref}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    );
  },
);
```

```tsx
import React from "react";

interface MyInputProps {
  value: string;
  onChange: (value: string) => void;
}

// 🟢 Recommended: Declare ref directly in the props type
function MyInput({
  ref,
  value,
  onChange,
}: MyInputProps & { ref?: React.RefObject<HTMLInputElement> | null }) {
  return <input ref={ref} value={value} onChange={(e) => onChange(e.target.value)} />;
}
```

### Passing ref through a component tree in React 19 [#passing-ref-through-a-component-tree-in-react-19]

In React 19, `ref` can be passed like any other prop, making it easy to forward refs through intermediate components without `forwardRef`.

```tsx
// 🟢 Recommended: Pass ref as a regular prop through multiple layers
import { useRef } from "react";

function MyInput({ ref, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}

function FormField({ ref, label, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { ref?: React.Ref<HTMLInputElement>; label: string }) {
  return (
    <label>
      {label}
      <MyInput ref={ref} {...props} />
    </label>
  );
}

export default function Form() {
  const ref = useRef<HTMLInputElement>(null);

  function handleClick() {
    ref.current?.focus();
  }

  return (
    <form>
      <FormField label="Enter your name:" ref={ref} placeholder="Name" />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.6.0] - 2026-04-29">
    ### Fixed [#fixed]

    * Fixed type expression handling by unwrapping type expressions before inspecting AST node types. (#1732)
  </Accordion>

  <Accordion title="[1.52.5] - 2025-06-11">
    ### Fixed [#fixed-1]

    * Refactored `is-from-react` utility and improved auto-fix handling. Closes #1172. (#1173)
  </Accordion>

  <Accordion title="[1.25.0] - 2025-01-27">
    ### Fixed [#fixed-2]

    * Fixed loose auto-fix behavior. (#925)
  </Accordion>

  <Accordion title="[1.19.0] - 2024-12-16">
    ### Added [#added]

    * Added auto-fix support to convert `forwardRef` patterns to regular components. (#874)
    * Added destructuring props support for more accurate detection. (#875)

    ### Changed [#changed]

    * Improved rule performance.
  </Accordion>

  <Accordion title="[1.18.0] - 2024-12-10">
    ### Added [#added-1]

    * Initial release of the `no-forward-ref` rule. (#870)
    * Reports usage of `forwardRef` and recommends passing `ref` as a regular prop, as supported in React 19.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-forward-ref/no-forward-ref.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-forward-ref/no-forward-ref.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-forward-ref/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `ref` as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop)
* [React Docs: `forwardRef`](https://react.dev/reference/react/forwardRef)


# no-implicit-children (/docs/rules/no-implicit-children)



<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-implicit-children
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-implicit-children
```

**Features**

`💭` `🧪`

## Rule Details [#rule-details]

This makes it hard to see whether the children was passed correctly to the element or where it came from.

The following cases are **allowed** and will not be reported:

1. The `children` property originates from React's own type definitions (ex: `React.DOMAttributes.children`, `React.PropsWithChildren.children`), such as when spreading `React.ComponentProps<"div">`, `React.HTMLAttributes<T>`, `React.PropsWithChildren<T>`, or similar React-provided types.
2. The `children` property's **type** is a React-defined children type alias, such as `React.ReactNode`, `React.ReactElement`, `React.ReactPortal`, or `JSX.Element`, even if the property is declared in a user-defined type.

## Examples [#examples]

### Implicitly passing children via the spread operator [#implicitly-passing-children-via-the-spread-operator]

Spreading an object that contains `children` directly onto a component makes the source of `children` unclear.

```tsx
import React from "react";

declare let someValues: { id: string; className: string; children: string };

// 🔴 Problem: Implicitly passing children when spreading an object
function MyComponent() {
  return <div {...someValues} />;
}
```

```tsx
import React from "react";

declare let someValues: { id: string; className: string; children: string };

// 🟢 Recommended: Explicitly destructure and pass children
function MyComponent() {
  const { children, ...rest } = someValues;
  return <div {...rest}>{children}</div>;
}
```

### children type is a React built-in type [#children-type-is-a-react-built-in-type]

When the `children` type is a React built-in children type alias, spreading is allowed.

```tsx
import React from "react";

declare let someValues: { id: string; className: string; children: React.ReactNode };

// 🔵 OK: children type is React.ReactNode, which is a React built-in type alias
function MyComponent() {
  return <div {...someValues} data-slot="my-component" />;
}
```

### Spreading React built-in component props [#spreading-react-built-in-component-props]

When spreading props from React built-in types (such as `React.ComponentProps`), the `children` originates from React's type definitions and is allowed.

```tsx
import React from "react";

// 🔵 OK: props come from React.ComponentProps, children originates from React.DOMAttributes
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />;
}
```

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-children/no-implicit-children.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-children/no-implicit-children.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-children/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component)

***

## See Also [#see-also]

* [`react-x/no-implicit-key`](./no-implicit-key)\
  Prevents implicitly passing the `key` prop to components.
* [`react-x/no-implicit-ref`](./no-implicit-ref)\
  Prevents implicitly passing the `ref` prop to components.


# no-implicit-key (/docs/rules/no-implicit-key)





<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-implicit-key
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-implicit-key
```

**Features**

`💭` `🧪`

## Rule Details [#rule-details]

This makes it hard to see whether the key was passed correctly to the element or where it came from.

It is also proposed to be deprecated in this RFC: [Deprecate spreading key from objects](https://github.com/reactjs/rfcs/pull/107#issue-413235149).

The following cases are **allowed** and will not be reported:

1. The `key` property originates from React's own type definitions (ex: `React.Attributes.key`), such as when spreading `React.ComponentProps<"div">`, `React.HTMLAttributes<T>`, or similar React-provided types.
2. The `key` property's **type** is `React.Key`, even if the property is declared in a user-defined type.

## Examples [#examples]

### Implicitly passing key via the spread operator [#implicitly-passing-key-via-the-spread-operator]

Spreading an object that contains `key` directly onto a component makes the source and purpose of `key` unclear.

```tsx
import React from "react";

declare let someValues: { foo: string; bar: string; key: string };

// 🔴 Problem: Implicitly passing key when spreading an object
function MyComponent() {
  return <div {...someValues} />;
}
```

```tsx
import React from "react";

declare let someValues: { id: string; className: string; key: string };

// 🟢 Recommended: Explicitly destructure and pass key
function MyComponent() {
  const { key, ...rest } = someValues;
  return <div key={key} {...rest} />;
}
```

### key type is React.Key [#key-type-is-reactkey]

When the `key` type is the React built-in `React.Key`, spreading is allowed.

```tsx
import React from "react";

declare let someValues: { id: string; className: string; key: React.Key };

// 🔵 OK: key type is React.Key, which is a React built-in type
function MyComponent() {
  return <div {...someValues} data-slot="pagination-item" />;
}
```

### Spreading React built-in component props [#spreading-react-built-in-component-props]

When spreading props from React built-in types (such as `React.ComponentProps`), the `key` originates from React's type definitions and is allowed.

```tsx
import React from "react";

// 🔵 OK: props come from React.ComponentProps, key originates from React.Attributes
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[2.12.1] - 2026-02-08">
    ### Fixed [#fixed]

    * Check all union constituents and allow all types under `React` namespace. (#1487)
  </Accordion>

  <Accordion title="[2.10.0] - 2026-02-05">
    ### Changed [#changed]

    * Refactored rule to use type checking. (#1466)
    * Moved rule from `recommended` to `type-checked` presets.
  </Accordion>

  <Accordion title="[1.6.0] - 2024-07-27">
    ### Changed [#changed-1]

    * Undeprecated rule and improved its usefulness.
  </Accordion>

  <Accordion title="[1.5.11] - 2024-05-08">
    ### Changed [#changed-2]

    * Deprecated rule because it is stylistic and opinionated.
  </Accordion>

  <Accordion title="[1.5.0] - 2024-01-29">
    ### Changed [#changed-3]

    * Renamed rule from `no-spreading-key` to `no-implicit-key`.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-spreading-key` rule. (#74)
    * Reports spreading a `key` prop onto JSX elements.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-key/no-implicit-key.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-key/no-implicit-key.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-key/CHANGELOG.md)

## Further Reading [#further-reading]

* [React RFC: Deprecate spreading key from objects](https://github.com/reactjs/rfcs/pull/107)
* [React Docs: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)

***

## See Also [#see-also]

* [`react-x/no-implicit-children`](./no-implicit-children)\
  Prevents implicitly passing the `children` prop to components.
* [`react-x/no-implicit-ref`](./no-implicit-ref)\
  Prevents implicitly passing the `ref` prop to components.


# no-implicit-ref (/docs/rules/no-implicit-ref)



<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-implicit-ref
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-implicit-ref
```

**Features**

`💭` `🧪`

## Rule Details [#rule-details]

This makes it hard to see whether the ref was passed correctly to the element or where it came from.

The following cases are **allowed** and will not be reported:

1. The `ref` property originates from React's own type definitions (ex: `React.ClassAttributes.ref`), such as when spreading `React.ComponentProps<"div">`, `React.HTMLAttributes<T>`, or similar React-provided types.
2. The `ref` property's **type** is a React-defined ref type alias, such as `React.Ref`, `React.RefObject`, `React.RefCallback`, or `React.LegacyRef`, even if the property is declared in a user-defined type.

## Examples [#examples]

### Implicitly passing ref via the spread operator [#implicitly-passing-ref-via-the-spread-operator]

Spreading an object that contains `ref` directly onto a component makes the source and target of `ref` unclear.

```tsx
import React from "react";

declare let someValues: { id: string; className: string; ref: null };

// 🔴 Problem: Implicitly passing ref when spreading an object
function MyComponent() {
  return <div {...someValues} />;
}
```

```tsx
import React from "react";

declare let someValues: { id: string; className: string; ref: null };

// 🟢 Recommended: Explicitly destructure and pass ref
function MyComponent() {
  const { ref, ...rest } = someValues;
  return <div ref={ref} {...rest} />;
}
```

### ref type is a React built-in ref type [#ref-type-is-a-react-built-in-ref-type]

When the `ref` type is a React built-in ref type alias, spreading is allowed.

```tsx
import React from "react";

declare let someValues: { id: string; className: string; ref: React.Ref<HTMLDivElement> };

// 🔵 OK: ref type is React.Ref, which is a React built-in type alias
function MyComponent() {
  return <div {...someValues} data-slot="pagination-item" />;
}
```

### Spreading React built-in component props [#spreading-react-built-in-component-props]

When spreading props from React built-in types (such as `React.ComponentProps`), the `ref` originates from React's type definitions and is allowed.

```tsx
import React from "react";

// 🔵 OK: props come from React.ComponentProps, ref originates from React.ClassAttributes
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />;
}
```

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-ref/no-implicit-ref.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-ref/no-implicit-ref.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-implicit-ref/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Manipulating the DOM with Refs](https://react.dev/learn/manipulating-the-dom-with-refs)

***

## See Also [#see-also]

* [`react-x/no-implicit-children`](./no-implicit-children)\
  Prevents implicitly passing the `children` prop to components.
* [`react-x/no-implicit-key`](./no-implicit-key)\
  Prevents implicitly passing the `key` prop to components.


# no-leaked-conditional-rendering (/docs/rules/no-leaked-conditional-rendering)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-leaked-conditional-rendering
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-leaked-conditional-rendering
```

**Features**

`💭`

**Presets**

`recommended-type-checked`
`strict-type-checked`

## Rule Details [#rule-details]

Using the `&&` operator to render an element conditionally in JSX can cause unexpected values to be rendered or even crash the rendering.

## Examples [#examples]

### Using a number directly as a condition [#using-a-number-directly-as-a-condition]

```tsx
// 🔴 Problem: When count is 0, 0 will be rendered directly on the page
interface MyComponentProps {
  count: number;
}

function MyComponent({ count }: MyComponentProps) {
  return <div>{count && <span>There are {count} results</span>}</div>;
  //           ^^^ Potential leaked value 'count' that might cause unintentionally rendered values or rendering crashes.
}
```

```tsx
// 🟢 Recommended: Use a comparison expression or ternary operator to ensure only boolean evaluation results are rendered
interface MyComponentProps {
  count: number;
}

function MyComponent({ count }: MyComponentProps) {
  return <div>{count > 0 && <span>There are {count} results</span>}</div>;
}
```

### Using array length as a condition [#using-array-length-as-a-condition]

```tsx
// 🔴 Problem: When items.length is 0, 0 may leak into the DOM
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{items.length && <List items={items} />}</div>;
  //           ^^^ Potential leaked value 'items.length' that might cause unintentionally rendered values or rendering crashes.
}
```

```tsx
// 🟢 Recommended: Use !!, Boolean(), or a comparison expression to avoid leaking
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{!!items.length && <List items={items} />}</div>;
}
```

```tsx
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{Boolean(items.length) && <List items={items} />}</div>;
}
```

```tsx
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{items.length > 0 && <List items={items} />}</div>;
}
```

```tsx
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{items.length ? <List items={items} /> : null}</div>;
}
```

```tsx
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{items.length ? <List items={items} /> : <EmptyList />}</div>;
}
```

### Using an array element as a condition [#using-an-array-element-as-a-condition]

```tsx
// 🔴 Problem: When items\[0] is an empty string or 0, that value may be rendered unexpectedly
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{items[0] && <List items={items} />}</div>;
  //           ^^^ Potential leaked value 'items[0]' that might cause unintentionally rendered values or rendering crashes.
}
```

### Using a logical OR expression as a condition [#using-a-logical-or-expression-as-a-condition]

```tsx
// 🔴 Problem: (numberA || numberB) may return 0 or another falsy value and leak onto the page
interface MyComponentProps {
  numberA: number;
  numberB: number;
}

function MyComponent({ numberA, numberB }: MyComponentProps) {
  return (
    <div>{(numberA || numberB) && <Results>{numberA + numberB}</Results>}</div>
    //    ^^^ Potential leaked value '(numberA || numberB)' that might cause unintentionally rendered values or rendering crashes.
  );
}
```

### Using negation for conditional rendering [#using-negation-for-conditional-rendering]

```tsx
// 🔵 OK: When the condition expression explicitly produces a boolean result, no value will leak
interface MyComponentProps {
  items: string[];
  count: number;
}

function MyComponent({ items, count }: MyComponentProps) {
  return <div>{!count && "No results found"}</div>;
}
```

### Rendering arrays or strings directly [#rendering-arrays-or-strings-directly]

```tsx
// 🔵 OK: Directly rendering values known to be React nodes does not require conditional checks
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>{items}</div>;
}
```

```tsx
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items }: MyComponentProps) {
  return <div>There are {items.length} items</div>;
}
```

### Using a default value fallback [#using-a-default-value-fallback]

```tsx
// 🔵 OK: Using `||` to provide a fallback value is a common default-value pattern, not conditional rendering
interface MyComponentProps {
  customTitle: string;
}

const defaultTitle = "Default Title";

function MyComponent({ customTitle }: MyComponentProps) {
  return <div>{customTitle || defaultTitle}</div>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[2.10.0] - 2025-02-05">
    ### Fixed [#fixed]

    * Added support for enum types in conditional rendering checks. Closes #1428. (#1429)
  </Accordion>

  <Accordion title="[1.47.3] - 2025-04-15">
    ### Fixed [#fixed-1]

    * Fixed potential false negatives when logical expressions are wrapped by type expressions. (#1068)
  </Accordion>

  <Accordion title="[1.16.2] - 2024-11-20">
    ### Fixed [#fixed-2]

    * Fixed rule not reporting empty strings in conditional rendering. Closes #853. (#857)
  </Accordion>

  <Accordion title="[1.10.0] - 2024-08-11">
    ### Added [#added]

    * Added BigInt literal support on the left side of logical expressions.
    * Added support for truthy number literals on the left side of logical expressions.

    ### Fixed [#fixed-3]

    * Fixed object types not being considered as valid left-hand types. Closes #568.
  </Accordion>

  <Accordion title="[0.10.1] - 2024-01-21">
    ### Fixed [#fixed-4]

    * Fixed handling of conditional expressions with same test and consequent. (#95)
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Changed [#changed]

    * Re-implemented rule to use type information for more accurate detection of leaked conditional rendering values. (#91)
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added-1]

    * Initial release of the `no-leaked-conditional-rendering` rule.
    * Reports leaked conditional rendering values that may render unexpectedly.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering/no-leaked-conditional-rendering.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering/no-leaked-conditional-rendering.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Conditional Rendering](https://react.dev/learn/conditional-rendering)


# no-missing-component-display-name (/docs/rules/no-missing-component-display-name)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-missing-component-display-name
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-missing-component-display-name
```

## Rule Details [#rule-details]

When defining a React component, if you specify its component name in a way that React can't infer its `displayName`, it will show up as an `anonymous` component in DevTools, which makes debugging more difficult.

## Examples [#examples]

### Wrapping an anonymous arrow function with React.memo [#wrapping-an-anonymous-arrow-function-with-reactmemo]

```tsx
// 🔴 Problem: React cannot infer displayName from an anonymous arrow function; it will show as anonymous in DevTools
import React from "react";

const Button = React.memo(() => <div />);
//                        ^^^ Add missing 'displayName' for component.
```

```tsx
// 🟢 Recommended: Use a named function or manually add displayName after assignment
import React from "react";

const Button = React.memo(function Button() {
  return <div />;
});
```

```tsx
import React from "react";

const Button = React.memo(() => <div />);
Button.displayName = "Button";
```

### Wrapping an anonymous arrow function with React.forwardRef [#wrapping-an-anonymous-arrow-function-with-reactforwardref]

```tsx
// 🔴 Problem: When forwardRef wraps an anonymous function, React cannot automatically infer the component name
import React from "react";

const Button = React.forwardRef(() => <div />);
//                              ^^^ Add missing 'displayName' for component.
```

```tsx
// 🟢 Recommended: Use a named function or manually set the displayName property
import React from "react";

const Button = React.forwardRef(function Button() {
  return <div />;
});
```

```tsx
import React from "react";

const Button = React.forwardRef(() => <div />);
Button.displayName = "Button";
```

### Default exporting an anonymous arrow function [#default-exporting-an-anonymous-arrow-function]

```tsx
// 🔴 Problem: When default-exporting an anonymous function, the component has no recognizable name in DevTools
import React from "react";

export default () => <div />;
//             ^^^ Add missing 'displayName' for component.
```

```tsx
// 🟢 Recommended: Change the default export to a named function declaration
import React from "react";

export default function Button() {
  return <div />;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added]

    * Initial release of the `no-missing-component-display-name` rule. Closes #107. (#170)
    * Reports components that are missing a `displayName` property.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name/no-missing-component-display-name.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name/no-missing-component-display-name.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-x/no-missing-context-display-name`](./no-missing-context-display-name)\
  Enforces that all contexts have a `displayName` that can be used in DevTools.


# no-missing-context-display-name (/docs/rules/no-missing-context-display-name)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-missing-context-display-name
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-missing-context-display-name
```

**Features**

`🔧`

## Rule Details [#rule-details]

Context `displayName` property is used by React DevTools to identify the context in the component tree. Without it, debugging becomes difficult as contexts appear as "Context" or "Context.Provider" without any distinguishing information.

## Examples [#examples]

### Creating a Context without setting displayName [#creating-a-context-without-setting-displayname]

```tsx
// 🔴 Problem: Different contexts cannot be distinguished in React DevTools, making debugging difficult
import React from "react";

const MyContext = React.createContext();
```

### Creating a Context and adding displayName [#creating-a-context-and-adding-displayname]

```tsx
// 🟢 Recommended: Assign displayName immediately after creating the Context so it can be identified in DevTools
import React from "react";

const MyContext = React.createContext();
MyContext.displayName = "MyContext";
```

### Creating a context with a default value and displayName [#creating-a-context-with-a-default-value-and-displayname]

When you create a context with a default value, always set `displayName` so that React DevTools can show a meaningful name for the context and its provider.

```tsx
// 🟢 Recommended: Create a context with a default value and displayName
import { createContext, useContext } from "react";

interface ThemeContextType {
  theme: "light" | "dark";
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType>({
  theme: "light",
  toggleTheme: () => {},
});
ThemeContext.displayName = "ThemeContext";

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.52.1] - 2025-06-11">
    ### Added [#added]

    * Added autofix support. (#1128)

    ### Fixed [#fixed]

    * Correctly handles semicolons in autofix. (#1130)
  </Accordion>

  <Accordion title="[1.27.0] - 2025-02-21">
    ### Added [#added-1]

    * Initial release of the `no-missing-context-display-name` rule. (#941)
    * Reports React contexts that are missing a `displayName` property.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name/no-missing-context-display-name.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name/no-missing-context-display-name.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-x/no-missing-component-display-name`](./no-missing-component-display-name)\
  Enforces that all components have a `displayName` that can be used in DevTools.


# no-missing-key (/docs/rules/no-missing-key)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-missing-key
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-missing-key
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

React needs keys to identify items in the list. If you don’t specify a key, React will use the array index as a key, which often leads to subtle and confusing bugs.

## Examples [#examples]

### Missing key in list rendering [#missing-key-in-list-rendering]

The rule checks the values produced by iterator callbacks of `map`, `flatMap`, and `Array.from`.

```tsx
// 🔴 Problem: When a key is missing, React uses the array index as the default key, which can lead to state mismatch or performance issues
interface MyComponentProps {
  items: { id: number; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((todo) => <Todo {...todo} />)}
    </ul>
  );
}
```

### Using a unique key in list rendering [#using-a-unique-key-in-list-rendering]

```tsx
// 🟢 Recommended: Provide a stable and unique key for each item in the list to help React correctly track element identity
interface MyComponentProps {
  items: { id: number; name: string }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((todo) => <Todo key={todo.id} {...todo} />)}
    </ul>
  );
}
```

### Missing key in conditionally rendered items [#missing-key-in-conditionally-rendered-items]

When a list item is rendered conditionally, every branch that produces an element needs a key. The rule checks all branches an item may evaluate to, including `? :`, `&&`, `||`, and `??` expressions.

```tsx
// 🔴 Problem: Each branch of the conditional produces a list item without a key
interface MyComponentProps {
  items: { id: number; name: string; pinned: boolean }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item) => (
        item.pinned
          ? <PinnedItem {...item} />
          : <Item {...item} />
      ))}
    </ul>
  );
}
```

```tsx
// 🟢 Recommended: Provide a key in every branch
interface MyComponentProps {
  items: { id: number; name: string; pinned: boolean }[];
}

function MyComponent({ items }: MyComponentProps) {
  return (
    <ul>
      {items.map((item) => (
        item.pinned
          ? <PinnedItem key={item.id} {...item} />
          : <Item key={item.id} {...item} />
      ))}
    </ul>
  );
}
```

### Missing key on elements in an array literal [#missing-key-on-elements-in-an-array-literal]

Elements placed directly in an array literal become list items just like elements returned from `map`, so each of them needs a key as well.

```tsx
// 🔴 Problem: Elements in an array literal are rendered as a list
function MyComponent() {
  return [
    <Header />,
    <Content />,
    <Footer />,
  ];
}
```

```tsx
// 🟢 Recommended: Give each element in the array a stable key
function MyComponent() {
  return [
    <Header key="header" />,
    <Content key="content" />,
    <Footer key="footer" />,
  ];
}
```

### Missing key when returning multiple elements per iteration [#missing-key-when-returning-multiple-elements-per-iteration]

When you map over data and return multiple sibling elements, wrapping them in `<></>` loses the ability to assign a key. You must use the explicit `Fragment` syntax.

```tsx
// 🔴 Problem: Fragment shorthand (<>) does not support keys
function Blog({ posts }) {
  return posts.map((post) => (
    <>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </>
  ));
}
```

```tsx
// 🟢 Recommended: Use explicit Fragment with a key
import { Fragment } from "react";

function Blog({ posts }) {
  return posts.map((post) => (
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  ));
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false negative where a computed identifier key in spread props (e.g. `items.map((item) => <li {...{ [key]: item.id }} />)`) was treated as the static `key` prop, suppressing the missing-key report. The actual property name is the runtime value of the variable; computed string literal keys (e.g. `{...{ ["key"]: item.id }}`) still count as providing `key`.
  </Accordion>

  <Accordion title="[5.8.18] - 2026-06-11">
    ### Fixed [#fixed-1]

    * Fixed checks being incorrectly resumed inside an outer `Children.toArray()` after a nested `Children.toArray()` call exits, by tracking nesting depth instead of a boolean flag.

    ### Added [#added]

    * Check `.flatMap()` callbacks in addition to `.map()` and `Array.from()`.
    * Check conditional (`? :`) and logical (`&&`, `||`, `??`) branches of elements in array literals.
  </Accordion>

  <Accordion title="[5.7.8] - 2026-05-14">
    ### Fixed [#fixed-2]

    * Fixed `no-missing-key` not detecting `ConditionalExpression`/`LogicalExpression` returned from block-bodied `.map`/`Array.from` callbacks. Closes #1766.
    * `no-missing-key` now reports both branches of a `ConditionalExpression`/`LogicalExpression` when both lack a `key`, instead of only the first.
  </Accordion>

  <Accordion title="[2.7.0] - 2026-01-16">
    ### Fixed [#fixed-3]

    * Fixed `no-missing-key` misdetecting non-map calls as map calls since v2.6.4. Closes #1412. (#1413)
  </Accordion>

  <Accordion title="[1.12.2] - 2024-08-27">
    ### Changed [#changed]

    * Improved the performance of the `no-missing-key` rule.
  </Accordion>

  <Accordion title="[0.9.0] - 2023-12-01">
    ### Added [#added-1]

    * Initial release of the `no-missing-key` rule.
    * Reports missing key props in iterators and array methods used in JSX.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-key/no-missing-key.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-key/no-missing-key.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-missing-key/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
* [React Docs: Rendering Lists](https://react.dev/learn/rendering-lists)

***

## See Also [#see-also]

* [`react-x/no-array-index-key`](./no-array-index-key)\
  Disallows using an item's index in the array as its key.
* [`react-x/no-duplicate-key`](./no-duplicate-key)\
  Prevents duplicate `key` props on sibling elements when rendering lists.
* [`react-x/no-implicit-key`](./no-implicit-key)\
  Prevents implicitly passing the `key` prop to components.


# no-misused-capture-owner-stack (/docs/rules/no-misused-capture-owner-stack)





<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-misused-capture-owner-stack
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-misused-capture-owner-stack
```

**Features**

`🧪`

**Presets**

`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

`captureOwnerStack` is only available in development builds of React and must be:

1. Imported via a namespace to avoid direct named imports.
2. Conditionally accessed within an `if (process.env.NODE_ENV !== 'production') { ... }` block to prevent execution in production environments.
3. Called inside a React-controlled function (**not implemented yet**).

## Examples [#examples]

### Directly importing captureOwnerStack as a named import [#directly-importing-captureownerstack-as-a-named-import]

```tsx
// 🔴 Problem: Named imports may cause errors when bundled for production; use a namespace import instead
// Failing: Using a named import directly
import { captureOwnerStack } from "react";
//       ^^^ Don't use named imports of `captureOwnerStack` in files that are bundled for development and production. Use a namespace import instead.

if (process.env.NODE_ENV !== "production") {
  const ownerStack = React.captureOwnerStack();
  console.log("Owner Stack", ownerStack);
}
```

### Calling directly without an environment check [#calling-directly-without-an-environment-check]

```tsx
// 🔴 Problem: captureOwnerStack is only available in development builds; calling it directly in production will cause errors
// Failing: Missing environment check
import * as React from "react";

const ownerStack = React.captureOwnerStack();
//                 ^^^ `captureOwnerStack` should only be used in development builds. Use an environment check to ensure it is not executed in production.
console.log(ownerStack);
```

### Correctly using a namespace import with an environment check [#correctly-using-a-namespace-import-with-an-environment-check]

```tsx
// 🟢 Recommended: Import via a namespace and call inside a non-production environment block
// Passing: Correct namespace import with environment check
import * as React from "react";

if (process.env.NODE_ENV !== "production") {
  const ownerStack = React.captureOwnerStack();
  console.log("Owner Stack", ownerStack);
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.10.4] - 2026-07-04">
    ### Fixed [#fixed]

    * Fixed `process.env.NODE_ENV` checks wrapped in TypeScript type expressions (e.g. `(process.env as any).NODE_ENV`) not being recognized. (#1813)
  </Accordion>

  <Accordion title="[1.45.0] - 2025-04-11">
    ### Added [#added]

    * Initial release of the `no-misused-capture-owner-stack` rule. (#1047)
    * Detects misuse of the `captureOwnerStack` API and related internal debugging utilities that should not be used in production code.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-misused-capture-owner-stack/no-misused-capture-owner-stack.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-misused-capture-owner-stack/no-misused-capture-owner-stack.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-misused-capture-owner-stack/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `captureOwnerStack`](https://react.dev/reference/react/captureOwnerStack)
  * [The owner stack is `null`](https://react.dev/reference/react/captureOwnerStack#the-owner-stack-is-null)
  * [`captureOwnerStack` is not available](https://react.dev/reference/react/captureOwnerStack#captureownerstack-is-not-available)


# no-nested-component-definitions (/docs/rules/no-nested-component-definitions)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-nested-component-definitions
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-nested-component-definitions
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Component definitions inside other components cause them to be recreated on every render, which can lead to performance issues and unexpected behavior.

When a component is defined inside another component:

* It gets recreated on every render of the parent component
* It loses its internal state when the parent re-renders
* It defeats prop memoization and optimization techniques
* It creates new function references on every render

React is responsible for rendering components when necessary to optimize the user experience. It is declarative: you tell React what to render in your component's logic, and React will figure out how best to display it to your user. Components should only be used in JSX. Don't call them as regular functions — React should call them.

Instead, define every component at the top level.

## Examples [#examples]

### Nesting a child component definition inside another component [#nesting-a-child-component-definition-inside-another-component]

```tsx
// 🔴 Problem: Profile is recreated on every render of Gallery, causing child component state loss and preventing memo optimization
function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    /* ... */
  }
  // ...
}
```

### Defining components at the top level of the module and passing data via props [#defining-components-at-the-top-level-of-the-module-and-passing-data-via-props]

```tsx
// 🟢 Recommended: Define all components at the top level; pass data via props when needed
// 🟢 Declare components at the top level
function Gallery() {
  // ...
}
function Profile() {
  /* ... */
}
```

When a child component needs data from a parent, [pass it by props](https://react.dev/learn/passing-props-to-a-component) instead of nesting definitions.

### Calling components as regular functions [#calling-components-as-regular-functions]

Components should only be used in JSX. Don't call them as regular functions. React must decide when your component function is called during rendering. In React, you do this using JSX.

```tsx
// 🔴 Problem: calling a component as a regular function
function BlogPost() {
  return <Layout>{Article()}</Layout>;
  //                        ^^^ Never call component functions directly.
}
```

```tsx
// 🟢 Recommended: use components in JSX
function BlogPost() {
  return (
    <Layout>
      <Article />
    </Layout>
  );
}
```

If a component contains Hooks, calling it directly can easily violate the Rules of Hooks when called in a loop or conditionally. Letting React orchestrate rendering also allows components to participate in reconciliation, enables local state through Hooks, and allows React to skip over components that don't need re-rendering.

## Versions [#versions]

<Accordions>
  <Accordion title="[5.18.3] - 2026-08-06">
    ### Changed [#changed]

    * Narrowed the `with*` HOC detection in the fallback name resolution to well-known wrappers only: react-router v5's `withRouter`, Formik's `withFormik`, and recompose's `withProps`, `withState`, `withHandlers` and `withLifecycle`. Custom HOCs following the `with*` naming convention are no longer treated as component wrappers.
  </Accordion>

  <Accordion title="[5.18.2] - 2026-08-05">
    ### Fixed [#fixed]

    * Fixed a regression where nested components wrapped in `useCallback` (e.g. `const C = useCallback(() => <div />, []);` inside another component) were no longer reported. The rule now falls back to resolving the component name through the wrapping call chain up to the enclosing variable declarator when the collector could not name the component. Closes #1927. (#1927)
    * Excluded array method callbacks from being misreported in list rendering patterns: `flatMap` callbacks are excluded from component detection via the existing `DoNotIncludeFunctionDefinedAsArrayFlatMapCallback` hint, and the fallback name resolution only unwraps well-known component wrappers, so member calls on data objects (e.g. `Array.from`, `items.forEach`, `items.reduce`) are never treated as component wrappers. (#1927)
    * Extended the fallback name resolution to well-known component wrappers beyond `memo`/`forwardRef`/`useCallback`: `observer`, react-redux's `connect`, Relay's `create*Container` helpers, Apollo's `graphql`, and HOCs following the `with*` naming convention (recompose, `withRouter`, `withFormik`, and custom HOCs), including curried forms like `connect(...)(Component)`. (#1927)
  </Accordion>

  <Accordion title="[1.38.0] - 2025-03-25">
    ### Changed [#changed-1]

    * Enhanced error messages with more descriptive reporting. (#1014)
  </Accordion>

  <Accordion title="[1.36.1] - 2025-03-19">
    ### Fixed [#fixed-1]

    * Minor fixes and improvements in detection logic.
  </Accordion>

  <Accordion title="[1.34.0] - 2025-03-14">
    ### Changed [#changed-2]

    * Renamed from `no-nested-components` to `no-nested-component-definitions` for clearer intent. (#990)
  </Accordion>

  <Accordion title="[1.10.0] - 2024-08-11">
    ### Added [#added]

    * Initial release of the rule as `no-nested-components`.
    * Detects component definitions nested inside other components or functions, which can cause unexpected unmounting/remounting and state loss.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-nested-component-definitions/no-nested-component-definitions.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-nested-component-definitions/no-nested-component-definitions.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-nested-component-definitions/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `static-components` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components)
* [React Docs: React calls Components and Hooks](https://react.dev/reference/rules/react-calls-components-and-hooks)

***

## See Also [#see-also]

* [`react-x/no-nested-lazy-component-declarations`](./no-nested-lazy-component-declarations)\
  Disallows nesting lazy component declarations inside other components or hooks.
* [`react-x/static-components`](./static-components)\
  Validates that components are static, not recreated every render.


# no-nested-lazy-component-declarations (/docs/rules/no-nested-lazy-component-declarations)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-nested-lazy-component-declarations
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-nested-lazy-component-declarations
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Lazy component declarations inside other components cause them to be recreated on every render, which can lead to performance issues and unexpected behavior.

When a lazy component is declared inside another component:

* It gets recreated on every render of the parent component
* It loses its internal state when the parent re-renders
* It defeats props memoization and optimization techniques
* It creates new function references on every render

Just like regular components, lazy components should be declared at the top level of your module so that React can properly track their identity across renders. When a lazy component is recreated, React treats it as a different component type, causing the old one to unmount and the new one to mount — discarding all state and DOM nodes in the process.

## Examples [#examples]

### Declaring lazy components inside a component [#declaring-lazy-components-inside-a-component]

```tsx
// 🔴 Problem: Declaring MarkdownPreview inside Editor causes the lazy component to be recreated on every render, resetting its state unexpectedly
import { lazy } from "react";

function Editor() {
  const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));
  //    ^^^ Do not declare lazy components inside other components. Instead, always declare them at the top level of your module.
  // ...
}
```

### Declaring lazy components at the module level [#declaring-lazy-components-at-the-module-level]

```tsx
// 🟢 Recommended: Declare lazy components at the module level to keep references stable and state persistent
import { lazy } from "react";

const MarkdownPreview = lazy(() => import("./MarkdownPreview.js"));

function Editor() {
  // ...
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.52.7] - 2025-08-29">
    ### Fixed [#fixed]

    * Fixed rule name and message ID key mismatch.
  </Accordion>

  <Accordion title="[1.45.0] - 2025-04-11">
    ### Added [#added]

    * Initial release of the `no-nested-lazy-component-declarations` rule. (#1052)
    * Detects nested lazy component declarations (e.g., `lazy(() => import(...))` defined inside other functions or components), which can cause unexpected behavior and performance issues.
    * Registered in the `recommended` and `x` configuration presets.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-nested-lazy-component-declarations/no-nested-lazy-component-declarations.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-nested-lazy-component-declarations/no-nested-lazy-component-declarations.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-nested-lazy-component-declarations/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `Lazy`](https://react.dev/reference/react/lazy)
  * [My lazy component’s state gets reset unexpectedly](https://react.dev/reference/react/lazy#my-lazy-components-state-gets-reset-unexpectedly)
* [React Docs: React calls Components and Hooks](https://react.dev/reference/rules/react-calls-components-and-hooks)

***

## See Also [#see-also]

* [`react-x/no-nested-component-definitions`](./no-nested-component-definitions)\
  Disallows nesting component definitions inside other components.
* [`react-x/static-components`](./static-components)\
  Validates that components are static, not recreated every render.


# no-set-state-in-component-did-mount (/docs/rules/no-set-state-in-component-did-mount)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-set-state-in-component-did-mount
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-set-state-in-component-did-mount
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Updating the state after a component mounts will trigger a second `render()` call and can lead to property/layout thrashing.

For class components, prefer setting the initial state in the constructor or via a class field initializer. If you need to perform side effects, consider using `useEffect` after migrating to function components.

## Examples [#examples]

### Calling setState directly in componentDidMount [#calling-setstate-directly-in-componentdidmount]

```tsx
// 🔴 Problem: Calling setState directly in componentDidMount triggers an extra render and can cause performance issues and layout thrashing
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  componentDidMount() {
    this.setState({ name: "John" });
    //   ^^^ Do not call `this.setState` in `componentDidMount` outside functions such as callbacks.
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}
```

### Setting initial state correctly [#setting-initial-state-correctly]

Set the initial state in the constructor or via a class field. Use `componentDidMount` only for side effects like subscriptions or data fetching, and only call `setState` inside callbacks (e.g., event handlers or network responses).

```tsx
// 🟢 Recommended: Initialize state in the constructor or as a class field
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  state = {
    name: "John",
  };

  componentDidMount() {
    // Side effects like fetching data are fine here
    fetchData().then((data) => {
      this.setState({ name: data.name }); // OK inside a callback
    });
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.2] - 2023-12-06">
    ### Added [#added]

    * Initial release of the `no-set-state-in-component-did-mount` rule. Closes #197. (#201)
    * Reports usage of `setState` inside `componentDidMount`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount/no-set-state-in-component-did-mount.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount/no-set-state-in-component-did-mount.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount/CHANGELOG.md)

## Further Reading [#further-reading]

* [Legacy React APIs: `setState`](https://react.dev/reference/react/Component#setstate)
* [Legacy React APIs: `componentDidMount`](https://react.dev/reference/react/Component#componentdidmount)

***

## See Also [#see-also]

* [`react-x/no-set-state-in-component-did-update`](./no-set-state-in-component-did-update)\
  Disallows calling `this.setState` in `componentDidUpdate` outside functions such as callbacks.
* [`react-x/no-set-state-in-component-will-update`](./no-set-state-in-component-will-update)\
  Disallows calling `this.setState` in `componentWillUpdate` outside functions such as callbacks.


# no-set-state-in-component-did-update (/docs/rules/no-set-state-in-component-did-update)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-set-state-in-component-did-update
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-set-state-in-component-did-update
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Updating the state after a component updates will trigger an additional `render()` call and can lead to property/layout thrashing or infinite loops.

## Examples [#examples]

### Calling setState directly in componentDidUpdate [#calling-setstate-directly-in-componentdidupdate]

```tsx
// 🔴 Problem: Calling setState directly in componentDidUpdate triggers another render and can easily cause infinite loops or layout thrashing
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  componentDidUpdate() {
    this.setState({ name: "John" });
    //   ^^^ Do not call `this.setState` in `componentDidUpdate` outside functions such as callbacks.
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}
```

### Responding to prop changes without extra state [#responding-to-prop-changes-without-extra-state]

If you need to perform side effects when props change, do so conditionally and avoid synchronous `setState` calls that trigger additional renders.

```tsx
// 🟢 Recommended: Perform conditional side effects without synchronous setState
import React from "react";

interface MyComponentProps {
  roomId: string;
}

interface MyComponentState {
  serverUrl: string;
}

class ChatRoom extends React.Component<MyComponentProps, MyComponentState> {
  state = {
    serverUrl: "https://localhost:1234",
  };

  componentDidUpdate(prevProps: MyComponentProps) {
    if (this.props.roomId !== prevProps.roomId) {
      this.destroyConnection();
      this.setupConnection(); // Side effect, not setState
    }
  }

  componentWillUnmount() {
    this.destroyConnection();
  }

  setupConnection() {
    /* ... */
  }

  destroyConnection() {
    /* ... */
  }

  render() {
    return <div>Room: {this.props.roomId}</div>;
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.2] - 2023-12-06">
    ### Added [#added]

    * Initial release of the `no-set-state-in-component-did-update` rule. Closes #198. (#201)
    * Reports usage of `setState` inside `componentDidUpdate`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update/no-set-state-in-component-did-update.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update/no-set-state-in-component-did-update.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update/CHANGELOG.md)

## Further Reading [#further-reading]

* [Legacy React APIs: `setState`](https://react.dev/reference/react/Component#setstate)
* [Legacy React APIs: `componentDidUpdate`](https://react.dev/reference/react/Component#componentdidupdate)

***

## See Also [#see-also]

* [`react-x/no-set-state-in-component-did-mount`](./no-set-state-in-component-did-mount)\
  Disallows calling `this.setState` in `componentDidMount` outside functions such as callbacks.
* [`react-x/no-set-state-in-component-will-update`](./no-set-state-in-component-will-update)\
  Disallows calling `this.setState` in `componentWillUpdate` outside functions such as callbacks.


# no-set-state-in-component-will-update (/docs/rules/no-set-state-in-component-will-update)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-set-state-in-component-will-update
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-set-state-in-component-will-update
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Updating the state in `componentWillUpdate` is not allowed because the component is already about to re-render. It can lead to infinite loops and inconsistent state.

## Examples [#examples]

### Calling setState directly in componentWillUpdate [#calling-setstate-directly-in-componentwillupdate]

```tsx
// 🔴 Problem: Calling setState directly in componentWillUpdate triggers another render and can easily cause infinite loops or layout thrashing
import React from "react";

interface MyComponentProps {}

interface MyComponentState {
  name: string;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  componentWillUpdate() {
    this.setState({ name: "John" });
    //   ^^^ Do not call `this.setState` in `componentWillUpdate` outside functions such as callbacks.
  }

  render() {
    return <div>Hello {this.state.name}</div>;
  }
}
```

### Preparing for an update without setState [#preparing-for-an-update-without-setstate]

If you need to compute something before an update, store it in an instance variable or derive it during `render`. Never call `setState` in `componentWillUpdate` because the component is already about to re-render.

```tsx
// 🟢 Recommended: Use instance variables or derive values during render
import React from "react";

interface MyComponentProps {
  value: number;
}

interface MyComponentState {
  prevValue: number;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  state = {
    prevValue: 0,
  };

  componentWillUpdate(nextProps: MyComponentProps) {
    // Store previous value in an instance variable, not state
    this.previousValue = this.props.value;
  }

  render() {
    const hasIncreased = this.props.value > this.state.prevValue;
    return <div>Value increased: {hasIncreased ? "Yes" : "No"}</div>;
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.2] - 2023-12-06">
    ### Added [#added]

    * Initial release of the `no-set-state-in-component-will-update` rule. Closes #199. (#201)
    * Reports usage of `setState` inside `componentWillUpdate`.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update/no-set-state-in-component-will-update.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update/no-set-state-in-component-will-update.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update/CHANGELOG.md)

## Further Reading [#further-reading]

* [Legacy React APIs: `setState`](https://react.dev/reference/react/Component#setstate)
* [Legacy React APIs: `componentWillUpdate`](https://react.dev/reference/react/Component#componentwillupdate)

***

## See Also [#see-also]

* [`react-x/no-set-state-in-component-did-mount`](./no-set-state-in-component-did-mount)\
  Disallows calling `this.setState` in `componentDidMount` outside functions such as callbacks.
* [`react-x/no-set-state-in-component-did-update`](./no-set-state-in-component-did-update)\
  Disallows calling `this.setState` in `componentDidUpdate` outside functions such as callbacks.


# no-unnecessary-use-prefix (/docs/rules/no-unnecessary-use-prefix)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unnecessary-use-prefix
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unnecessary-use-prefix
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

If your function doesn't call any Hooks, avoid the `use` prefix and write it as a regular function. This allows the function to be called anywhere, including in conditions. You should only use the `use` prefix when the function calls at least one Hook inside it.

Technically, React does not enforce this. In principle, you could make a Hook that doesn't call other Hooks, but this is often confusing and limiting. However, there may be rare cases where it is helpful, such as when you plan to add Hook calls in the future. In that case, naming it with the `use` prefix makes sense so that components won't be able to call it conditionally once Hooks are added. If you don't plan to use Hooks inside it (now or later), don't make it a Hook.

## Examples [#examples]

### Using the `use` prefix without calling any Hooks [#using-the-use-prefix-without-calling-any-hooks]

Functions with the `use` prefix are treated as Hooks and must follow Hook rules (for example, they cannot be called conditionally). If a function doesn't call any Hooks, remove the `use` prefix and make it a regular function.

```tsx
// 🔴 Problem: The function doesn't call any Hooks but uses the use prefix
function useSorted(items) {
  return items.slice().sort();
}
```

```tsx
// 🟢 Recommended: Convert it to a regular function so it can be called anywhere
function getSorted(items) {
  return items.slice().sort();
}
```

As a regular function, it can safely be called inside conditional statements:

```tsx
// 🔵 OK: Regular functions allow conditional calls
function List({ items, shouldSort }) {
  let displayedItems = items;
  if (shouldSort) {
    displayedItems = getSorted(items);
  }
  // ...
}
```

### Calling other Hooks inside the function [#calling-other-hooks-inside-the-function]

When a function calls at least one Hook internally, using the `use` prefix is correct and necessary.

```tsx
// 🟢 Recommended: The function calls useContext, so the use prefix is justified
function useAuth() {
  return useContext(Auth);
}
```

### Calling Hooks through tagged template literals [#calling-hooks-through-tagged-template-literals]

Hook calls written as tagged template literals (for example, Motion's `useMotionTemplate`) also count as Hook calls, so the `use` prefix remains justified.

```tsx
// 🔵 OK: useMotionTemplate is called as a tagged template literal, which counts as a Hook call
function useFilter() {
  return useMotionTemplate`blur(${10}px) saturate(${50}%)`;
}
```

### Not using Hooks now, but planning to add them later [#not-using-hooks-now-but-planning-to-add-them-later]

If a function doesn't currently call any Hooks but you plan to add Hook calls later, you can keep the `use` prefix. Add a TODO comment that includes the planned Hook call — the rule treats such comments as a signal of intent and won't report the function.

```tsx
// 🔴 Problem: No Hooks are used and there is no comment explaining future plans
function useAuth() {
  return TEST_USER;
}
```

```tsx
// 🟢 Recommended: Add an explicit TODO explaining it will be replaced with a Hook later
function useAuth() {
  // TODO: Replace with this line when authentication is implemented:
  // return useContext(Auth);
  return TEST_USER;
}
```

### MDX component factory functions [#mdx-component-factory-functions]

Some framework conventions (such as MDX) require factory functions with the `use` prefix. These well-known functions are allowed even if they don't call any Hooks.

```tsx
// 🔵 OK: Component mapping function that follows MDX conventions
export function useMDXComponents(components) {
  return {
    ...components,
  };
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.16.0] - 2026-07-15">
    ### Fixed [#fixed]

    * Tagged template literal hook calls (e.g. `useMotionTemplate\`...\`\`) are now recognized as valid hook usage, preventing false positives for custom hooks that call hooks only through tagged templates. (#1909)
  </Accordion>

  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[2.0.5] - 2025-10-03">
    ### Changed [#changed-2]

    * Updated rule features and status.
  </Accordion>

  <Accordion title="[1.48.0] - 2025-04-17">
    ### Fixed [#fixed-1]

    * Improved the error marker range for more precise reporting.
  </Accordion>

  <Accordion title="[1.47.4] - 2025-04-15">
    ### Added [#added]

    * Updated rule to skip well-known hooks like `useMDXComponents` to reduce false positives. (#1072)
  </Accordion>

  <Accordion title="[1.47.2] - 2025-04-14">
    ### Fixed [#fixed-2]

    * Used smaller error marker range to reduce visual noise in editor output. (#1063)
  </Accordion>

  <Accordion title="[1.45.1] - 2025-04-13">
    ### Fixed [#fixed-3]

    * Fixed case sensitivity failures in hook name detection. Closes #1053. (#1054)
  </Accordion>

  <Accordion title="[1.35.0] - 2025-03-18">
    ### Changed [#changed-3]

    * Renamed from `no-useless-custom-hooks` to `no-unnecessary-use-prefix` for clearer intent. (#996)
  </Accordion>

  <Accordion title="[1.21.0] - 2024-12-20">
    ### Added [#added-1]

    * Initial release of the rule as `no-useless-custom-hooks`. (#886)
    * Reports functions with an unnecessary `use` prefix that do not use React hooks internally.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unnecessary-use-prefix/no-unnecessary-use-prefix.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unnecessary-use-prefix/no-unnecessary-use-prefix.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unnecessary-use-prefix/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Should all functions called during rendering start with the `use` prefix? (the deep dive)](https://react.dev/learn/reusing-logic-with-custom-hooks#should-all-functions-called-during-rendering-start-with-the-use-prefix)


# no-unsafe-component-will-mount (/docs/rules/no-unsafe-component-will-mount)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unsafe-component-will-mount
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unsafe-component-will-mount
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using unsafe lifecycle methods like `UNSAFE_componentWillMount` makes your component's behavior less predictable and more likely to cause bugs. Consider using `constructor` or `componentDidMount` instead.

## Examples [#examples]

### Using `UNSAFE_componentWillMount` in class components [#using-unsafe_componentwillmount-in-class-components]

`UNSAFE_componentWillMount` is a deprecated lifecycle method and may be removed in a future version of React. Initialization logic should go in the `constructor`, and side effects should go in `componentDidMount`.

```tsx
// 🔴 Problem: Uses an unsafe lifecycle method
import React from "react";

class MyComponent extends React.Component {
  UNSAFE_componentWillMount() {
    // ...
  }
}
```

```tsx
// 🟢 Recommended: initialize state in the constructor or as a class field, move side effects to componentDidMount
import React from "react";

class MyComponent extends React.Component {
  state = { counter: 0 };

  componentDidMount() {
    // Side effects belong here
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.1] - 2023-12-05">
    ### Added [#added]

    * Initial release of the `no-unsafe-component-will-mount` rule. Closes #190. (#194)
    * Reports usage of the unsafe `UNSAFE_componentWillMount` lifecycle method.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount/no-unsafe-component-will-mount.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount/no-unsafe-component-will-mount.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `UNSAFE_componentWillMount`](https://react.dev/reference/react/Component#unsafe_componentwillmount)
* [React Docs: Updating to Async Rendering](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html)

***

## See Also [#see-also]

* [`react-x/no-unsafe-component-will-receive-props`](./no-unsafe-component-will-receive-props)\
  Warns about the use of `UNSAFE_componentWillReceiveProps` in class components.
* [`react-x/no-unsafe-component-will-update`](./no-unsafe-component-will-update)\
  Warns about the use of `UNSAFE_componentWillUpdate` in class components.


# no-unsafe-component-will-receive-props (/docs/rules/no-unsafe-component-will-receive-props)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unsafe-component-will-receive-props
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unsafe-component-will-receive-props
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using unsafe lifecycle methods like `UNSAFE_componentWillReceiveProps` makes your component's behavior less predictable and more likely to cause bugs. Consider using `getDerivedStateFromProps` or `componentDidUpdate` instead.

## Examples [#examples]

### Using `UNSAFE_componentWillReceiveProps` in class components [#using-unsafe_componentwillreceiveprops-in-class-components]

`UNSAFE_componentWillReceiveProps` is a deprecated lifecycle method. If you need to update state when props change, use the static method `getDerivedStateFromProps`; if you need to perform side effects, use `componentDidUpdate`.

```tsx
// 🔴 Problem: Uses an unsafe lifecycle method
import React from "react";

class MyComponent extends React.Component {
  UNSAFE_componentWillReceiveProps() {
    // ...
  }
}
```

```tsx
// 🟢 Recommended: derive state with getDerivedStateFromProps or use componentDidUpdate for side effects
import React from "react";

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.userID !== state.prevUserID) {
      return {
        prevUserID: props.userID,
        email: props.defaultEmail,
      };
    }
    return null;
  }

  state = {
    email: this.props.defaultEmail,
    prevUserID: this.props.userID,
  };
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.2] - 2023-12-06">
    ### Added [#added]

    * Initial release of the `no-unsafe-component-will-receive-props` rule. Closes #191. (#196)
    * Reports usage of the unsafe `UNSAFE_componentWillReceiveProps` lifecycle method.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props/no-unsafe-component-will-receive-props.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props/no-unsafe-component-will-receive-props.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `UNSAFE_componentWillReceiveProps`](https://react.dev/reference/react/Component#unsafe_componentwillreceiveprops)
* [React Docs: You Probably Don't Need Derived State](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)
* [React Docs: Updating to Async Rendering](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html)

***

## See Also [#see-also]

* [`react-x/no-unsafe-component-will-mount`](./no-unsafe-component-will-mount)\
  Warns about the use of `UNSAFE_componentWillMount` in class components.
* [`react-x/no-unsafe-component-will-update`](./no-unsafe-component-will-update)\
  Warns about the use of `UNSAFE_componentWillUpdate` in class components.


# no-unsafe-component-will-update (/docs/rules/no-unsafe-component-will-update)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unsafe-component-will-update
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unsafe-component-will-update
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Using unsafe lifecycle methods like `UNSAFE_componentWillUpdate` makes your component's behavior less predictable and is more likely to cause bugs. Consider using `componentDidUpdate` instead.

## Examples [#examples]

### Using `UNSAFE_componentWillUpdate` in class components [#using-unsafe_componentwillupdate-in-class-components]

`UNSAFE_componentWillUpdate` is a deprecated lifecycle method. If you need to perform side effects or DOM operations after an update, use `componentDidUpdate`.

```tsx
// 🔴 Problem: Uses an unsafe lifecycle method
import React from "react";

class MyComponent extends React.Component {
  UNSAFE_componentWillUpdate() {
    // ...
  }
}
```

```tsx
// 🟢 Recommended: use componentDidUpdate for side effects after an update
import React from "react";

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      // Perform side effects here
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[0.9.2] - 2023-12-06">
    ### Added [#added]

    * Initial release of the `no-unsafe-component-will-update` rule. Closes #192. (#195)
    * Reports usage of the unsafe `UNSAFE_componentWillUpdate` lifecycle method.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update/no-unsafe-component-will-update.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update/no-unsafe-component-will-update.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `UNSAFE_componentWillUpdate`](https://react.dev/reference/react/Component#unsafe_componentwillupdate)
* [React Docs: Updating to Async Rendering](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html)

***

## See Also [#see-also]

* [`react-x/no-unsafe-component-will-mount`](./no-unsafe-component-will-mount)\
  Warns about the use of `UNSAFE_componentWillMount` in class components.
* [`react-x/no-unsafe-component-will-receive-props`](./no-unsafe-component-will-receive-props)\
  Warns about the use of `UNSAFE_componentWillReceiveProps` in class components.


# no-unstable-context-value (/docs/rules/no-unstable-context-value)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unstable-context-value
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unstable-context-value
```

**Presets**

`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

React will re-render all consumers of a context whenever the context value changes, and if the value is not stable this can lead to unnecessary re-renders.

## Examples [#examples]

### Creating a new object as the Context value on every render [#creating-a-new-object-as-the-context-value-on-every-render]

JavaScript objects and functions get a new reference every time they are recreated. If you pass an object literal directly in JSX, the Provider will think the value has changed on every render, causing all consumers to re-render unnecessarily.

```tsx
// 🔴 Problem: Object literals create a new reference on every render
import React from "react";

const MyContext = React.createContext({});

function MyComponentProvider() {
  return (
    <MyContext.Provider value={{ foo: "bar" }}>
      {/*                      ^^^^^^^^^^^^^^ */}
      {/*                      - An 'Object literal' passed as the value prop to the context provider should not be constructed. It will change on every render. Consider wrapping it in a useMemo hook. */}
      <ExampleConsumer />
    </MyContext.Provider>
  );
}
```

```tsx
// 🟢 Recommended: Lift the value to module scope or use useMemo to keep the reference stable
import React, { useMemo } from "react";

const MyContext = React.createContext({});

const value = { foo: "bar" };

function MyComponentProvider() {
  return (
    <MyContext.Provider value={value}>
      <ExampleConsumer />
    </MyContext.Provider>
  );
}
```

### Stabilizing context value with `useMemo` [#stabilizing-context-value-with-usememo]

When a context value depends on state or props, wrap it in `useMemo` so the reference stays stable across renders. This prevents unnecessary re-renders in all consumers.

```tsx
// 🟢 Recommended: use useMemo to keep the context value reference stable
import { useState, useCallback, useMemo, createContext } from "react";

interface AuthContextType {
  currentUser: string | null;
  login: (user: string) => void;
}

const AuthContext = createContext<AuthContextType | null>(null);

function App() {
  const [currentUser, setCurrentUser] = useState<string | null>(null);

  const login = useCallback((user: string) => {
    setCurrentUser(user);
  }, []);

  const contextValue = useMemo(() => ({
    currentUser,
    login,
  }), [currentUser, login]);

  return (
    <AuthContext.Provider value={contextValue}>
      <Page />
    </AuthContext.Provider>
  );
}
```

### Using the React 19 `use memo` directive [#using-the-react-19-use-memo-directive]

In React 19, if a component uses the `"use memo"` directive, the compiler automatically keeps object references stable, so passing object literals directly is acceptable.

```tsx
// 🔵 OK: With the use memo directive, the compiler automatically optimizes references
import React from "react";

const MyContext = React.createContext({});

function MyComponentProvider() {
  "use memo";
  return (
    <MyContext.Provider value={{ foo: "bar" }}>
      <ExampleConsumer />
    </MyContext.Provider>
  );
}
```

## Legitimate Uses [#legitimate-uses]

React Context and all its child nodes and consumers are re-rendered whenever the value prop changes. Because each JavaScript object carries its own identity, things like object expressions (`{foo: 'bar'}`) or function expressions get a new identity on every run through the component. This makes the context think it has received a new object and can cause needless re-renders and unintended consequences.

This can be a large performance hit because not only will it cause the context providers and consumers to re-render with all the elements in their subtree, the processing for the tree scan React does to render the provider and find consumers is also wasted.

## Versions [#versions]

<Accordions>
  <Accordion title="[1.23.1] - 2025-01-03">
    ### Fixed [#fixed]

    * Fixed false positives in context value detection. (#896)
  </Accordion>

  <Accordion title="[1.5.0] - 2024-01-29">
    ### Changed [#changed]

    * Renamed from `no-constructed-context-value` to `no-unstable-context-value` for clearer intent.
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Added [#added]

    * Initial release of the rule as `no-constructed-context-value`.
    * Detects unstable context values (e.g., object/array literals, function expressions) passed to Context providers, which cause unnecessary re-renders for all consumers.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value/no-unstable-context-value.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value/no-unstable-context-value.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `createContext`](https://react.dev/reference/react/createContext)
* [React Docs: Context](https://react.dev/learn/passing-data-deeply-with-context)
* [React Docs: `useMemo`](https://react.dev/reference/react/useMemo)
* [React Compiler: `compilationMode`](https://react.dev/reference/react-compiler/compilationMode)

***

## See Also [#see-also]

* [`react-x/no-unstable-default-props`](./no-unstable-default-props)\
  Prevents using referential-type values as default props in object destructuring.


# no-unstable-default-props (/docs/rules/no-unstable-default-props)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unstable-default-props
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unstable-default-props
```

**Features**

`⚙️`

**Presets**

`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

When using object destructuring syntax, you can set the default value for a given property if it does not exist. If you set the default value to one of the values that is compared by identity, then each time the destructuring is evaluated the JS engine will create a new, distinct value in the destructured variable.

This harms performance, as it means that React will have to re-evaluate hooks and re-render memoized components more often than necessary.

To fix the violations, the easiest way is to use a referencing variable in module scope instead of using the literal values.

## Examples [#examples]

### Using array literals as default props [#using-array-literals-as-default-props]

Array literals `[]` create a new reference every time, causing Hooks or memoized components that depend on the reference to recompute frequently.

```tsx
// 🔴 Problem: Array literal as a default prop creates a new reference on every render
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items = [] }: MyComponentProps) {
  //                           ^^^ An 'Array literal' as a default prop. This could lead to a potential infinite render loop in React. Use a variable instead of 'Array literal'.
  return null;
}
```

```tsx
// 🟢 Recommended: Use a stable module-level variable instead of a literal
import React from "react";

const emptyArray: string[] = [];

interface MyComponentProps {
  items: string[];
}

function MyComponent({ items = emptyArray }: MyComponentProps) {
  return null;
}
```

### Using object literals as default props [#using-object-literals-as-default-props]

Object literals `{}` also create a new reference on every render, causing unnecessary re-render overhead.

```tsx
// 🔴 Problem: Object literal as a default prop
interface MyComponentProps {
  items: Record<string, string>;
}

function MyComponent({ items = {} }: MyComponentProps) {
  //                           ^^^ An 'Object literal' as a default prop. This could lead to a potential infinite render loop in React. Use a variable instead of 'Object literal'.
  return null;
}
```

```tsx
// 🟢 Recommended: Use a stable module-level object variable
import React from "react";

const emptyObject = {};

interface MyComponentProps {
  items: Record<string, string>;
}

function MyComponent({ items = emptyObject }: MyComponentProps) {
  return null;
}
```

### Using arrow functions as default props [#using-arrow-functions-as-default-props]

Arrow function expressions generate a new function reference on every render, breaking memo optimizations for child components.

```tsx
// 🔴 Problem: Arrow function as a default prop
interface MyComponentProps {
  onClick: () => void;
}

function MyComponent({ onClick = () => {} }: MyComponentProps) {
  //                             ^^^ An 'arrow function expression' as a default prop. This could lead to a potential infinite render loop in React. Use a variable instead of 'arrow function expression'.
  return null;
}
```

```tsx
// 🟢 Recommended: Use a stable module-level function reference
import React from "react";

const noop = () => {};

interface MyComponentProps {
  onClick: () => void;
}

function MyComponent({ onClick = noop }: MyComponentProps) {
  return null;
}
```

### Using unstable default values in destructured props [#using-unstable-default-values-in-destructured-props]

Even when assigning default values after destructuring `props`, using literals still causes the same reference instability problem.

```tsx
// 🔴 Problem: Using an array literal after destructuring
interface MyComponentProps {
  items: string[];
}

function MyComponent(props: MyComponentProps) {
  const { items = [] } = props;
  //              ^^^ An 'Array literal' as a default prop. This could lead to a potential infinite render loop in React. Use a variable instead of 'Array literal'.
  return null;
}
```

```tsx
// 🟢 Recommended: Use a stable module-level variable
import React from "react";

const emptyArray: string[] = [];

interface MyComponentProps {
  items: string[];
}

function MyComponent(props: MyComponentProps) {
  const { items = emptyArray } = props;

  return null;
}
```

### Using the `use memo` directive [#using-the-use-memo-directive]

In React 19, if a component uses the `"use memo"` directive, the compiler automatically optimizes reference stability for default props, so literal default values are acceptable.

```tsx
// 🔵 OK: The use memo directive automatically optimizes references
interface MyComponentProps {
  items: string[];
}

function MyComponent({ items = [] }: MyComponentProps) {
  "use memo";
  return null;
}
```

### Using primitive types as default props [#using-primitive-types-as-default-props]

Primitive types (number, string, boolean, etc.) are compared by value and don't have reference instability issues, so they can be inlined directly.

```tsx
// 🔵 OK: Primitive default props are safe
interface MyComponentProps {
  num: number;
  str: string;
  bool: boolean;
}

function MyComponent({ num = 3, str = "foo", bool = true }: MyComponentProps) {
  //                   ^^^ Primitives are all compared by value, so they are safe to inline as default props.
  return null;
}
```

## Rule Options [#rule-options]

```ts
type Options = {
  safeDefaultProps?: string[];
};
```

### `safeDefaultProps` [#safedefaultprops]

An array of identifier names or regex patterns that are safe to use as default props. If the default prop value is created by calling one of the allowlisted identifiers, it will be considered safe.

Default: `[]`

## Versions [#versions]

<Accordions>
  <Accordion title="[5.6.0] - 2026-04-29">
    ### Fixed [#fixed]

    * Fixed type expression handling by unwrapping type expressions before inspecting AST node types. (#1732)
  </Accordion>

  <Accordion title="[2.10.0] - 2025-02-05">
    ### Added [#added]

    * Added `safeDefaultProps` option to allow configuring known-safe default prop patterns. Closes #1312. (#1313)
  </Accordion>

  <Accordion title="[1.15.1] - 2024-07-22">
    ### Fixed [#fixed-1]

    * Fixed false negatives when using `LogicalExpression` and `ConditionalExpression` in default props.
  </Accordion>

  <Accordion title="[0.10.10] - 2024-01-14">
    ### Added [#added-1]

    * Enhanced detection to support checking for `ObjectPatterns` within `VariableDeclarators` that occur on props.
  </Accordion>

  <Accordion title="[0.10.0] - 2023-12-21">
    ### Added [#added-2]

    * Initial release of the `no-unstable-default-props` rule.
    * Detects unstable default prop values (e.g., object/array literals, function expressions) that cause unnecessary re-renders.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props/no-unstable-default-props.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props/no-unstable-default-props.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `memo`](https://react.dev/reference/react/memo)
* [React Docs: `useMemo`](https://react.dev/reference/react/useMemo)
* [React Compiler: `compilationMode`](https://react.dev/reference/react-compiler/compilationMode)

***

## See Also [#see-also]

* [`react-x/no-unstable-context-value`](./no-unstable-context-value)\
  Prevents non-stable values (i.e., object literals) from being used as a value for `Context.Provider`.


# no-unused-class-component-members (/docs/rules/no-unused-class-component-members)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unused-class-component-members
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unused-class-component-members
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This rule warns about class component methods and properties that are defined but never used. Removing unused members helps keep the codebase clean and reduces confusion.

Note that `shouldComponentUpdate` is considered unused when defined in a class extending `PureComponent`, since `PureComponent` implements its own `shouldComponentUpdate` with shallow prop and state comparison.

## Examples [#examples]

### Class component methods defined but never used [#class-component-methods-defined-but-never-used]

Defining a method in a class component that is never called (including in lifecycles, render, or other methods) increases maintenance overhead and causes confusion.

```tsx
// 🔴 Problem: handleClick is never called
import React from "react";

class MyComponent extends React.Component {
  handleClick() {} // Unused
  render() {
    return null;
  }
}
```

### Class component members called by other methods or lifecycles [#class-component-members-called-by-other-methods-or-lifecycles]

If a method is explicitly called in a lifecycle (such as componentDidMount) or by other members, it is not considered unused.

```tsx
// 🔵 OK: action is called in componentDidMount
import React from "react";

class MyComponent extends React.Component {
  static getDerivedStateFromError(error: React.ErrorInfo) {
    return { hasError: true };
  }
  action() {}
  componentDidMount() {
    this.action();
  }
  render() {
    return null;
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with direct non-computed identifier checks when resolving class member names.
    * Computed string-literal member definitions and usages (e.g. `this["foo"]()`) are no longer tracked, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.6.4] - 2026-05-01">
    ### Added [#added]

    * Now flags `shouldComponentUpdate` methods defined in classes extending `PureComponent` as unused, since `PureComponent` implements its own `shouldComponentUpdate` with shallow prop and state comparison. (#1738)
  </Accordion>

  <Accordion title="[1.15.1] - 2024-07-22">
    ### Changed [#changed-1]

    * Improved detection to support checking for more cases.
  </Accordion>

  <Accordion title="[0.10.10] - 2024-01-14">
    ### Added [#added-1]

    * Initial release of the `no-unused-class-component-members` rule. (#293)
    * Detects unused methods and properties in class components to help clean up dead code.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members/no-unused-class-component-members.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members/no-unused-class-component-members.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `Component`](https://react.dev/reference/react/Component)


# no-unused-props (/docs/rules/no-unused-props)





<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unused-props
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unused-props
```

**Features**

`💭` `🧪`

**Presets**

`strict-type-checked`

## Rule Details [#rule-details]

Unused props increase maintenance overhead and may mislead consumers of the component into thinking the prop is required or meaningful even when it has no effect.

This is the TypeScript-only version of [`eslint-plugin-react/no-unused-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md). In contrast to the original rule, this rule

* doesn't support the legacy propTypes syntax
* combines the used props of one type definition declared by multiple components

## Examples [#examples]

### Props defined but not used inside the component body [#props-defined-but-not-used-inside-the-component-body]

Declaring a field in a type or interface but not reading or using it in the component function causes the type definition to be inconsistent with the actual implementation.

```tsx
// 🔴 Problem: onClick is defined in ButtonProps but never used
type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

function Button({ children }: ButtonProps) {
  return <button type="button">{children}</button>;
}
```

```tsx
// 🟢 Recommended: actually use all declared props in the component
type ButtonProps = {
  children: React.ReactNode;
  onClick: () => void;
};

function Button({ children, onClick }: ButtonProps) {
  return (
    <button type="button" onClick={onClick}>
      {children}
    </button>
  );
}
```

### Fields declared in an interface but missed during destructuring [#fields-declared-in-an-interface-but-missed-during-destructuring]

Even if props are destructured, missing some fields from the interface is considered unused.

```tsx
// 🔴 Problem: avatarUrl is defined in UserProfileProps but never used
interface UserProfileProps {
  username: string;
  avatarUrl: string;
}

function UserProfile({ username }: UserProfileProps) {
  return <div>{username}</div>;
}
```

### Passing all props through to child elements via the spread operator [#passing-all-props-through-to-child-elements-via-the-spread-operator]

Using the `...rest` spread operator passes through all props that are not explicitly destructured, so these props are considered used.

```tsx
// 🔵 OK: ...rest is considered to use all non-destructured props
interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
  children: React.ReactNode;
  className?: string;
}

function Text({ children, ...rest }: TextProps) {
  return <p {...rest}>{children}</p>;
}
```

### Multiple components sharing the same props type definition [#multiple-components-sharing-the-same-props-type-definition]

When a type/interface is shared by multiple components, as long as each field is used in at least one component, it will not be reported as unused.

```tsx
// 🔵 OK: userId and theme are used in different components respectively
interface ProfileProps {
  userId: string; // Used by ProfilePage
  theme: "light" | "dark"; // Used by ProfileAvatar
}

function ProfilePage({ userId }: ProfileProps) {
  // ...
  return <div>User ID: {userId}</div>;
}

function ProfileAvatar({ theme }: ProfileProps) {
  // ...
  return <div className={theme}>...</div>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[2.0.0] - 2025-09-26">
    ### Added [#added]

    * Initial release of the `no-unused-props` rule. (#1238)
    * Reports unused props in components to help keep component APIs clean and maintainable.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-props/no-unused-props.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-props/no-unused-props.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-props/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-x/no-unused-state`](./no-unused-state)\
  Warns about state variables that are defined but never used.


# no-unused-state (/docs/rules/no-unused-state)





<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-unused-state
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-unused-state
```

**Features**

`🧪`

## Rule Details [#rule-details]

This rule warns about state variables declared via `useState` (or similar state hooks) that are defined but never read.

## Examples [#examples]

### State declared but never read in the component [#state-declared-but-never-read-in-the-component]

If only `useState` is called and the setter is destructured, but the state value itself is never read, this state has no actual effect on rendering.

```tsx
// 🔴 Problem: data is declared but never read
import { useState } from "react";

function Component() {
  const [data, setData] = useState(0);
  return <div />;
}
```

```tsx
// 🟢 Recommended: remove the state if it is not needed; otherwise use it in JSX
import { useState } from "react";

function Component() {
  const [data, setData] = useState(0);
  return <div>{data}</div>;
}
```

## Options [#options]

### Shared Settings [#shared-settings]

Custom state and effect hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalStateHooks": "/^(useMyState|useCustomState)$/u",
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.7.2] - 2026-05-04">
    ### Changed [#changed]

    * Removed detection for state variables that are only used in effects. The rule now only reports state variables that are never read.
    * Updated rule wording to remove "or only used in effects" from description and message. Closes [#1749](https://github.com/Rel1cx/eslint-react/issues/1749).
  </Accordion>

  <Accordion title="[5.7.1] - 2026-05-02">
    ### Changed [#changed-1]

    * Updated rule wording and documentation examples for clarity.
  </Accordion>

  <Accordion title="[5.7.0] - 2026-05-02">
    ### Added [#added]

    * Fully implemented the `no-unused-state` rule. (#1741)
    * Detects state variables declared via `useState` (or similar state hooks) that are defined but never read, or only read inside an effect or effect dependency array.
  </Accordion>

  <Accordion title="[5.6.5] - 2026-05-01">
    ### Added [#added-1]

    * Re-added the `react-x/no-unused-state` rule as a no-op placeholder for future implementation.
    * Rule was previously removed in `v5.0.0`.
  </Accordion>

  <Accordion title="[0.10.7] - 2024-01-11">
    ### Added [#added-2]

    * Initial release of the `no-unused-state` rule. Closes #294. (#296)
    * Detects unused state variables and methods in class components.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-state/no-unused-state.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-state/no-unused-state.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-unused-state/CHANGELOG.md)

***

## See Also [#see-also]

* [`react-x/no-unused-props`](./no-unused-props)\
  Warns about component props that are defined but never used.


# no-use-context (/docs/rules/no-use-context)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/no-use-context
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/no-use-context
```

**Features**

`🔄`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

In React 19, `use` is preferred over `useContext` because it is more flexible.

In addition, enable the [`naming-convention/context-name`](./naming-convention-context-name) rule to enforce consistent naming conventions for contexts.

## Examples [#examples]

### Still using useContext in React 19 [#still-using-usecontext-in-react-19]

React 19 introduced the more general `use` API, which can replace `useContext` and supports being called in conditional statements and loops. New code should prefer `use`.

```tsx
// 🔴 Problem: use should be preferred over useContext in React 19
import { useContext } from "react";

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}
```

```tsx
// 🟢 Recommended: use the React 19 use API
import { use } from "react";

function Button() {
  const theme = use(ThemeContext);
  // ...
}
```

### Calling context reads conditionally [#calling-context-reads-conditionally]

Unlike `useContext`, `use` can be called inside conditions and loops. This lets you read context only when needed.

```tsx
// 🔴 Problem: useContext must be called at the top level, even when not needed
import { useContext } from "react";

function Toolbar({ showTooltip, tooltipContext }) {
  const tooltip = useContext(tooltipContext); // Always called
  if (!showTooltip) return null;
  return <Tooltip content={tooltip} />;
}
```

```tsx
// 🟢 Recommended: use can be called conditionally
import { use } from "react";

function Toolbar({ showTooltip, tooltipContext }) {
  if (!showTooltip) return null;
  const tooltip = use(tooltipContext); // Called only when needed
  return <Tooltip content={tooltip} />;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[1.26.1] - 2026-02-07">
    ### Changed [#changed]

    * Minor internal improvements.
  </Accordion>

  <Accordion title="[1.26.0] - 2026-02-06">
    ### Added [#added]

    * Initial release of the `no-use-context` rule. (#931)
    * Reports usage of `useContext` and recommends migrating to the `use` API introduced in React 19.

    ### Fixed [#fixed]

    * Fixed auto-fix to also remove associated imports when removing `useContext` usage. (#932)

    ### Changed [#changed-1]

    * Improved auto-fix output format for cleaner code transformations.
    * Enhanced auto-fix to support removing aliased imports. (#933)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-use-context/no-use-context.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-use-context/no-use-context.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/no-use-context/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Reading context with `use`](https://react.dev/reference/react/use#reading-context-with-use)
* [React Docs: Blog: New feature `use`](https://react.dev/blog/2024/12/05/react-19#new-feature-use)

***

## See Also [#see-also]

* [`react-naming-convention/context-name`](./naming-convention-context-name)\
  Enforces identifier names assigned from `createContext` calls to be a valid component name with the suffix `Context`.
* [`react-x/no-context-provider`](./no-context-provider)\
  Replaces usage of `<Context.Provider>` with `<Context>`.


# purity (/docs/rules/purity)



<Callout type="warn">
  This is an evaluation implementation and may contain false positives or negatives that have not yet been fully audited. Review each report carefully before applying fixes.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/purity
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/purity
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

React components must be pure functions — given the same props, they should always return the same JSX. When components use functions like `Math.random()` or `Date.now()` during render, they produce different output each time, breaking React's assumptions and causing bugs like hydration mismatches, incorrect memoization, and unpredictable behavior.

In general, any API that returns a different value for the same inputs violates this rule. Usual examples include:

* `Math.random()`
* `Date.now()` / `new Date()`
* `crypto.randomUUID()` / `crypto.getRandomValues()`
* `performance.now()`

## Examples [#examples]

### Generating random values during render [#generating-random-values-during-render]

Random values change on every render, making the component's output unpredictable. This breaks memoization and can cause hydration mismatches in server-rendered apps.

```tsx
// 🔴 Problem: produces a different value on every render
function Component() {
  const id = Math.random(); // different on every render
  //         ^^^ Do not call 'Math.random()' during render. Components and hooks must be pure. Move this call into an event handler, effect, or state initializer.
  return <div key={id}>Content</div>;
}
```

```tsx
// 🔴 Problem: calling crypto.randomUUID() directly during render
function Component() {
  const id = crypto.randomUUID(); // different on every render
  //         ^^^ Do not call 'crypto.randomUUID()' during render. Components and hooks must be pure. Move this call into an event handler, effect, or state initializer.
  return <div id={id}>Content</div>;
}
```

```tsx
// 🟢 Recommended: use lazy initialization to ensure a stable value
function Component() {
  const [id] = useState(() => crypto.randomUUID());
  return <div key={id}>Content</div>;
}
```

```tsx
// 🔴 Problem: useMemo cannot make an impure call pure
function Component() {
  const value = useMemo(() => Math.random(), []);
  //                  ^^^ Do not call 'Math.random()' during render. Components and hooks must be pure. Move this call into an event handler, effect, or state initializer.
  return <div>{value}</div>;
}
```

### Using time-based values during render [#using-time-based-values-during-render]

Time-based values change constantly. Using them directly in render makes the component impure and causes unnecessary re-renders or hydration issues.

```tsx
// 🔴 Problem: time-based value changes on every render
function Component() {
  const timestamp = Date.now(); // constantly changing
  //                ^^^ Do not call 'Date.now()' during render. Components and hooks must be pure. Move this call into an event handler, effect, or state initializer.
  return <div>Created at: {timestamp}</div>;
}
```

```tsx
// 🔴 Problem: new Date() is also impure
function Component() {
  const date = new Date(); // new time on every render
  //           ^^^ Do not call 'new Date()' during render. Components and hooks must be pure. Move this call into an event handler, effect, or state initializer.
  return <div>{date.toISOString()}</div>;
}
```

```tsx
// 🟢 Recommended: use time-based values in effects or event handlers
function Component() {
  useEffect(() => {
    const timestamp = Date.now();
    console.log(timestamp);
  }, []);
  return <div>Content</div>;
}
```

### Showing the current time [#showing-the-current-time]

Calling `Date.now()` directly in JSX produces a different value on every render and makes the component impure.

```tsx
// 🔴 Problem: time changes on every render
function Clock() {
  return <div>Current time: {Date.now()}</div>;
}
```

When you need to display a constantly updating value like the current time, use state and an effect rather than calling `Date.now()` directly in render.

```tsx
// 🟢 Recommended: manage time with state and effects
function Clock() {
  const [time, setTime] = useState(() => Date.now());
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(Date.now());
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return <div>Current time: {time}</div>;
}
```

### Using time-based values in custom hooks [#using-time-based-values-in-custom-hooks]

Custom hooks are also part of the render phase, so impure calls inside them are flagged just like in components.

```tsx
// 🔴 Problem: impure call inside a custom hook
function useTimestamp() {
  const t = Date.now(); // called during render
  //        ^^^ Do not call 'Date.now()' during render. Components and hooks must be pure. Move this call into an event handler, effect, or state initializer.
  return t;
}
```

```tsx
// 🟢 Recommended: move impure logic into an effect
function useTimestamp() {
  const [timestamp, setTimestamp] = useState(() => Date.now());
  useEffect(() => {
    setTimestamp(Date.now());
  }, []);
  return timestamp;
}
```

### Impure calls in event handlers and effects [#impure-calls-in-event-handlers-and-effects]

Event handlers and effects run outside of React's render cycle, so impure functions are perfectly acceptable there.

```tsx
// 🟢 Recommended: use random numbers in event handlers
function Component() {
  return (
    <button onClick={() => console.log(Math.random())}>
      Roll
    </button>
  );
}
```

```tsx
// 🟢 Recommended: use timestamps in effects
function Component() {
  useEffect(() => {
    const timestamp = Date.now();
    console.log(timestamp);
  }, []);
  return <div>Content</div>;
}
```

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/purity/purity.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/purity/purity.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/purity/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `purity` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/purity)
* [React Docs: Components and Hooks must be pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure)
* [React Docs: Keeping Components Pure](https://react.dev/learn/keeping-components-pure)

***

## See Also [#see-also]

* [`react-x/immutability`](./immutability)\
  Validates against passing functions that mutate captured local variables into frozen contexts such as JSX props, hook arguments, and hook return values.
* [`react-x/rules-of-hooks`](./rules-of-hooks)\
  Enforces the Rules of Hooks.
* [`react-x/unsupported-syntax`](./unsupported-syntax)\
  Validates against syntax that React Compiler does not support.


# refs (/docs/rules/refs)





<Callout type="warn">
  This is an evaluation implementation and may contain false positives or negatives that have not yet been fully audited. Review each report carefully before applying fixes.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/refs
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/refs
```

**Features**

`🧪`

## Rule Details [#rule-details]

Refs hold values that aren't used for rendering. Unlike state, changing a ref doesn't trigger a re-render. Reading or writing `ref.current` during render breaks React's expectations. Refs might not be initialized when you try to read them, and their values can be stale or inconsistent.

## How It Detects Refs [#how-it-detects-refs]

The lint only applies these rules to values it knows are refs. A value is inferred as a ref when:

* **Returned from `useRef()` or `React.createRef()`.**

  ```tsx
  const scrollRef = useRef(null);
  ```

* **An identifier named `ref` or ending in `Ref` that reads from or writes to `.current`.**

  ```tsx
  buttonRef.current = node;
  ```

* **Passed through a JSX `ref` prop** (for example `<div ref={someRef} />`).

  ```tsx
  <input ref={inputRef} />
  ```

Once something is marked as a ref, the lint surfaces violations when `ref.current` is accessed during the render phase of a component or hook. Effects, event handlers, `useCallback`, timers, promise handlers, and other deferred callbacks are outside render. A nested function only shields the access it contains if that function is not invoked during render: calling a local helper (even through an alias), an IIFE, a synchronous array callback, or a `useState`/`useMemo`/`useReducer` render-time callback is still checked.

```tsx
// 🔴 Problem: helper mutates a ref, and is called during render
function Component() {
  const ref = useRef(null);
  const setRef = () => {
    ref.current = false;
    // ^^^ flagged: this runs during render
  };
  setRef();
  return <button ref={ref} />;
}
```

## Examples [#examples]

### Reading `ref.current` during render [#reading-refcurrent-during-render]

Refs are not guaranteed to be initialized during render. Reading them in the component body may return `null` or a stale value from a previous render cycle.

```tsx
// 🔴 Problem: reading ref during render
function Component() {
  const ref = useRef(0);
  const value = ref.current; // read during render
  //            ^^^ Cannot access refs during render
  return <div>{value}</div>;
}
```

```tsx
// 🟢 Recommended: use state to display values
function Component() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}
```

### Reading `ref.current` in custom hooks [#reading-refcurrent-in-custom-hooks]

Custom hooks follow the same rules as components. Reading `ref.current` during the execution of a custom hook is still part of the render phase.

```tsx
// 🔴 Problem: reading ref.current inside a custom hook during render
function useMyHook() {
  const ref = useRef(0);
  const value = ref.current;
  //            ^^^ Cannot access refs during render
  return value;
}
```

```tsx
// 🟢 Recommended: pass the ref to a component and read it in an effect
function Component() {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current) {
      console.log(ref.current.offsetWidth);
    }
  }, []);
  return <div ref={ref} />;
}
```

### Modifying `ref.current` during render [#modifying-refcurrent-during-render]

Writing to a ref during render is a side effect. React may invoke your component multiple times before committing, so the ref write may happen more often than you expect.

```tsx
// 🔴 Problem: modifying ref during render
function Component({ value }) {
  const ref = useRef(null);
  ref.current = value; // modified during render
  // ^^^ Cannot update ref during render
  return <div />;
}
```

```tsx
// 🟢 Recommended: modify refs in effects or event handlers
function Component() {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current) {
      console.log(ref.current.offsetWidth);
    }
  });
  return <div ref={ref} />;
}
```

```tsx
// 🟢 Recommended: use useLayoutEffect when you need to measure DOM nodes before paint
function Component() {
  const ref = useRef(null);
  useLayoutEffect(() => {
    console.log(ref.current);
  }, []);
  return <div ref={ref} />;
}
```

### Lazy initialization of ref value [#lazy-initialization-of-ref-value]

There is one exception: lazy initialization of a ref value behind an exact `null` or `undefined` check is a common and safe pattern, as long as it only runs once. Truthiness checks such as `if (!ref.current)` are not sufficient because an initialized ref may legitimately contain `0`, `false`, or an empty string.

```tsx
// 🔵 OK: lazy initialization of ref value
function Component() {
  const ref = useRef(null);
  if (ref.current === null) {
    ref.current = expensiveComputation(); // lazy initialization
  }
  const handleClick = () => {
    console.log(ref.current);
  };
  return <button onClick={handleClick}>Click</button>;
}
```

Only a single guarded initialization per ref is allowed. Guarding the same ref a second time (whether in the same or a different `if` block) is flagged, since it means the ref is being initialized more than once during render.

```tsx
// 🔴 Problem: the same ref is guard-initialized twice
function Component() {
  const ref = useRef(null);
  if (ref.current == null) {
    ref.current = 1;
  }
  if (ref.current == null) {
    ref.current = 2;
    // ^^^ Ref is initialized more than once during render.
  }
  return <div />;
}
```

### Using refs for rendered values [#using-refs-for-rendered-values]

If a value affects what is shown on screen, it should be state, not a ref. Refs are meant for values that don't affect rendering output.

```tsx
// 🔴 Problem: using a ref to store a value that needs to be displayed in JSX
function Component() {
  const ref = useRef(0);
  return <div>{ref.current}</div>;
  //          ^^^ Cannot access refs during render
}
```

```tsx
// 🟢 Recommended: use state to store rendered values
function Component() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}
```

## Troubleshooting [#troubleshooting]

### The lint flagged my plain object with `.current` [#the-lint-flagged-my-plain-object-with-current]

The name heuristic intentionally treats `ref.current` and `fooRef.current` as real refs. If you're modeling a custom container object, pick a different name (for example, `box`) or move the mutable value into state. Renaming avoids the lint because the compiler stops inferring it as a ref.

## Options [#options]

### Shared Settings [#shared-settings]

Custom ref hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalRefHooks": "(useMyRef|useCustomRef)"
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.18.0] - 2026-07-23">
    ### Changed [#changed]

    * Replaced `isUseRefCall` with `isUseRefLikeCall` in binding resolution; values initialized by custom ref hooks matching the `additionalRefHooks` setting are now treated as refs.
  </Accordion>

  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed-1]

    * Replaced the local `getCalleeName` helper with `Extract.getCalleeName` from `@eslint-react/ast`.
    * Ref-like name checks and `.current` property checks now only apply to non-computed identifier properties.
  </Accordion>

  <Accordion title="[5.14.0] - 2026-07-10">
    ### Added [#added]

    * Added render-reachability support for function declarations, IIFEs, synchronous array callbacks, and render-time callbacks passed to `useMemo` and `useReducer`.
    * Added lazy-initialization support for explicit `undefined` guards and for null guards enclosing additional nested conditions.

    ### Changed [#changed-2]

    * Refactored ref aliases, function bindings, JSX refs, and duplicate initialization tracking to use scoped ESLint variable identities and position-aware binding events instead of file-wide identifier names.
    * Reworked render-time call analysis as an unbounded fixed-point propagation, removing the previous 50-iteration cap.
    * Tightened inverted lazy-initialization handling so the non-null branch must unconditionally return or throw.
    * Stopped treating `!ref.current` as a null guard because initialized refs may contain falsy values.
  </Accordion>

  <Accordion title="[5.13.1] - 2026-07-09">
    ### Changed [#changed-3]

    * Aligned error message wording for `readDuringRender`, `writeDuringRender`, and `refPassedToFunction` with the React Compiler specification (`refs.spec.md`).
  </Accordion>

  <Accordion title="[5.13.0] - 2026-07-09">
    ### Added [#added-1]

    * Added detection of nested property writes on a ref's value (e.g. `ref.current.inner = value`), which are now reported as `writeDuringRender` instead of being misclassified as a read.
    * Added tracking of functions bound to (and called through) simple object-member-expression targets (e.g. `object.foo = () => ref.current; object.foo();`), closing a gap in the render-reachability analysis that previously only covered plain variable bindings.
    * Added detection of `ref.current` accesses inside the lazy initializer function passed directly as `useState`'s first argument, since it runs synchronously during the initial render unlike other hook-callback arguments.
    * Added an exemption for calls to a function named `render` (e.g. `props.render(ref)`, a common render-prop pattern) from the `refPassedToFunction` diagnostic, alongside the existing `mergeRefs`/hook exemptions.

    ### Changed [#changed-4]

    * Made lazy-init guard-block detection direction-aware: inside the branch of an `if (ref.current == null)`-style guard that is guaranteed to see `ref.current` as null, only a direct write is now treated as the (single) valid initialization - reads or values passed to a function there are still reported, matching `refs.spec.md`'s `ValidateNoRefAccessInRender` semantics. Reading the already-initialized value back in the other branch (the `if (x.current !== null) { return x.current; }` memoization idiom) remains allowed.
    * Replaced `isRefCurrentNullCheck` with `getRefCurrentNullCheckBranch` in `lib.ts`, which reports which branch of a guard is the null branch instead of just whether the test is a recognized null check.
    * Updated `refs.spec.diff.md` to reflect the fixes above and corrected the "Non-null Lazy Init Guards" entry, which was not an actual gap since `refs.spec.md` itself treats guards like `if (r.current == DEFAULT_VALUE)` as errors.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Added [#added-2]

    * Added detection of ref mutations/reads inside helper functions that are called (directly, or through a simple variable alias) during render, closing a gap where any nested function was previously treated as a safe boundary regardless of whether it was actually invoked during render.
    * Added `duplicateRefInit` diagnostic: only a single `if (ref.current == null) { ref.current = ... }` guarded initialization is now allowed per ref per component/hook; a second guarded write (in the same or a different `if` block) is now reported.
    * Added support for `.current` accesses whose base is a member expression that looks like a ref (e.g. `props.ref.current`), not just a plain identifier.

    ### Changed [#changed-5]

    * Refactored rule internals (`computeReachedFunctions`, `isReachedDuringRender`) to more closely follow the phased algorithm described in `refs.spec.md`.
    * Updated `refs.spec.diff.md` to reflect closed gaps and document remaining, intentional deviations from the React Compiler specification (e.g. callbacks passed to array methods or hooks are still treated as safe, to preserve existing accepted patterns).
  </Accordion>

  <Accordion title="[5.6.4] - 2026-05-01">
    ### Changed [#changed-6]

    * Refactored internal traversal to use the new `findParent` with `stop` predicate for more controlled ancestor traversal. (#1736)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/refs/refs.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/refs/refs.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/refs/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `refs` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/refs)
* [React Docs: `useRef`](https://react.dev/reference/react/useRef)
* [React Docs: Referencing Values with Refs](https://react.dev/learn/referencing-values-with-refs)

***

## See Also [#see-also]

* [`react-naming-convention/ref-name`](./naming-convention-ref-name)\
  Enforces identifier names assigned from `useRef` calls to be either `ref` or end with `Ref`.
* [`react-x/no-create-ref`](./no-create-ref)\
  Disallows `createRef` in function components and Hooks.
* [`react-x/no-forward-ref`](./no-forward-ref)\
  Replaces usage of `forwardRef` with passing `ref` as a prop.


# function-definition (/docs/rules/rsc-function-definition)





<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in `eslint-plugin-react-rsc`**

```plain copy
react-rsc/function-definition
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/rsc-function-definition
```

**Features**

`🔧` `🧪`

**Presets**

`rsc`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

It includes the following checks:

1. If a file has a top-level `'use server'` directive, exported functions must be async. Functions with their own `'use server'` directive must also be async.
2. If a file has a top-level `'use client'` or `'use server'` directive, it must be placed at the very beginning of the file, before any imports or other code. Comments above the directive are allowed.
3. If a function has a `'use server'` directive, it must be placed at the very beginning of the function body.
4. `'use client'` and `'use server'` directives must be written with single or double quotes, not backticks.
5. The `'use client'` directive must not be used inside a function body.

## Examples [#examples]

### Server functions not marked as async [#server-functions-not-marked-as-async]

```tsx
// 🔴 Problem: Exported server functions must be async
'use server';

export function serverFunction1() {
  // ...
}

export const serverFunction2 = function() {
  // ...
};

export const serverFunction3 = () => {
  // ...
};
```

```tsx
// 🔴 Problem: Server functions inside components must be async
export function Component() {
  function serverFunction1() {
    'use server';
    // ...
  }

  const serverFunction2 = function() {
    'use server';
    // ...
  };

  const serverFunction3 = () => {
    'use server';
    // ...
  };

  return <div>...</div>;
}
```

### Correctly marking server functions as async [#correctly-marking-server-functions-as-async]

```tsx
// 🟢 Recommended: Exported async server functions
'use server';

export async function serverFunction1() {
  // ...
}

export const serverFunction2 = async function() {
  // ...
};

export const serverFunction3 = async () => {
  // ...
};
```

```tsx
// 🟢 Recommended: Async server functions inside components
export function Component() {
  async function serverFunction1() {
    'use server';
    // ...
  }

  const serverFunction2 = async function() {
    'use server';
    // ...
  };

  const serverFunction3 = async () => {
    'use server';
    // ...
  };

  return <div>...</div>;
}
```

### Incorrect directive placement or syntax [#incorrect-directive-placement-or-syntax]

```tsx
// 🔴 Problem: Directive must be at the very beginning of the file, before imports
import { useState } from 'react';

'use client';
```

```tsx
// 🔴 Problem: Directive must be at the very beginning of the function body
export function Component() {
  const x = 1;

  function serverFunction() {
    'use server';
    // ...
  }
}
```

```tsx
// 🔴 Problem: Directives must use single or double quotes, not backticks
`use client`;
```

```tsx
// 🔴 Problem: 'use client' must not be used inside a function body
export function Component() {
  function serverFunction() {
    'use client';
    // ...
  }
}
```

### Correct directive placement and syntax [#correct-directive-placement-and-syntax]

```tsx
// 🟢 Recommended: Directive at the top of the file before imports
'use client';

import { useState } from 'react';
```

```tsx
// 🟢 Recommended: Directive at the beginning of the function body
export function Component() {
  async function serverFunction() {
    'use server';
    // ...
  }
}
```

```tsx
// 🟢 Recommended: Double quotes are also acceptable
"use client";

import { useState } from 'react';
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.1] - 2026-07-11">
    ### Fixed [#fixed]

    * Fixed invalid async autofixes for object and class methods with local `'use server'` directives, including generator and computed methods; accessors and constructors are now reported without an unsafe fix.
  </Accordion>

  <Accordion title="[5.6.0] - 2026-04-29">
    ### Added [#added]

    * Added directive position and quote checks. (#1721)
  </Accordion>

  <Accordion title="[2.9.2] - 2026-02-02">
    ### Changed [#changed]

    * Separated message ids for more granular reporting. (#1460)
  </Accordion>

  <Accordion title="[2.9.0] - 2026-02-02">
    ### Added [#added-1]

    * Initial release of the `rsc/function-definition` rule, migrated from `no-non-async-server-functions`. (#1457)
    * Reports non-async server functions in React Server Components.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-rsc/src/rules/function-definition/function-definition.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-rsc/src/rules/function-definition/function-definition.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-rsc/src/rules/function-definition/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `'use client'` Caveats](https://react.dev/reference/rsc/use-client#caveats)
* [React Docs: `'use server'` Caveats](https://react.dev/reference/rsc/use-server#caveats)
* [Next.js Docs: Invalid "use server" Value](https://nextjs.org/docs/messages/invalid-use-server-value).


# rules-of-hooks (/docs/rules/rules-of-hooks)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/rules-of-hooks
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/rules-of-hooks
```

**Features**

`⚙️` `🔧`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

React relies on the order in which hooks are called to correctly preserve state between renders. Each time your component renders, React expects the exact same hooks to be called in the exact same order. When hooks are called conditionally or in loops, React loses track of which state corresponds to which hook call, leading to bugs like state mismatches and "Rendered fewer/more hooks than expected" errors.

## Examples [#examples]

### Calling hooks conditionally [#calling-hooks-conditionally]

Hooks must be called in the exact same order on every render. Placing a hook inside an `if` statement breaks this contract because the hook may be skipped on some renders.

```tsx
// 🔴 Problem: calling hook conditionally
function MyComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    const [user, setUser] = useState(null);
    //    ^^^ React Hook "useState" is called conditionally.
  }
}
```

```tsx
// 🟢 Recommended: call hooks unconditionally and handle conditions inside
function MyComponent({ isLoggedIn }) {
  useEffect(() => {
    if (isLoggedIn) {
      fetchUserData();
    }
  }, [isLoggedIn]);
}
```

### Hooks after early return [#hooks-after-early-return]

An early return before a hook call also makes the hook conditional — it won't run on renders that hit the return statement.

```tsx
// 🔴 Problem: early return causes conditional hook execution
function MyComponent({ data }) {
  if (!data) return <Loading />;

  const [processed, setProcessed] = useState(data);
  //    ^^^ React Hook "useState" is called conditionally.
}
```

```tsx
// 🟢 Recommended: move hooks to the top of the component and handle conditions in JSX
function MyComponent({ data }) {
  const [processed, setProcessed] = useState(data);

  if (!data) return <Loading />;

  return <div>{processed}</div>;
}
```

### Hooks inside callbacks or loops [#hooks-inside-callbacks-or-loops]

Hooks must be called at the top level of a React function component or custom hook. Calling them inside callbacks, loops, or nested functions means they won't be called in a predictable order.

```tsx
// 🔴 Problem: calling hook inside a callback
function MyComponent() {
  return (
    <button
      onClick={() => {
        const [clicked, setClicked] = useState(false);
        //    ^^^ React Hook "useState" cannot be called inside a callback.
      }}
    />
  );
}
```

```tsx
// 🔴 Problem: calling hook inside a loop
function MyComponent({ items }) {
  for (const item of items) {
    const [selected, setSelected] = useState(false);
    //    ^^^ React Hook "useState" may be executed more than once.
  }
}
```

```tsx
// 🟢 Recommended: call hooks at the top level of the component and use state updater functions in callbacks
function MyComponent() {
  const [clicked, setClicked] = useState(false);
  return <button onClick={() => setClicked(true)}>Click</button>;
}
```

### Conditionally initializing state [#conditionally-initializing-state]

You may be tempted to call `useState` inside a condition when you want different initial values for different scenarios. This breaks the Rules of Hooks because the number of hook calls changes between renders.

```tsx
// 🔴 Problem: conditionally initializing state
function MyComponent({ userType, adminPerms, userPerms }) {
  if (userType === "admin") {
    const [permissions, setPermissions] = useState(adminPerms);
    //    ^^^ React Hook "useState" is called conditionally.
  } else {
    const [permissions, setPermissions] = useState(userPerms);
    //    ^^^ React Hook "useState" is called conditionally.
  }
}
```

```tsx
// 🟢 Recommended: call useState unconditionally and set the initial value conditionally
function MyComponent({ userType, adminPerms, userPerms }) {
  const [permissions, setPermissions] = useState(
    userType === "admin" ? adminPerms : userPerms,
  );
}
```

### `use` in try/catch blocks [#use-in-trycatch-blocks]

The `use` hook cannot be called from inside a `try` block because React needs to be able to suspend the component, and try/catch interferes with React's internal exception handling for Suspense.

```tsx
// 🔴 Problem: calling use inside a try block
function MyComponent({ promise }) {
  try {
    const data = use(promise);
    //           ^^^ React Hook "use" cannot be called from a try block.
  } catch (e) {
    // error handling
  }
}
```

```tsx
// 🟢 Recommended: call use outside the try block
function MyComponent({ promise }) {
  const data = use(promise);
  // ...
}
```

### The `use` hook [#the-use-hook]

The `use` hook is different from other React hooks. You can call it conditionally and in loops:

```tsx
// 🟢 `use` can be conditional
function Component({ shouldFetch, fetchPromise }) {
  if (shouldFetch) {
    const data = use(fetchPromise);
    return <div>{data}</div>;
  }
  return <div>Nothing to fetch</div>;
}
```

```tsx
// 🟢 `use` can be in loops
function Component({ promises }) {
  const results = [];
  for (const promise of promises) {
    results.push(use(promise));
  }
  return <div>{results.join(", ")}</div>;
}
```

However, `use` still has restrictions:

* Can't be wrapped in try/catch
* Must be called inside a component or hook

Learn more: [`use` API Reference](https://react.dev/reference/react/use)

### Hooks at top level [#hooks-at-top-level]

When all hooks are called unconditionally at the top level, React can reliably match each hook call to its corresponding state across renders.

```tsx
// 🟢 Recommended: call hooks unconditionally at the top level in a fixed order
function MyComponent({ isSpecial, shouldFetch, fetchPromise }) {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  if (!isSpecial) {
    return null;
  }

  if (shouldFetch) {
    const data = use(fetchPromise);
    return <div>{data}</div>;
  }

  return (
    <div>
      {name}: {count}
    </div>
  );
}
```

```tsx
// 🟢 Recommended: custom hooks should also call other hooks at the top level
function useUserData(userId) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  return user;
}
```

## Options [#options]

### Rule Options [#rule-options]

This rule accepts an optional configuration object:

```ts
type Options = {
  additionalHooks?: string;
};
```

```json
{
  "react-x/rules-of-hooks": ["error", {
    "additionalHooks": "(useMyCustomHook|useAnotherHook)"
  }]
}
```

#### `additionalHooks` [#additionalhooks]

A regex string matching custom hook names that should be validated under the same rules as built-in React hooks.

**Note:** When this rule-level option is specified, it takes precedence over the shared `settings` configuration described below.

### Shared Settings [#shared-settings]

Custom effect hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalEffectHooks": "/^(useMyEffect|useCustomEffect)$/u"
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[3.0.0] - 2026-03-16">
    ### Changed [#changed]

    * Refactored code-path-analysis modules for more accurate hook validation. (#1539)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/rules-of-hooks/rules-of-hooks.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/rules-of-hooks/rules-of-hooks.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/rules-of-hooks/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `rules-of-hooks` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/rules-of-hooks)
* [React Docs: Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks)
* [React Docs: `use`](https://react.dev/reference/react/use)

***

## See Also [#see-also]

* [`react-x/exhaustive-deps`](./exhaustive-deps)\
  Verifies the list of dependencies for Hooks like `useEffect` and similar.


# set-state-in-effect (/docs/rules/set-state-in-effect)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/set-state-in-effect
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/set-state-in-effect
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Setting state immediately inside an effect forces React to restart the entire render cycle. When you update state in an effect, React must re-render your component, apply changes to the DOM, and then run effects again. This creates an extra render pass that could have been avoided by transforming data directly during render or deriving state from props.

Synchronous `setState` calls in effects trigger immediate re-renders before the browser can paint, causing performance issues and visual jank. React has to render twice: once to apply the state update, then again after effects run. This double rendering is wasteful when the same result could be achieved with a single render.

**When something can be calculated from the existing props or state, don't put it in state.** Instead, calculate it during rendering. This makes your code faster, simpler, and less error-prone.

In many cases, you may also not need an effect at all. Please see [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect) for more information.

## Examples [#examples]

### Transforming data in effects instead of render [#transforming-data-in-effects-instead-of-render]

When data can be derived directly from props, putting it in state inside an effect creates an unnecessary render cycle.

```tsx
// 🔴 Problem: transforming data in an effect
function Component({ rawData }) {
  const [processed, setProcessed] = useState([]);

  useEffect(() => {
    setProcessed(rawData.map(transform)); // extra render, should compute directly during rendering
  }, [rawData]);
}
```

```tsx
// 🟢 Recommended: compute directly during rendering
function Component({ rawData }) {
  const processed = useMemo(() => rawData.map(transform), [rawData]);
  // ...
}
```

```tsx
// 🟢 Recommended: simple computations can be done directly during rendering
function Component({ selectedId, items }) {
  const selected = items.find((i) => i.id === selectedId);
  return <div>{selected?.name}</div>;
}
```

### Deriving state from props in effects [#deriving-state-from-props-in-effects]

Synchronously setting state based on props in an effect is a common anti-pattern that causes extra renders.

```tsx
// 🔴 Problem: setting state based on props in an effect
function Component({ selectedId, items }) {
  const [selected, setSelected] = useState(null);

  useEffect(() => {
    setSelected(items.find((i) => i.id === selectedId));
  }, [selectedId, items]);
}
```

```tsx
// 🟢 Recommended: derive values during rendering
function Component({ selectedId, items }) {
  const selection = items.find((item) => item.id === selectedId) ?? null;
  // ...
}
```

### Resetting state on prop changes [#resetting-state-on-prop-changes]

Using an effect to reset state when a prop changes causes an extra render. Instead, use the `key` prop to reset state automatically.

```tsx
// 🔴 Problem: resetting state in an effect
function ProfilePage({ userId }) {
  const [comment, setComment] = useState("");

  useEffect(() => {
    setComment(""); // extra render
  }, [userId]);
}
```

```tsx
// 🟢 Recommended: use the key prop to reset state automatically
function ProfilePage({ userId }) {
  return <Profile userId={userId} key={userId} />;
}

function Profile({ userId }) {
  const [comment, setComment] = useState("");
  // automatically resets when key changes
}
```

### Setting synchronous loading state [#setting-synchronous-loading-state]

Toggling a loading flag synchronously at the start of an effect causes an immediate re-render before any actual work begins.

```tsx
// 🔴 Problem: setting loading state synchronously
function Component() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true); // synchronously triggers extra render
    fetchData().then(() => setLoading(false));
  }, []);
}
```

```tsx
// 🟢 Recommended: initialize loading state to true so no synchronous setState is needed
function Component() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchData().then(() => setLoading(false));
  }, []);
}
```

### Indirect setState calls are allowed [#indirect-setstate-calls-are-allowed]

The rule does not flag indirect calls, such as inside event handlers, async functions, or timers. These run outside of the synchronous effect execution and do not cause the same immediate re-render problem.

```tsx
// 🔵 OK: setState in an event handler
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const handler = () => setCount((c) => c + 1);
    window.addEventListener("click", handler);
    return () => window.removeEventListener("click", handler);
  }, []);
}
```

```tsx
// 🔵 OK: setState in an async function
function RemoteContent() {
  const [content, setContent] = useState("");

  useEffect(() => {
    let discarded = false;
    fetch("https://eslint-react.xyz/content")
      .then((resp) => resp.text())
      .then((text) => {
        if (discarded) return;
        setContent(text); // allowed in async callback
      });
    return () => {
      discarded = true;
    };
  }, []);
}
```

## Known Limitations [#known-limitations]

### Cleanup functions [#cleanup-functions]

The rule does not check `set` calls inside `useEffect` cleanup functions.

```tsx
// Note: setState in a cleanup function is not flagged
function Component({ firstName, lastName }) {
  useEffect(() => {
    return () => {
      setFullName(firstName + " " + lastName); // not detected
    };
  }, [firstName, lastName]);
}
```

### Async functions before await [#async-functions-before-await]

The rule does not detect `set` calls in `async` functions that are called before the first `await` statement.

```tsx
// Note: setState before await in an async function is not flagged
function Component({ data }) {
  useEffect(() => {
    const fetchData = async () => {
      setFullName(data.name); // not detected
      await syncToServer(data);
    };
    fetchData();
  }, [data]);
}
```

## Options [#options]

### Shared Settings [#shared-settings]

Custom ref, state, and effect hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalRefHooks": "/^(useMyRef|useCustomRef)$/u",
      "additionalStateHooks": "/^(useMyState|useCustomState)$/u",
      "additionalEffectHooks": "/^(useMyEffect|useCustomEffect)$/u"
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.18.0] - 2026-07-23">
    ### Changed [#changed]

    * Replaced `isUseRefCall` with `isUseRefLikeCall` when checking whether a value is initialized from a ref; custom ref hooks matching the `additionalRefHooks` setting are now recognized.
  </Accordion>

  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed-1]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-2]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[5.6.0] - 2026-04-29">
    ### Fixed [#fixed]

    * Fixed type expression handling by unwrapping type expressions before inspecting AST node types. (#1732)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/set-state-in-effect/set-state-in-effect.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/set-state-in-effect/set-state-in-effect.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/set-state-in-effect/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `set-state-in-effect` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect)
* [React Docs: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
* [React Docs: `useEffect`](https://react.dev/reference/react/useEffect)
* [React Docs: `useLayoutEffect`](https://react.dev/reference/react/useLayoutEffect)
* [React Docs: `useState`](https://react.dev/reference/react/useState)

***

## See Also [#see-also]

* [`react-x/set-state-in-render`](./set-state-in-render)\
  Validates against unconditionally setting state during render, which can trigger additional renders and potential infinite render loops.


# set-state-in-render (/docs/rules/set-state-in-render)





<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/set-state-in-render
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/set-state-in-render
```

**Features**

`🧪`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Calling `setState` during render unconditionally triggers another render before the current one finishes. This creates an infinite loop that crashes your app.

## Examples [#examples]

### Unconditional setState in render [#unconditional-setstate-in-render]

Calling a state setter directly in the component body, without any guard condition, will trigger a re-render immediately, leading to an infinite loop.

```tsx
// 🔴 Problem: unconditionally calling setState during render
function Component({ value }) {
  const [count, setCount] = useState(0);
  setCount(value); // infinite loop!
  return <div>{count}</div>;
}
```

```tsx
// 🟢 Recommended: derive values directly during rendering
function Component({ items }) {
  const sorted = [...items].sort();
  return <ul>{sorted.map(/*...*/)}</ul>;
}
```

```tsx
// 🟢 Recommended: set state in event handlers
function Component() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}
```

### Deriving values from props [#deriving-values-from-props]

If you only need to transform props before displaying them, compute the value directly during rendering instead of copying it into state.

```tsx
// 🟢 Recommended: derive values directly during rendering
function Component({ user }) {
  const name = user?.name || "";
  const email = user?.email || "";
  return <div>{name}</div>;
}
```

### Syncing state to a prop [#syncing-state-to-a-prop]

A common mistake is trying to "fix" state after it renders. For example, clamping a counter to a `max` prop during render causes an infinite loop as soon as the value exceeds the limit.

```tsx
// 🔴 Problem: adjusting state during render
function Counter({ max }) {
  const [count, setCount] = useState(0);

  if (count > max) {
    setCount(max); // triggers infinite loop when exceeding max
  }

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}
```

```tsx
// 🟢 Recommended: limit the value when updating
function Counter({ max }) {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(current => Math.min(current + 1, max));
  };

  return <button onClick={increment}>{count}</button>;
}
```

### Conditional state updates during render [#conditional-state-updates-during-render]

In rare cases, you may need to adjust state based on information from previous renders. This is valid only when guarded by a condition that prevents infinite loops.

```tsx
// 🔵 OK: conditionally updating state based on information from the previous render
function Component({ items }) {
  const [isReverse, setIsReverse] = useState(false);
  const [selection, setSelection] = useState(null);

  const [prevItems, setPrevItems] = useState(items);
  if (items !== prevItems) { // condition prevents infinite loop
    setPrevItems(items);
    setSelection(null);
  }
  // ...
}
```

```tsx
// 🟢 Recommended: compute directly during rendering whenever possible
function Component({ items }) {
  const [isReverse, setIsReverse] = useState(false);
  const [selectedId, setSelectedId] = useState(null);
  const selection = items.find((item) => item.id === selectedId) ?? null;
  // ...
}
```

## Options [#options]

### Shared Settings [#shared-settings]

Custom state hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalStateHooks": "(useMyState|useCustomState)"
    }
  }
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[5.6.0] - 2026-04-29">
    ### Fixed [#fixed]

    * Fixed type expression handling by unwrapping type expressions before inspecting AST node types. (#1732)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/set-state-in-render/set-state-in-render.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/set-state-in-render/set-state-in-render.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/set-state-in-render/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `set-state-in-render` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-render)
* [React Docs: Storing information from previous renders](https://react.dev/reference/react/useState#storing-information-from-previous-renders)
* [React Docs: `useState`](https://react.dev/reference/react/useState)

***

## See Also [#see-also]

* [`react-x/set-state-in-effect`](./set-state-in-effect)\
  Validates against setting state synchronously in an effect, which can lead to re-renders that degrade performance.


# static-components (/docs/rules/static-components)





<Callout type="warn">
  This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
</Callout>

**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/static-components
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/static-components
```

**Features**

`🧪`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering.

Components defined inside other components are recreated on every render. React sees each as a brand new component type, unmounting the old one and mounting the new one, discarding all state and DOM nodes in the process.

If you find yourself wanting to define components inside other components to access local variables, that's a sign you should be passing props instead. This makes components more reusable and testable.

## Examples [#examples]

### Nesting component definitions [#nesting-component-definitions]

Defining a component inside another component causes it to be recreated on every parent render. React treats each definition as a distinct component type, causing the child to unmount and remount every time.

```tsx
// 🔴 Problem: defining a component inside another component
function Parent() {
  const Child = () => <div />;

  return <Child />; // resets state on every render
}
```

```tsx
// 🟢 Recommended: declare components at the top level
function Parent() {
  return <Child />;
}

function Child() {
  return <div />;
}
```

### Dynamically creating component types [#dynamically-creating-component-types]

Creating different component types based on props or state during render has the same problem — React cannot reconcile between different component types.

```tsx
// 🔴 Problem: dynamically creating components based on props
function Parent({ type }) {
  const Component = type === "button"
    ? () => <button>Click</button>
    : () => <div>Text</div>;

  return <Component />;
}
```

```tsx
// 🟢 Recommended: pass props instead of dynamically creating components
function Parent({ type }) {
  return type === "button"
    ? <Button>Click</Button>
    : <TextBox>Text</TextBox>;
}

function Button({ children }) {
  return <button>{children}</button>;
}

function TextBox({ children }) {
  return <div>{children}</div>;
}
```

### Accessing parent variables in nested components [#accessing-parent-variables-in-nested-components]

A common motivation for nesting components is to capture local variables from the parent scope. This should be solved with props instead.

```tsx
// 🔴 Problem: nesting components to access parent variables
function Parent({ items }) {
  const ItemList = () => (
    <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
  );

  return <ItemList />;
}
```

```tsx
// 🟢 Recommended: pass data via props
function Parent({ items }) {
  return <ItemList items={items} />;
}

function ItemList({ items }) {
  return (
    <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.11.0] - 2026-07-05">
    ### Changed [#changed]

    * Refactored the rule's internals without changing behavior:
      * `lib.ts`: `findVariableForIdentifier` now delegates to `@typescript-eslint/utils/ast-utils`'s `findVariable` instead of a hand-rolled scope-chain walk; split `resolveDynamicValue` into `findDynamicCreationSite` (expression resolution) and `findReassignmentCreationSite` (reassignment tracking); removed the unused `isDynamicComponent` export.
      * `static-components.ts`: extracted `createRenderBoundaryChecker` (merges function/class component nodes into a single `Set` for the render-boundary check) and `reportIfCreatedDuringRender` (per-candidate reporting) out of the `Program:exit` handler; JSX candidates are now collected as a typed `JsxComponentCandidate` list holding the `JSXIdentifier` directly.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/static-components/static-components.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/static-components/static-components.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/static-components/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `static-components` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components)
* [React Docs: React calls Components and Hooks](https://react.dev/reference/rules/react-calls-components-and-hooks)
* [React Docs: Nesting and organizing components](https://react.dev/learn/your-first-component#nesting-and-organizing-components)

***

## See Also [#see-also]

* [`react-x/no-nested-component-definitions`](./no-nested-component-definitions)\
  Disallows nesting component definitions inside other components.
* [`react-x/no-nested-lazy-component-declarations`](./no-nested-lazy-component-declarations)\
  Disallows nesting lazy component declarations inside other components or hooks.


# unsupported-syntax (/docs/rules/unsupported-syntax)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/unsupported-syntax
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/unsupported-syntax
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

React Compiler needs to statically analyze your code to apply optimizations. Features like `eval` and `with` make it impossible or impractical for the compiler to statically understand what the code does at compile time, so the compiler can't optimize components that use them.

This rule checks for the following unsupported patterns:

* **`eval`** — Dynamic code evaluation cannot be statically analyzed.
* **`with` statements** — Dynamically changes scope, preventing static analysis.

## Examples [#examples]

### Using `eval` in components [#using-eval-in-components]

`eval` executes code dynamically at runtime, making it impossible for any static analysis tool to understand what variables are accessed or modified.

```tsx
// 🔴 Problem: using eval in a component
function Component({ code }) {
  const result = eval(code); // cannot be statically analyzed
  return <div>{result}</div>;
}
```

```tsx
// 🟢 Recommended: use analyzable property access
function Component({ propName, props }) {
  const value = props[propName]; // statically analyzable
  return <div>{value}</div>;
}
```

```tsx
// 🔵 OK: using eval outside components and hooks is fine
function notAComponent() {
  const result = eval("1 + 2");
  return result;
}
```

### Using `with` statements [#using-with-statements]

The `with` statement dynamically modifies the scope chain at runtime. Static analysis tools cannot predict which identifiers refer to which objects inside a `with` block.

```tsx
// 🔴 Problem: using with in a component
function Component() {
  with (Math) { // dynamically changes scope
    return <div>{sin(PI / 2)}</div>;
  }
}
```

```tsx
// 🟢 Recommended: use standard method calls
function Component() {
  return <div>{Math.sin(Math.PI / 2)}</div>;
}
```

### Evaluating dynamic expressions safely [#evaluating-dynamic-expressions-safely]

If you need to evaluate user-provided code, use a safe expression parser instead of `eval`.

```tsx
// 🟢 Recommended: use a safe parsing library
import { evaluate } from 'mathjs';

function Calculator({ expression }) {
  const [result, setResult] = useState(null);
  const calculate = () => {
    try {
      setResult(evaluate(expression));
    } catch (error) {
      setResult('Invalid expression');
    }
  };
  return (
    <div>
      <button onClick={calculate}>Calculate</button>
      {result && <div>Result: {result}</div>}
    </div>
  );
}
```

> **Note:** Never use `eval` with user input — it's a security risk. Use dedicated parsing libraries for specific use cases like mathematical expressions, JSON parsing, or template evaluation.

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * `globalThis["eval"]` is no longer reported as an `eval` call, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Removed the IIFE-in-JSX check (`iife` message). Immediately-invoked function expressions in JSX are no longer reported by this rule, making it consistent with the upstream React documentation; it now only validates against `eval` and `with` statements.

    ### Changed [#changed-1]

    * `eval` detection now also recognizes `globalThis.eval` and `globalThis["eval"]` calls, including through type assertions (e.g. `(globalThis as any).eval`). Computed access with a non-static key (e.g. `globalThis[eval]`) is not reported.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/unsupported-syntax/unsupported-syntax.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/unsupported-syntax/unsupported-syntax.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/unsupported-syntax/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `unsupported-syntax` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/unsupported-syntax)
* [React Compiler: Directives](https://react.dev/reference/react-compiler/directives)


# use-memo (/docs/rules/use-memo)





**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/use-memo
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/use-memo
```

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This rule ensures that `useMemo()` callbacks follow React's requirements. It checks for several common mistakes:

1. Callbacks should not accept parameters (useMemo callbacks are called with no arguments)
2. Callbacks should not be async or generator functions (must return a value synchronously)
3. Callbacks should not reassign variables declared outside the callback (must be pure)
4. Callbacks should return a value (useMemo is for computing values, not side effects)
5. The result of useMemo should be used (not discarded)

## Examples [#examples]

### useMemo callback receiving parameters [#usememo-callback-receiving-parameters]

`useMemo` callbacks do not accept any parameters. All required data should be captured via closure.

```tsx
// 🔴 Problem: callback receives parameter c
import { useMemo } from "react";

function Component({ a, b }) {
  const x = useMemo((c) => a + c, [a]);
  return <div>{x}</div>;
}
```

```tsx
// 🟢 Recommended: use external variables directly via closure
import { useMemo } from "react";

function Component({ a, b }) {
  const x = useMemo(() => a + b, [a, b]);
  return <div>{x}</div>;
}
```

### Using async or generator functions in useMemo [#using-async-or-generator-functions-in-usememo]

`useMemo` is for synchronous value computation and does not support async or generator functions.

```tsx
// 🔴 Problem: using an async callback
import { useMemo } from "react";

function Component({ a }) {
  const x = useMemo(async () => {
    //             ^^^^^^^^^^^^^ Async and generator functions are not supported
    return await fetchData(a);
  }, [a]);
  return <div>{x}</div>;
}
```

### Reassigning external variables in a useMemo callback [#reassigning-external-variables-in-a-usememo-callback]

`useMemo` callbacks must be pure functions and should not modify variables in the outer scope.

```tsx
// 🔴 Problem: callback reassigns external variable x
import { useMemo } from "react";

function Component() {
  let x;
  const y = useMemo(() => {
    x = [];
    // ^^^ Cannot reassign variable
    return true;
  }, []);
  return <div>{x}{y}</div>;
}
```

```tsx
// 🟢 Recommended: only read external variables, do not modify them
import { useMemo } from "react";

function Component({ a, b }) {
  const sum = useMemo(() => a + b, [a, b]);
  return <div>{sum}</div>;
}
```

### useMemo callback without a return value [#usememo-callback-without-a-return-value]

The purpose of `useMemo` is to cache computed results, so the callback must explicitly return a value.

```tsx
// 🔴 Problem: callback has no return, result is always undefined
import { useMemo } from "react";

function Component({ data }) {
  const processed = useMemo(() => {
    data.forEach((item) => console.log(item));
  }, [data]);
  return <div>{processed}</div>;
}
```

```tsx
// 🟢 Recommended: return the computed value
import { useMemo } from "react";

function Component({ data }) {
  const processed = useMemo(() => {
    return data.map((item) => item * 2);
  }, [data]);
  return <div>{processed}</div>;
}
```

### Calling useMemo but not using its return value [#calling-usememo-but-not-using-its-return-value]

If the result of `useMemo` is not assigned or used, caching is pointless.

```tsx
// 🔴 Problem: useMemo return value is discarded
import { useMemo } from "react";

function Component({ user }) {
  useMemo(() => {
    // ^^^^^^ useMemo() result is unused
    return heavyComputation(user);
  }, [user]);
  return <div />;
}
```

```tsx
// 🟢 Recommended: assign the result to a variable and use it in JSX
import { useMemo } from "react";

function Component({ items }) {
  const sorted = useMemo(() => [...items].sort(), [items]);
  return <div>{sorted.join(", ")}</div>;
}
```

### Correctly returning computed values [#correctly-returning-computed-values]

When the callback correctly returns a synchronous computed value, `useMemo` works as expected.

```tsx
// 🔵 OK: returning a mapped array
import { useMemo } from "react";

function Component({ data }) {
  const processed = useMemo(() => {
    return data.map((item) => item * 2);
  }, [data]);
  return <div>{processed}</div>;
}
```

### Using concise arrow functions [#using-concise-arrow-functions]

Using arrow functions with implicit return makes `useMemo` callbacks more concise.

```tsx
// 🔵 OK: concise arrow function directly returns the computed result
import { useMemo } from "react";

function Component({ items }) {
  const sorted = useMemo(() => [...items].sort(), [items]);
  return <div>{sorted.join(", ")}</div>;
}
```

## Troubleshooting [#troubleshooting]

### I need to run side effects when dependencies change [#i-need-to-run-side-effects-when-dependencies-change]

You might try to use `useMemo` for side effects:

```tsx
// 🔴 Problem: Side effects in useMemo
function Component({ user }) {
  // No return value, just side effect
  useMemo(() => {
    analytics.track("UserViewed", { userId: user.id });
  }, [user.id]);

  // Not assigned to a variable
  useMemo(() => {
    return analytics.track("UserViewed", { userId: user.id });
  }, [user.id]);
}
```

If the side effect needs to happen in response to user interaction, it's best to colocate the side effect with the event:

```tsx
// 🟢 Recommended: Side effects in event handlers
function Component({ user }) {
  const handleClick = () => {
    analytics.track("ButtonClicked", { userId: user.id });
    // Other click logic...
  };

  return <button onClick={handleClick}>Click me</button>;
}
```

If the side effect synchronizes React state with some external state (or vice versa), use `useEffect`:

```tsx
// 🟢 Recommended: Synchronization in useEffect
function Component({ theme }) {
  useEffect(() => {
    localStorage.setItem("preferredTheme", theme);
    document.body.className = theme;
  }, [theme]);

  return <div>Current theme: {theme}</div>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.6.2] - 2026-04-30">
    ### Fixed [#fixed]

    * Fixed false positives in `useMemo` dependency analysis by using reference/definition analysis. (#1735)
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/use-memo/use-memo.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/use-memo/use-memo.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/use-memo/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `useMemo`](https://react.dev/reference/react/useMemo)
* [React Docs: `use-memo` Lint Rule](https://react.dev/reference/eslint-plugin-react-hooks/lints/use-memo)
* [React Compiler: `validateUseMemo`](https://github.com/facebook/react/tree/main/compiler/packages/babel-plugin-react-compiler/docs/passes/40-validateUseMemo.md)

***

## See Also [#see-also]

* [`react-x/use-state`](./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.


# use-state (/docs/rules/use-state)



**Full Name in [`eslint-plugin-react-x`](https://npmx.dev/package/eslint-plugin-react-x/v/latest)**

```plain copy
react-x/use-state
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/use-state
```

**Features**

`⚙️`

**Presets**

`x`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

This rule covers three concerns:

1. The return value of `useState` must be destructured into a value and setter pair (ex: `const [count, setCount] = useState(0)`). Bare calls or assignments (ex: `useState(0)` or `const count = useState(0)`) are reported as invalid usage.
2. The setter must be named symmetrically — `set` followed by the capitalized value name (ex: `count` -> `setCount`). The state value must be a plain identifier; destructured patterns (`ObjectPattern`, `ArrayPattern`, etc.) are reported as an invalid assignment form.
3. Function calls passed directly as the initial state argument are reported. Wrapping them in an initializer function (ex: `() => getValue()`) avoids re-invoking the function on every render.

> Lazy initialization behavior was previously a standalone `prefer-use-state-lazy-initialization` rule. That rule has been merged into `use-state` and removed.

## Examples [#examples]

### Not destructuring the useState return value [#not-destructuring-the-usestate-return-value]

`useState` must return a `[value, setter]` array pattern. Assigning directly to a single variable prevents calling the setter to update state.

```tsx
// 🔴 Problem: not destructured into a [value, setter] pair
import { useState } from "react";

function Counter() {
  const count = useState(0);
  //    ^^^ useState should be destructured into a value and setter pair, e.g. const [state, setState] = useState(...).
  return <div>{count}</div>;
}
```

If only the state value is needed and not the setter, you can destructure just the value:

```tsx
// 🔵 OK: destructure only the value, omitting the setter
import { useState } from "react";

function Component() {
  const [value] = useState(() => expensiveSetup());
  return <div>{value}</div>;
}
```

### Setter name does not follow the symmetric naming convention [#setter-name-does-not-follow-the-symmetric-naming-convention]

The setter name should be `set` followed by the capitalized state variable name, for example `count` corresponds to `setCount`. Snake\_case names also allow symmetric forms.

```tsx
// 🔴 Problem: setter name is not symmetric with the state name
import { useState } from "react";

function Counter() {
  const [count, updateCount] = useState(0);
  //            ^^^ The setter should be named 'set' followed by the capitalized state variable name, e.g. 'setCount' for 'count'.
  return <div>{count}</div>;
}
```

```tsx
// 🔴 Problem: correct prefix but case mismatch
import { useState } from "react";

function Counter() {
  const [count, setcount] = useState(0);
  return <div>{count}</div>;
}
```

```tsx
// 🟢 Recommended: use symmetric camelCase naming
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}
```

```tsx
// 🔵 OK: symmetric snake_case naming
import { useState } from "react";

function Counter() {
  const [foo_bar, set_foo_bar] = useState(0);
  return <div>{foo_bar}</div>;
}
```

### Using complex objects as state with plain identifiers [#using-complex-objects-as-state-with-plain-identifiers]

The state value itself must be a plain identifier and cannot be a destructuring pattern. However, storing objects or arrays as the state value is completely allowed.

```tsx
// 🔵 OK: object state stored under a plain identifier
import { useState } from "react";

function Form() {
  const [form, setForm] = useState({ foo: "a", bar: "b" });
  return <div>{form.foo}</div>;
}
```

### Passing a function call directly as the initial value [#passing-a-function-call-directly-as-the-initial-value]

If the initial value needs to be computed by a function, passing the function call directly causes it to re-execute on every render. It should be wrapped in a lazy initializer function.

```tsx
// 🔴 Problem: generateTodos is called on every render
import { useState } from "react";

function MyComponent() {
  const [value, setValue] = useState(generateTodos());
  //                                 ^^^ To prevent re-computation, consider using lazy initial state. Ex: 'useState(() => getValue())'.
  return null;
}

declare function generateTodos(): string[];
```

```tsx
// 🟢 Recommended: use a lazy initializer function that only runs on the first render
import { useState } from "react";

function MyComponent() {
  const [value, setValue] = useState(() => generateTodos());
  return null;
}

declare function generateTodos(): string[];
```

React's `use()` Hook is safe as an initial value because it has special handling semantics:

```tsx
// 🔵 OK: use() calls as the initial value are always allowed
import { useState, use } from "react";

function Component({ promise }) {
  const [data, setData] = useState(use(promise));
  return null;
}
```

## Options [#options]

### Rule Options [#rule-options]

```ts
type Options = {
  enforceAssignment?: boolean;         // default: true
  enforceSetterName?: boolean;         // default: true
  enforceLazyInitialization?: boolean; // default: true
};
```

#### `enforceAssignment` [#enforceassignment]

When `true`, requires `useState` to be destructured into a `[value, setter]` array pattern. Bare assignments (ex: `const state = useState(0)`) or calls without any assignment are reported.

Default: `true`

#### `enforceSetterName` [#enforcesettername]

When `true`, requires the setter to be named `set` + capitalized value name (ex: `setCount` for `count`). Snake-case and object-pattern state names are normalized before comparison.

Default: `true`

#### `enforceLazyInitialization` [#enforcelazyinitialization]

When `true`, reports function calls passed directly as the initial state argument to `useState`. React calls the initializer on every render and discards the result after the first — wrapping expensive calls in an [initializer function](https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state) avoids this overhead.

Primitive wrapper calls (`Boolean(...)`, `String(...)`, `Number(...)`) and React hook calls (including `use(...)`) are always allowed.

Default: `true`

### Shared Settings [#shared-settings]

Custom state hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:

```json
{
  "settings": {
    "react-x": {
      "additionalStateHooks": "/^(useMyState|useCustomState)$/u",
    }
  }
}
```

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/use-state/use-state.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/use-state/use-state.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-x/src/rules/use-state/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: `useState`](https://react.dev/reference/react/useState)
* [React Docs: Avoiding recreating the initial state](https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state)
* [React Docs: Storing information from previous renders](https://react.dev/reference/react/useState#storing-information-from-previous-renders)
* [React Docs: State naming conventions](https://react.dev/learn/state-a-components-memory#meet-your-first-hook)

***

## See Also [#see-also]

* [`react-x/use-memo`](./use-memo)\
  Validates that `useMemo` is called with a callback that returns a value.


# no-leaked-event-listener (/docs/rules/web-api-no-leaked-event-listener)





**Full Name in `eslint-plugin-react-web-api`**

```plain copy
react-web-api/no-leaked-event-listener
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/web-api-no-leaked-event-listener
```

**Presets**

`web-api`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Adding an event listener without removing it can lead to memory leaks and unexpected behavior because the event listener will continue to exist even after the component or hook is unmounted.

## Examples [#examples]

### Adding event listener without cleanup in useEffect [#adding-event-listener-without-cleanup-in-useeffect]

```tsx
import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    const handleClick = () => {
      console.log("clicked");
    };

    // 🔴 Problem: An 'addEventListener' in 'useEffect' should have a corresponding 'removeEventListener' in its cleanup function.
    document.addEventListener("click", handleClick);
  }, []);

  return null;
}
```

### Proper cleanup in useEffect [#proper-cleanup-in-useeffect]

```tsx
import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    const handleClick = () => {
      console.log("clicked");
    };

    // 🟢 Recommended: Add listener in effect setup
    document.addEventListener("click", handleClick);

    return () => {
      // 🟢 Recommended: Remove listener in effect cleanup
      document.removeEventListener("click", handleClick);
    };
  }, []);

  return null;
}
```

### Adding event listener without cleanup in class components [#adding-event-listener-without-cleanup-in-class-components]

```tsx
import React, { Component } from "react";

class MyComponent extends Component {
  componentDidMount() {
    // 🔴 Problem: An 'addEventListener' in 'componentDidMount' should have a corresponding 'removeEventListener' in the 'componentWillUnmount' method.
    document.addEventListener("click", this.handleClick);
  }

  handleClick() {
    console.log("clicked");
  }

  render() {
    return null;
  }
}
```

### Proper cleanup in class components [#proper-cleanup-in-class-components]

```tsx
import React, { Component } from "react";

class MyComponent extends Component {
  componentDidMount() {
    // 🟢 Recommended: Add listener in mount
    document.addEventListener("click", this.handleClick);
  }

  componentWillUnmount() {
    // 🟢 Recommended: Remove listener in unmount
    document.removeEventListener("click", this.handleClick);
  }

  handleClick() {
    console.log("clicked");
  }

  render() {
    return null;
  }
}
```

### Using inline listener functions [#using-inline-listener-functions]

```tsx
import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    // 🔴 Problem: An 'addEventListener' should not have an inline listener function.
    document.addEventListener("click", () => console.log("clicked"));
  }, []);

  return null;
}
```

### Mismatched options between add and remove [#mismatched-options-between-add-and-remove]

```tsx
import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    const handleClick = () => {
      console.log("clicked");
    };

    document.addEventListener("click", handleClick, { capture: true });
    // 🔴 Problem: An 'addEventListener' in 'useEffect' should have a corresponding 'removeEventListener' in its cleanup function.

    return () => {
      // 🔴 Problem: Options don't match — removeEventListener must use the same capture value
      document.removeEventListener("click", handleClick, { capture: false });
    };
  }, []);

  return null;
}
```

### Matching options between add and remove [#matching-options-between-add-and-remove]

```tsx
import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    const handleClick = () => {
      console.log("clicked");
    };

    document.addEventListener("click", handleClick, { capture: true });

    return () => {
      // 🟢 Recommended: Use identical options in both add and remove
      document.removeEventListener("click", handleClick, { capture: true });
    };
  }, []);

  return null;
}
```

### Dynamic entries that may differ between setup and cleanup [#dynamic-entries-that-may-differ-between-setup-and-cleanup]

```tsx
import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    if (!el) {
      return;
    }

    // 🔴 Problem: The entries are not guaranteed to be the same as those in the effect cleanup function.
    for (const [name, handler] of Object.entries(handlers)) {
      el.addEventListener(name, handler);
    }

    return () => {
      // 🔴 Problem: The entries are not guaranteed to be the same as those in the effect setup function.
      for (const [name, handler] of Object.entries(handlers)) {
        el.removeEventListener(name, handler);
      }
    };
  }, [el]);

  return null;
}
```

### Pre-computing entries for consistency [#pre-computing-entries-for-consistency]

```tsx
import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    if (!el) {
      return;
    }

    // 🟢 Recommended: Always use the same entries in both the setup and cleanup functions:
    const handlerEntries = Object.entries(handlers); // <- Use the same entries array

    for (const [name, handler] of handlerEntries) {
      el.addEventListener(name, handler);
    }

    return () => {
      for (const [name, handler] of handlerEntries) {
        el.removeEventListener(name, handler);
      }
    };
  }, [el]);
  return null;
}
```

### Using stable arrays for multiple listeners [#using-stable-arrays-for-multiple-listeners]

```tsx
import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    const events = [
      "mousemove",
      "mousedown",
      "keydown",
      "scroll",
      "touchstart",
    ];
    const handleActivity = () => {};

    events.forEach((event) => {
      // 🟢 Recommended: Use a stable array for consistent setup and cleanup
      window.addEventListener(event, handleActivity);
    });

    return () => {
      events.forEach((event) => {
        window.removeEventListener(event, handleActivity);
      });
    };
  }, []);

  return null;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with direct non-computed identifier checks when matching listener options such as `signal`.
    * The `signal`/`capture` options in `addEventListener` are no longer recognized when specified via computed string-literal keys (e.g. `{ ["signal"]: controller.signal }`), since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false negative where a computed identifier key in the listener options (e.g. `addEventListener("resize", handler, { [signal]: controller.signal })`) was treated as a static `signal`/`capture` option, masking leaked event listeners. The actual property name is the runtime value of the variable, so it is no longer recognized; computed string literal keys (e.g. `{ ["signal"]: controller.signal }`) are still recognized.
  </Accordion>

  <Accordion title="[5.9.5] - 2026-06-27">
    ### Fixed [#fixed-1]

    * Fix false positive when the event target is derived from a function call (e.g. `window.matchMedia('(prefers-color-scheme: dark)').addEventListener(...)` paired with a matching `removeEventListener(...)` in the cleanup). Closes #1282.
  </Accordion>

  <Accordion title="[5.7.0] - 2026-05-02">
    ### Changed [#changed-1]

    * Removed detection for Class Component lifecycles (`componentDidMount` / `componentWillUnmount`) and now only report on Hook Effects (`useEffect`, etc.).
  </Accordion>

  <Accordion title="[2.3.12] - 2025-12-02">
    ### Fixed [#fixed-2]

    * Fix false positive when using React Native `BackHandler`. Closes #1323. (#1336)
  </Accordion>

  <Accordion title="[2.3.7] - 2025-11-21">
    ### Fixed [#fixed-3]

    * Does not report event listeners with `signal`. Closes #1282. (#1325)
  </Accordion>

  <Accordion title="[1.53.1] - 2025-06-12">
    ### Fixed [#fixed-4]

    * Fix `useEffect` setup function check to handle `React.useEffect()` calls correctly. Closes #1228. (#1229)
  </Accordion>

  <Accordion title="[1.12.3] - 2024-08-29">
    ### Added [#added]

    * Added support for detecting event listeners removed by abort signal.
  </Accordion>

  <Accordion title="[1.11.0] - 2024-08-20">
    ### Added [#added-1]

    * Initial release of the `no-leaked-event-listener` rule. (#726)
    * Reports leaked `addEventListener` calls in React components.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener/no-leaked-event-listener.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener/no-leaked-event-listener.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Subscribing to events](https://react.dev/learn/synchronizing-with-effects#subscribing-to-events)
* [React Docs: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
* [MDN: `EventTarget.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
* [MDN: `EventTarget.removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)

***

## See Also [#see-also]

* [`react-web-api/no-leaked-fetch`](./web-api-no-leaked-fetch)\
  Enforces that every `fetch` in a component or custom hook has a corresponding `AbortController` abort in the cleanup function.
* [`react-web-api/no-leaked-intersection-observer`](./web-api-no-leaked-intersection-observer)\
  Enforces that every `IntersectionObserver` created in a component or custom hook has a corresponding `IntersectionObserver.disconnect()`.
* [`react-web-api/no-leaked-interval`](./web-api-no-leaked-interval)\
  Enforces that every `setInterval` in a component or custom hook has a corresponding `clearInterval`.
* [`react-web-api/no-leaked-resize-observer`](./web-api-no-leaked-resize-observer)\
  Enforces that every `ResizeObserver` created in a component or custom hook has a corresponding `ResizeObserver.disconnect()`.
* [`react-web-api/no-leaked-timeout`](./web-api-no-leaked-timeout)\
  Enforces that every `setTimeout` in a component or custom hook has a corresponding `clearTimeout`.


# no-leaked-fetch (/docs/rules/web-api-no-leaked-fetch)





<Callout type="warn">
  This is an evaluation implementation and may contain false positives or negatives that have not yet been fully audited. Review each report carefully before applying fixes.
</Callout>

**Full Name in `eslint-plugin-react-web-api`**

```plain copy
react-web-api/no-leaked-fetch
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/web-api-no-leaked-fetch
```

**Features**

`🧪`

**Presets**

`web-api`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Starting a `fetch` within the setup function of `useEffect` / `useLayoutEffect` /
`useInsertionEffect` without passing an `AbortSignal` and aborting it in cleanup
can lead to responses resolving after the component unmounts or after the effect
re-runs on a dependency change. If the resolved handler calls `setState` or
writes to a ref the component reads, the UI will display data for a component
instance that no longer exists, or overwrite fresh data with stale data.

## Examples [#examples]

### Starting fetch without an AbortController [#starting-fetch-without-an-abortcontroller]

```tsx
import { useEffect, useState } from "react";

function UserProfile({ id }: { id: string }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 🔴 Problem: A 'fetch' started in 'useEffect' must be aborted in the cleanup function.
    fetch(`/api/user/${id}`)
      .then((r) => r.json())
      .then(setUser);
  }, [id]);

  return user ? <Profile user={user} /> : null;
}
```

### Using AbortController with fetch [#using-abortcontroller-with-fetch]

```tsx
import { useEffect, useState } from "react";

function UserProfile({ id }: { id: string }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 🟢 Recommended: Create an AbortController and pass its signal to fetch
    const ctrl = new AbortController();
    fetch(`/api/user/${id}`, { signal: ctrl.signal })
      .then((r) => r.json())
      .then(setUser);
    // 🟢 Recommended: Abort the request in the cleanup function
    return () => ctrl.abort();
  }, [id]);

  return user ? <Profile user={user} /> : null;
}
```

### Using async/await with AbortController [#using-asyncawait-with-abortcontroller]

When using `async/await` inside `useEffect`, create the `AbortController` outside the async function so it can be aborted in the cleanup function.

```tsx
// 🟢 Recommended: Use async/await with AbortController in useEffect
import { useEffect, useState } from "react";

function UserProfile({ id }: { id: string }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const ctrl = new AbortController();

    async function fetchUser() {
      try {
        const response = await fetch(`/api/user/${id}`, { signal: ctrl.signal });
        const data = await response.json();
        setUser(data);
      } catch (error) {
        if ((error as Error).name !== "AbortError") {
          console.error(error);
        }
      }
    }

    fetchUser();
    return () => ctrl.abort();
  }, [id]);

  return user ? <Profile user={user} /> : null;
}
```

## Troubleshooting [#troubleshooting]

### Why is this pattern problematic? [#why-is-this-pattern-problematic]

An in-flight `fetch` does not know its caller has unmounted. When the response
resolves, the `.then` chain runs regardless. If that chain writes state, React
logs "Can't perform a state update on an unmounted component" (pre-18) or
silently overwrites fresh data (post-18, once the component remounts with new
props).

### What are the alternatives? [#what-are-the-alternatives]

* **`AbortController`** (recommended, canonical React guidance).
* **TanStack Query / SWR**: they manage this for you inside their API boundary; code using them exclusively does not need this rule.
* **`isMounted` ref guard**: technically prevents UI corruption but wastes network and doesn't trigger on React's strict-mode double-invoke. Rule does not recognize this pattern as a cleanup.

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with direct non-computed identifier checks when matching the `signal` fetch option.
    * The `signal` option is no longer recognized when specified via a computed string-literal key (e.g. `{ ["signal"]: controller.signal }`), since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.10.2] - 2026-07-03">
    ### Fixed [#fixed]

    * Fixed a false negative where a computed identifier key in the fetch options (e.g. `fetch(url, { [signal]: controller.signal })`) was treated as a static `signal` option, masking leaked fetch calls. The actual property name is the runtime value of the variable, so it is no longer recognized; computed string literal keys (e.g. `{ ["signal"]: controller.signal }`) are still recognized.
  </Accordion>

  <Accordion title="[5.9.5] - 2026-06-27">
    ### Fixed [#fixed-1]

    * Fix false positive when the `AbortController` is derived from a function call (e.g. `fetch(url, { signal: getController().signal })` paired with `getController().abort()` in the cleanup).
  </Accordion>

  <Accordion title="[5.9.4] - 2026-06-26">
    ### Changed [#changed-1]

    * Use `Extract.getPropertyName` to simplify `MemberExpression` property name checks and detect computed string property access.
  </Accordion>

  <Accordion title="[5.7.0] - 2026-05-02">
    ### Added [#added]

    * Initial release of the `no-leaked-fetch` rule. (#1715)
    * Reports leaked `fetch` calls in effects that are not properly aborted or cleaned up.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-fetch/no-leaked-fetch.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-fetch/no-leaked-fetch.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-fetch/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Fetching data in Effects](https://react.dev/learn/synchronizing-with-effects#fetching-data)
* [MDN: fetch() `signal` option](https://developer.mozilla.org/en-US/docs/Web/API/fetch#signal)
* [MDN: AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)

***

## See Also [#see-also]

* [`react-web-api/no-leaked-event-listener`](./web-api-no-leaked-event-listener)\
  Enforces that every `addEventListener` in a component or custom hook has a corresponding `removeEventListener`.
* [`react-web-api/no-leaked-intersection-observer`](./web-api-no-leaked-intersection-observer)\
  Enforces that every `IntersectionObserver` created in a component or custom hook has a corresponding `IntersectionObserver.disconnect()`.
* [`react-web-api/no-leaked-interval`](./web-api-no-leaked-interval)\
  Enforces that every `setInterval` in a component or custom hook has a corresponding `clearInterval`.
* [`react-web-api/no-leaked-resize-observer`](./web-api-no-leaked-resize-observer)\
  Enforces that every `ResizeObserver` created in a component or custom hook has a corresponding `ResizeObserver.disconnect()`.
* [`react-web-api/no-leaked-timeout`](./web-api-no-leaked-timeout)\
  Enforces that every `setTimeout` in a component or custom hook has a corresponding `clearTimeout`.


# no-leaked-intersection-observer (/docs/rules/web-api-no-leaked-intersection-observer)





**Full Name in `eslint-plugin-react-web-api`**

```plain copy
react-web-api/no-leaked-intersection-observer
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/web-api-no-leaked-intersection-observer
```

**Presets**

`web-api`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Creating an `IntersectionObserver` without disconnecting it can lead to memory leaks and unexpected behavior.

An `IntersectionObserver` created in `useEffect` keeps observing its targets after the component unmounts unless it is disconnected in the cleanup function.

## Examples [#examples]

### Creating IntersectionObserver without disconnecting in useEffect [#creating-intersectionobserver-without-disconnecting-in-useeffect]

```tsx
import React, { useEffect, useRef } from "react";

function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    // 🔴 Problem: An 'IntersectionObserver' in 'useEffect' should have a corresponding 'intersectionObserver.disconnect()' in its cleanup function
    const observer = new IntersectionObserver(([entry]) => {
      console.log("visible:", entry.isIntersecting);
    });
    observer.observe(ref.current);
  }, []);

  return <div ref={ref} />;
}
```

### Disconnecting IntersectionObserver in useEffect cleanup [#disconnecting-intersectionobserver-in-useeffect-cleanup]

```tsx
import React, { useEffect, useRef } from "react";

function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    // 🟢 Recommended: Create and use IntersectionObserver
    const observer = new IntersectionObserver(([entry]) => {
      console.log("visible:", entry.isIntersecting);
    });
    observer.observe(ref.current);
    // 🟢 Recommended: Disconnect in the cleanup function
    return () => observer.disconnect();
  }, []);

  return <div ref={ref} />;
}
```

### Observing multiple elements with IntersectionObserver [#observing-multiple-elements-with-intersectionobserver]

When observing multiple elements, disconnect the observer in the cleanup function to release all of them at once.

```tsx
import { useEffect, useRef } from "react";

function VisibilityTracker() {
  const headerRef = useRef<HTMLDivElement>(null);
  const footerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 🟢 Recommended: Disconnect IntersectionObserver when observing multiple elements
    const observer = new IntersectionObserver((entries) => {
      for (const entry of entries) {
        console.log(entry.target, "intersecting:", entry.isIntersecting);
      }
    });

    if (headerRef.current) observer.observe(headerRef.current);
    if (footerRef.current) observer.observe(footerRef.current);

    return () => observer.disconnect();
  }, []);

  return (
    <>
      <div ref={headerRef}>Header</div>
      <div ref={footerRef}>Footer</div>
    </>
  );
}
```

### Using an observe-once IntersectionObserver [#using-an-observe-once-intersectionobserver]

A common pattern with `IntersectionObserver` is to observe an element once and disconnect inside the callback, such as lazy loading content the first time it becomes visible. Disconnecting inside the callback alone is not enough: the component may unmount before the element ever intersects, in which case the callback never runs and the observer leaks.

```tsx
import { useEffect, useRef, useState } from "react";

function LazySection() {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!ref.current) return;
    // 🔴 Problem: The callback only runs when the element intersects, so the observer leaks if the component unmounts before that
    const observer = new IntersectionObserver(([entry], obs) => {
      if (entry.isIntersecting) {
        setVisible(true);
        obs.disconnect(); // observe-once
      }
    });
    observer.observe(ref.current);
  }, []);

  return <div ref={ref}>{visible ? <p>Loaded</p> : null}</div>;
}
```

```tsx
import { useEffect, useRef, useState } from "react";

function LazySection() {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!ref.current) return;
    const observer = new IntersectionObserver(([entry], obs) => {
      if (entry.isIntersecting) {
        setVisible(true);
        obs.disconnect(); // observe-once
      }
    });
    observer.observe(ref.current);
    // 🟢 Recommended: Disconnect in the cleanup function as a fallback in case the component unmounts before the callback runs
    return () => observer.disconnect();
  }, []);

  return <div ref={ref}>{visible ? <p>Loaded</p> : null}</div>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access (e.g. `obj["observe"]()` / `obj["disconnect"]()` on an IntersectionObserver) are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.9.5] - 2026-06-27">
    ### Fixed [#fixed]

    * Fix false positive when the observed element is derived from a function call (e.g. `observer.observe(getEl())` paired with `observer.unobserve(getEl())` in the cleanup).
  </Accordion>

  <Accordion title="[5.9.0] - 2026-06-13">
    ### Added [#added]

    * Initial release of the `no-leaked-intersection-observer` rule. (#1868)

    ### Fixed [#fixed-1]

    * Report the observe-once pattern when `disconnect` is only called inside the observer's own callback, since the callback may never run if the component unmounts before the element intersects.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-intersection-observer/no-leaked-intersection-observer.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-intersection-observer/no-leaked-intersection-observer.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-intersection-observer/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
* [MDN: `IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)

***

## See Also [#see-also]

* [`react-web-api/no-leaked-event-listener`](./web-api-no-leaked-event-listener)\
  Enforces that every `addEventListener` in a component or custom hook has a corresponding `removeEventListener`.
* [`react-web-api/no-leaked-fetch`](./web-api-no-leaked-fetch)\
  Enforces that every `fetch` in a component or custom hook has a corresponding `AbortController` abort in the cleanup function.
* [`react-web-api/no-leaked-interval`](./web-api-no-leaked-interval)\
  Enforces that every `setInterval` in a component or custom hook has a corresponding `clearInterval`.
* [`react-web-api/no-leaked-resize-observer`](./web-api-no-leaked-resize-observer)\
  Enforces that every `ResizeObserver` created in a component or custom hook has a corresponding `ResizeObserver.disconnect()`.
* [`react-web-api/no-leaked-timeout`](./web-api-no-leaked-timeout)\
  Enforces that every `setTimeout` in a component or custom hook has a corresponding `clearTimeout`.


# no-leaked-interval (/docs/rules/web-api-no-leaked-interval)





**Full Name in `eslint-plugin-react-web-api`**

```plain copy
react-web-api/no-leaked-interval
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/web-api-no-leaked-interval
```

**Presets**

`web-api`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Scheduling an interval within the setup function of `useEffect` without canceling it in the cleanup function can lead to unwanted `setInterval` callback executions and may also result in using stale values captured by previous renders' effects after each subsequent re-render.

## Examples [#examples]

### Setting interval without cleanup in useEffect [#setting-interval-without-cleanup-in-useeffect]

```tsx
import React, { useEffect, useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 🔴 Problem: A 'setInterval' created in 'useEffect' must be cleared in the cleanup function.
    const intervalId = setInterval(() => console.log(count), 1000);
  }, []);

  return null;
}
```

### Clearing interval in useEffect cleanup [#clearing-interval-in-useeffect-cleanup]

```tsx
import React, { useEffect, useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 🟢 Recommended: Store the interval ID
    const intervalId = setInterval(() => console.log(count), 1000);
    // 🟢 Recommended: Clear the interval in the cleanup function
    return () => clearInterval(intervalId);
  }, []);

  return null;
}
```

### Avoiding stale dependencies in intervals [#avoiding-stale-dependencies-in-intervals]

If your interval callback reads state, including that state in the dependency array will reset the interval on every change. Use a state updater function instead so the interval can run with an empty dependency array.

```tsx
// 🟢 Recommended: use a state updater to avoid stale closures and unnecessary resets
import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return <h1>{count}</h1>;
}
```

### Encapsulating interval logic in a custom hook [#encapsulating-interval-logic-in-a-custom-hook]

When multiple components need the same interval behavior, extract it into a custom hook. This keeps the cleanup logic centralized and ensures every `setInterval` has a matching `clearInterval`.

```tsx
// 🟢 Recommended: encapsulate interval logic in a custom hook with cleanup
import { useState, useEffect } from "react";

function useTimer(callback: () => void, delay: number) {
  useEffect(() => {
    const id = setInterval(() => {
      callback();
    }, delay);
    return () => {
      clearInterval(id);
    };
  }, [delay, callback]);
}

function Timer() {
  const [count, setCount] = useState(0);

  useTimer(() => {
    setCount((c) => c + 1);
  }, 1000);

  return <h1>Counter: {count}</h1>;
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access (e.g. `obj["setInterval"]()` / `obj["clearInterval"]()`) are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.7.0] - 2026-05-02">
    ### Changed [#changed-1]

    * Removed detection for Class Component lifecycles (`componentDidMount` / `componentWillUnmount`) and now only report on Hook Effects (`useEffect`, etc.).
  </Accordion>

  <Accordion title="[1.11.0] - 2024-08-20">
    ### Added [#added]

    * Initial release of the `no-leaked-interval` rule. (#729)
    * Reports leaked `setInterval` calls in React components.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval/no-leaked-interval.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval/no-leaked-interval.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
* [MDN: `setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)
* [MDN: `clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval)

***

## See Also [#see-also]

* [`react-web-api/no-leaked-event-listener`](./web-api-no-leaked-event-listener)\
  Enforces that every `addEventListener` in a component or custom hook has a corresponding `removeEventListener`.
* [`react-web-api/no-leaked-fetch`](./web-api-no-leaked-fetch)\
  Enforces that every `fetch` in a component or custom hook has a corresponding `AbortController` abort in the cleanup function.
* [`react-web-api/no-leaked-intersection-observer`](./web-api-no-leaked-intersection-observer)\
  Enforces that every `IntersectionObserver` created in a component or custom hook has a corresponding `IntersectionObserver.disconnect()`.
* [`react-web-api/no-leaked-resize-observer`](./web-api-no-leaked-resize-observer)\
  Enforces that every `ResizeObserver` created in a component or custom hook has a corresponding `ResizeObserver.disconnect()`.
* [`react-web-api/no-leaked-timeout`](./web-api-no-leaked-timeout)\
  Enforces that every `setTimeout` in a component or custom hook has a corresponding `clearTimeout`.


# no-leaked-resize-observer (/docs/rules/web-api-no-leaked-resize-observer)





**Full Name in `eslint-plugin-react-web-api`**

```plain copy
react-web-api/no-leaked-resize-observer
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/web-api-no-leaked-resize-observer
```

**Presets**

`web-api`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Creating a `ResizeObserver` without disconnecting it can lead to memory leaks and unexpected behavior.

## Examples [#examples]

### Creating ResizeObserver without disconnecting in useEffect [#creating-resizeobserver-without-disconnecting-in-useeffect]

```tsx
import React, { useEffect, useRef } from "react";

function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    // 🔴 Problem: A 'ResizeObserver' in 'useEffect' should have a corresponding 'resizeObserver.disconnect()' in its cleanup function.
    const ro = new ResizeObserver(() => console.log("resize"));
    ro.observe(ref.current);
  }, []);

  return <div ref={ref} />;
}
```

### Disconnecting ResizeObserver in useEffect cleanup [#disconnecting-resizeobserver-in-useeffect-cleanup]

```tsx
import React, { useEffect, useRef } from "react";

function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    // 🟢 Recommended: Create and use ResizeObserver
    const ro = new ResizeObserver(() => console.log("resize"));
    ro.observe(ref.current);
    // 🟢 Recommended: Disconnect in the cleanup function
    return () => ro.disconnect();
  }, []);

  return <div ref={ref} />;
}
```

### Observing multiple elements with ResizeObserver [#observing-multiple-elements-with-resizeobserver]

When observing multiple elements, disconnect the observer in the cleanup function to prevent memory leaks.

```tsx
// 🟢 Recommended: Disconnect ResizeObserver when observing multiple elements
import { useEffect, useRef } from "react";

function ResizablePanels() {
  const panelARef = useRef<HTMLDivElement>(null);
  const panelBRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ro = new ResizeObserver((entries) => {
      for (const entry of entries) {
        console.log("Size changed:", entry.contentRect);
      }
    });

    if (panelARef.current) ro.observe(panelARef.current);
    if (panelBRef.current) ro.observe(panelBRef.current);

    return () => ro.disconnect();
  }, []);

  return (
    <>
      <div ref={panelARef}>Panel A</div>
      <div ref={panelBRef}>Panel B</div>
    </>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access (e.g. `obj["observe"]()` / `obj["disconnect"]()` on a ResizeObserver) are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.9.5] - 2026-06-27">
    ### Fixed [#fixed]

    * Fix false positive when the observed element is derived from a function call (e.g. `observer.observe(getEl())` paired with `observer.unobserve(getEl())` in the cleanup).
  </Accordion>

  <Accordion title="[5.9.0] - 2026-06-13">
    ### Fixed [#fixed-1]

    * Report when `disconnect` is only called inside the observer's own callback, since the callback may never run if the component unmounts before the element resizes.
  </Accordion>

  <Accordion title="[1.14.1] - 2024-09-12">
    ### Fixed [#fixed-2]

    * Fixed false positives in rule `web-api/no-leaked-resize-observer`.
  </Accordion>

  <Accordion title="[1.13.0] - 2024-09-04">
    ### Added [#added]

    * Initial release of the `no-leaked-resize-observer` rule. (#759)
    * Reports leaked `ResizeObserver` calls in React components.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer/no-leaked-resize-observer.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer/no-leaked-resize-observer.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
* [MDN: `ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

***

## See Also [#see-also]

* [`react-web-api/no-leaked-event-listener`](./web-api-no-leaked-event-listener)\
  Enforces that every `addEventListener` in a component or custom hook has a corresponding `removeEventListener`.
* [`react-web-api/no-leaked-fetch`](./web-api-no-leaked-fetch)\
  Enforces that every `fetch` in a component or custom hook has a corresponding `AbortController` abort in the cleanup function.
* [`react-web-api/no-leaked-intersection-observer`](./web-api-no-leaked-intersection-observer)\
  Enforces that every `IntersectionObserver` created in a component or custom hook has a corresponding `IntersectionObserver.disconnect()`.
* [`react-web-api/no-leaked-interval`](./web-api-no-leaked-interval)\
  Enforces that every `setInterval` in a component or custom hook has a corresponding `clearInterval`.
* [`react-web-api/no-leaked-timeout`](./web-api-no-leaked-timeout)\
  Enforces that every `setTimeout` in a component or custom hook has a corresponding `clearTimeout`.


# no-leaked-timeout (/docs/rules/web-api-no-leaked-timeout)





**Full Name in `eslint-plugin-react-web-api`**

```plain copy
react-web-api/no-leaked-timeout
```

**Full Name in [`@eslint-react/eslint-plugin`](https://npmx.dev/package/@eslint-react/eslint-plugin/v/latest)**

```plain copy
@eslint-react/web-api-no-leaked-timeout
```

**Presets**

`web-api`
`recommended`
`recommended-typescript`
`recommended-type-checked`
`strict`
`strict-typescript`
`strict-type-checked`

## Rule Details [#rule-details]

Scheduling a timeout within the setup function of `useEffect` without canceling it in the cleanup function can lead to unwanted `setTimeout` callback executions and may also result in stale values captured by previous renders' effects after each subsequent re-render.

## Examples [#examples]

### Setting timeout without cleanup in useEffect [#setting-timeout-without-cleanup-in-useeffect]

```tsx
import React, { useEffect, useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 🔴 Problem: A 'setTimeout' created in 'useEffect' must be cleared in the cleanup function.
    const timeoutId = setTimeout(() => console.log(count), 1000);
  }, []);

  return null;
}
```

### Clearing timeout in useEffect cleanup [#clearing-timeout-in-useeffect-cleanup]

```tsx
import React, { useEffect, useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 🟢 Recommended: Store the timeout ID
    const timeoutId = setTimeout(() => console.log(count), 1000);
    // 🟢 Recommended: Clear the timeout in the cleanup function
    return () => clearTimeout(timeoutId);
  }, []);

  return null;
}
```

### Canceling a timeout when dependencies change [#canceling-a-timeout-when-dependencies-change]

When a timeout depends on reactive values like props or state, clear the previous timeout in the cleanup function before scheduling a new one. This prevents outdated timeouts from firing after the value has already changed.

```tsx
// 🟢 Recommended: clear the previous timeout before scheduling a new one
import { useState, useEffect } from "react";

function Playground() {
  const [text, setText] = useState("a");

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      console.log("⏰ " + text);
    }, 3000);

    return () => {
      clearTimeout(timeoutId);
    };
  }, [text]);

  return (
    <>
      <label>
        What to log:{" "}
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      </label>
      <h1>{text}</h1>
    </>
  );
}
```

## Versions [#versions]

<Accordions>
  <Accordion title="[5.14.9] - 2026-07-15">
    ### Changed [#changed]

    * Replaced `Extract.getPropertyName` with `Extract.getCalleeName` for callee name checks.
    * Calls made through computed string-literal member access (e.g. `obj["setTimeout"]()` / `obj["clearTimeout"]()`) are no longer matched, since the runtime property name cannot be statically determined.
  </Accordion>

  <Accordion title="[5.7.0] - 2026-05-02">
    ### Changed [#changed-1]

    * Removed detection for Class Component lifecycles (`componentDidMount` / `componentWillUnmount`) and now only report on Hook Effects (`useEffect`, etc.).
  </Accordion>

  <Accordion title="[1.11.0] - 2024-08-20">
    ### Added [#added]

    * Initial release of the `no-leaked-timeout` rule. (#726)
    * Reports leaked `setTimeout` calls in React components.
  </Accordion>
</Accordions>

## Resources [#resources]

* [Rule Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout/no-leaked-timeout.ts)
* [Test Source](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout/no-leaked-timeout.spec.ts)
* [Rule Changelog](https://github.com/Rel1cx/eslint-react/tree/main/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout/CHANGELOG.md)

## Further Reading [#further-reading]

* [React Docs: Synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
* [MDN: `setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
* [MDN: `clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout)

***

## See Also [#see-also]

* [`react-web-api/no-leaked-event-listener`](./web-api-no-leaked-event-listener)\
  Enforces that every `addEventListener` in a component or custom hook has a corresponding `removeEventListener`.
* [`react-web-api/no-leaked-fetch`](./web-api-no-leaked-fetch)\
  Enforces that every `fetch` in a component or custom hook has a corresponding `AbortController` abort in the cleanup function.
* [`react-web-api/no-leaked-intersection-observer`](./web-api-no-leaked-intersection-observer)\
  Enforces that every `IntersectionObserver` created in a component or custom hook has a corresponding `IntersectionObserver.disconnect()`.
* [`react-web-api/no-leaked-interval`](./web-api-no-leaked-interval)\
  Enforces that every `setInterval` in a component or custom hook has a corresponding `clearInterval`.
* [`react-web-api/no-leaked-resize-observer`](./web-api-no-leaked-resize-observer)\
  Enforces that every `ResizeObserver` created in a component or custom hook has a corresponding `ResizeObserver.disconnect()`.