{"id":25524,"library":"eslint-plugin-react-functional-set-state","title":"eslint-plugin-react-functional-set-state","description":"An ESLint plugin that enforces functional setState in React components and prevents direct access to this.state and this.props inside setState calls. Version 1.2.1 is the current stable release. The plugin has a single rule, no-this-state-props, which flags any use of this.state or this.props within setState arguments. It is a lightweight, focused tool for React codebases that aim to follow the recommended functional setState pattern. The plugin is designed for ESLint and requires Node >= 0.10.0. It has no other runtime dependencies beyond ESLint. Compared to broader React ESLint plugins like eslint-plugin-react-hooks or eslint-plugin-react, this plugin serves a very specific linting purpose and does not handle other React best practices.","status":"active","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/BE-Webdesign/eslint-plugin-react-functional-set-state","tags":["javascript","eslint","eslintplugin","eslint-plugin"],"install":[{"cmd":"npm install eslint-plugin-react-functional-set-state","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-functional-set-state","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-functional-set-state","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Plugin is loaded via ESLint config, not directly imported in code. In JS config files, use `require('eslint-plugin-react-functional-set-state')` as the plugin value.","wrong":"const plugin = require('eslint-plugin-react-functional-set-state')","symbol":"plugin","correct":"import { plugins: ['react-functional-set-state'] } from '.eslintrc' (JSON config)"},{"note":"Rule names must be prefixed with the plugin name when configured in ESLint.","wrong":"\"no-this-state-props\": \"error\"","symbol":"rule: no-this-state-props","correct":"\"react-functional-set-state/no-this-state-props\": \"error\""},{"note":"This package only supports CommonJS (require). There is no ESM export.","wrong":"import plugin from 'eslint-plugin-react-functional-set-state'","symbol":"default import","correct":"const plugin = require('eslint-plugin-react-functional-set-state')"}],"quickstart":{"code":"// .eslintrc.js\nmodule.exports = {\n  plugins: ['react-functional-set-state'],\n  rules: {\n    'react-functional-set-state/no-this-state-props': 'error',\n  },\n};\n\n// Example React component that triggers the rule\n// Inside a class component:\n// this.setState({ foo: this.state.bar }) // ❌ Bad: uses this.state directly\n// this.setState((state, props) => ({ foo: state.bar })) // ✅ Good: functional form","lang":"javascript","description":"Configures ESLint plugin to enforce functional setState and shows an example of correct vs incorrect usage."},"warnings":[{"fix":"Use require() in your ESLint config file, or use a dynamic import if using .mjs config (but require is simpler).","message":"The plugin only supports CommonJS module format (require). It cannot be imported using ES modules (import).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use additional React linting rules (e.g., react/no-direct-mutation-state) for other state access patterns.","message":"The rule only applies to setState calls. It does not flag other uses of this.state or this.props elsewhere in the component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update your ESLint configuration if you referenced rule files directly; otherwise, no change needed.","message":"Version 1.2.0 changed the plugin folder structure. If you have custom rule paths, they may break.","severity":"breaking","affected_versions":">=1.2.0 <1.3.0"},{"fix":"Manually review code for patterns like `const s = this.state; this.setState({ foo: s.bar })`.","message":"The plugin only flags direct access to this.state and this.props inside setState. It does not catch indirect access through variables or computed properties.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `npm install eslint-plugin-react-functional-set-state --save-dev` and ensure ESLint is installed in the same project.","cause":"The plugin is not installed or is not in the same node_modules as ESLint.","error":"ESLint: Cannot find module 'eslint-plugin-react-functional-set-state'"},{"fix":"Verify that the rule name is exactly 'react-functional-set-state/no-this-state-props' and that the plugin is included in the plugins array.","cause":"The rule name is misspelled or the plugin is not loaded.","error":"ESLint: Configuration for rule 'react-functional-set-state/no-this-state-props' is invalid"},{"fix":"Update ESLint to a version that supports the plugin (>=4.0.0) and ensure the plugin version is 1.2.0 or later.","cause":"An older version of ESLint or a misconfiguration of the plugin's rule schemas.","error":"TypeError: Cannot read property 'undefined' of null"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}