eslint-plugin-react-functional-set-state

1.2.1 verified Fri May 01 auth: no javascript

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.

Common errors

error ESLint: Cannot find module 'eslint-plugin-react-functional-set-state' ↓

cause The plugin is not installed or is not in the same node_modules as ESLint.

fix

Run npm install eslint-plugin-react-functional-set-state --save-dev and ensure ESLint is installed in the same project.

error ESLint: Configuration for rule 'react-functional-set-state/no-this-state-props' is invalid ↓

cause The rule name is misspelled or the plugin is not loaded.

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.

error TypeError: Cannot read property 'undefined' of null ↓

cause An older version of ESLint or a misconfiguration of the plugin's rule schemas.

fix

Update ESLint to a version that supports the plugin (>=4.0.0) and ensure the plugin version is 1.2.0 or later.

Warnings

gotcha The plugin only supports CommonJS module format (require). It cannot be imported using ES modules (import). ↓

fix Use require() in your ESLint config file, or use a dynamic import if using .mjs config (but require is simpler).

gotcha The rule only applies to setState calls. It does not flag other uses of this.state or this.props elsewhere in the component. ↓

fix Use additional React linting rules (e.g., react/no-direct-mutation-state) for other state access patterns.

breaking Version 1.2.0 changed the plugin folder structure. If you have custom rule paths, they may break. ↓

fix Update your ESLint configuration if you referenced rule files directly; otherwise, no change needed.

gotcha 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. ↓

fix Manually review code for patterns like `const s = this.state; this.setState({ foo: s.bar })`.

Install

npm install eslint-plugin-react-functional-set-state

yarn add eslint-plugin-react-functional-set-state

pnpm add eslint-plugin-react-functional-set-state

Imports

plugin
wrong
```
const plugin = require('eslint-plugin-react-functional-set-state')
```
correct
```
import { plugins: ['react-functional-set-state'] } from '.eslintrc' (JSON config)
```
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.
rule: no-this-state-props
wrong
```
"no-this-state-props": "error"
```
correct
```
"react-functional-set-state/no-this-state-props": "error"
```
Rule names must be prefixed with the plugin name when configured in ESLint.

default import

wrong

import plugin from 'eslint-plugin-react-functional-set-state'

correct

const plugin = require('eslint-plugin-react-functional-set-state')

This package only supports CommonJS (require). There is no ESM export.

Quickstart

Configures ESLint plugin to enforce functional setState and shows an example of correct vs incorrect usage.

// .eslintrc.js
module.exports = {
  plugins: ['react-functional-set-state'],
  rules: {
    'react-functional-set-state/no-this-state-props': 'error',
  },
};

// Example React component that triggers the rule
// Inside a class component:
// this.setState({ foo: this.state.bar }) // ❌ Bad: uses this.state directly
// this.setState((state, props) => ({ foo: state.bar })) // ✅ Good: functional form