Overview

Live from GitHub

This content is fetched directly from README.md on GitHub and cached for 1 hour.

React Best Practices

Enforce React best practices and feature patterns for maintainable applications.

Rules (61)

Browse all available React feature rules

Changelog

View version history and updates

Live README from GitHubfrom eslint-plugin-react-features/README.md, cached for 1 hour.Edit on GitHub

Advanced React patterns, hook usage, and best practices enforcement.

⭐ If this plugin caught a real bug for you, star the repo — it's the signal that keeps these rules maintained.

Description

This plugin provides Advanced React patterns, hook usage, and best practices enforcement.

Interlace fosters strength through integration. Instead of stacking isolated rules, we interlace security directly into your workflow to create a resilient fabric of code. We believe tools should guide rather than gatekeep, providing educational feedback that strengthens the developer with every interaction.

Getting Started

To check out the guide, visit eslint.interlace.tools. 📚
要查看中文指南, 请访问 eslint.interlace.tools. 📚
가이드 문서는 eslint.interlace.tools에서 확인하실 수 있습니다. 📚
ガイドは eslint.interlace.toolsでご確認ください。 📚
Para ver la guía, visita eslint.interlace.tools. 📚
للاطلاع على الدليل، قم بزيارة eslint.interlace.tools. 📚

npm install eslint-plugin-react-features --save-dev

⚙️ Configuration Presets

Preset	Description
`recommended`	Recommended React patterns and performance rules

📦 Compatibility

Package	Version
ESLint	`^8.40.0 \|\| ^9.0.0 \|\| ^10.0.0`
Node.js	`>=18.0.0`

See the ESLint Version Support Policy — current ecosystem share data, the 20% gate, and the forward-looking exception that covers v10.

Rules

Legend

Icon	Description
💼	Recommended: Included in the recommended preset.
⚠️	Warns: Set to warn in recommended preset.
🔧	Auto-fixable: Automatically fixable by the `--fix` CLI option.
💡	Suggestions: Providing code suggestions in IDE.
🚫	Deprecated: This rule is deprecated.
🟢	Type-unaware: AST-only, runs in oxlint JS-plugin tier.
🟡	Type-aware (refining): pure-AST primary path; types refine precision.
🟠	Type-aware (graceful): requires TS program; silent without it.

Rule	CWE	Description	🧠	💼	⚠️	💡
checked-requires-onchange-or-readonly		checked-requires-onchange-or-readonly rule	🟢			💡
default-props-match-prop-types		default-props-match-prop-types rule	🟢			💡
display-name		display-name rule	🟢			💡
hooks-exhaustive-deps		hooks-exhaustive-deps rule	🟢		⚠️	💡
jsx-handler-names		jsx-handler-names rule	🟢			💡
jsx-key		jsx-key rule	🟢	💼		💡
jsx-max-depth		jsx-max-depth rule	🟢			💡
jsx-no-bind		jsx-no-bind rule	🟢			💡
jsx-no-duplicate-props		Prevent duplicate props in JSX elements. This rule is part of eslint-plugin-react-features and provides LLM…	🟢	💼		💡
jsx-no-literals		jsx-no-literals rule	🟢			💡
jsx-no-script-url		Prevent javascript: URLs in JSX. This rule is part of eslint-plugin-react-features and provides LLM-optimiz…	🟢	💼		💡
jsx-no-target-blank		Require rel='noopener noreferrer' with target='_blank'. This rule is part of eslint-plugin-react-features a…	🟢	💼		💡
no-access-state-in-setstate		no-access-state-in-setstate rule	🟢			💡
no-adjacent-inline-elements		no-adjacent-inline-elements rule	🟢			💡
no-arbitrary-token-class			🟢
no-arrow-function-lifecycle		no-arrow-function-lifecycle rule	🟢			💡
no-children-prop		no-children-prop rule	🟢		⚠️	💡
no-danger	CWE-79	no-danger rule	🟢		⚠️	💡
no-danger-with-children		Prevent using children and dangerouslySetInnerHTML together. This rule is part of eslint-plugin-react-featu…	🟢	💼		💡
no-default-test-id			🟢
no-deprecated		Warn about using deprecated React APIs. This rule is part of eslint-plugin-react-features and provides LLM-…	🟢		⚠️	💡
no-did-mount-set-state		no-did-mount-set-state rule	🟢			💡
no-did-update-set-state		no-did-update-set-state rule	🟢			💡
no-direct-mutation-state		no-direct-mutation-state rule	🟢			💡
no-find-dom-node		Prevent using findDOMNode. This rule is part of eslint-plugin-react-features and provides LLM-optimized err…	🟢			💡
no-inline-style			🟢
no-invalid-html-attribute		no-invalid-html-attribute rule	🟢			💡
no-is-mounted		no-is-mounted rule	🟢			💡
no-is-prefix-prop			🟢
no-kind-prop-discriminator			🟢
no-multi-comp		no-multi-comp rule	🟢			💡
no-namespace		no-namespace rule	🟢			💡
no-object-type-as-default-prop		no-object-type-as-default-prop rule	🟢			💡
no-raw-color-literal			🟢
no-redundant-should-component-update		no-redundant-should-component-update rule	🟢			💡
no-render-return-value		no-render-return-value rule	🟢			💡
no-set-state		no-set-state rule	🟢			💡
no-string-refs		no-string-refs rule	🟢	💼		💡
no-this-in-sfc		no-this-in-sfc rule	🟢			💡
no-typos		no-typos rule	🟢			💡
no-unescaped-entities		no-unescaped-entities rule	🟢			💡
no-unknown-property		no-unknown-property rule	🟢	💼		💡
no-unnecessary-rerenders		no-unnecessary-rerenders rule	🟢			💡
no-unsafe		Warn about UNSAFE_ lifecycle methods. This rule is part of eslint-plugin-react-features and provides LLM-op…	🟢			💡
no-wrapper-sub-component			🟢
prefer-es6-class		prefer-es6-class rule	🟢			💡
prefer-stateless-function		prefer-stateless-function rule	🟢			💡
prop-types		prop-types rule	🟢			💡
react-class-to-hooks		react-class-to-hooks rule	🟢			💡
react-in-jsx-scope		react-in-jsx-scope rule	🟢			💡
react-no-inline-functions		react-no-inline-functions rule	🟢			💡
react-render-optimization		react-render-optimization rule	🟢			💡
require-data-slot			🟢
require-default-props		require-default-props rule	🟢			💡
require-optimization		require-optimization rule	🟢			💡
require-render-return		require-render-return rule	🟢			💡
required-attributes		required-attributes rule	🟢			💡
sort-comp		sort-comp rule	🟢			💡
state-in-constructor		state-in-constructor rule	🟢			💡
static-property-placement		static-property-placement rule	🟢			💡
void-dom-elements-no-children		Prevent void DOM elements from receiving children. This rule is part of eslint-plugin-react-features and pr…	🟢			💡

Part of the Interlace ESLint Ecosystem — AI-native security plugins with LLM-optimized error messages:

Plugin	Downloads	Description
`eslint-plugin-secure-coding`		General security rules & OWASP guidelines.
`eslint-plugin-pg`		PostgreSQL security & best practices.
`eslint-plugin-node-security`		Node.js core-module security (fs, child_process, vm, crypto, Buffer).
`eslint-plugin-jwt`		JWT security & best practices.
`eslint-plugin-browser-security`		Browser-specific security & XSS prevention.
`eslint-plugin-express-security`		Express.js security hardening rules.
`eslint-plugin-lambda-security`		AWS Lambda security best practices.
`eslint-plugin-nestjs-security`		NestJS security rules & patterns.
`eslint-plugin-mongodb-security`		MongoDB security best practices.
`eslint-plugin-vercel-ai-security`		Vercel AI SDK security hardening.
`eslint-plugin-import-next`		Next-gen import sorting & architecture.

⭐ Support & follow

If this plugin caught a real bug for you, star the repo — stars are the signal that keeps the Interlace ESLint ecosystem maintained — and follow the writeups on Dev.to for the benchmarks and security research behind these rules.

📄 License

View README.md on GitHub →

Building secure JavaScript with Interlace? Star the repo to get new rules and CWE coverage as we ship them — or follow the AI-code-security benchmarks behind them.

Follow the benchmarks Star on GitHub