Registry / testing / eslint-plugin-react-functional-set-state

eslint-plugin-react-functional-set-state

library1.2.1jsnpmunverified

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.

testing

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

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-REAC

eslint-plugin-react-functional-set-state

testingjavascriptv1.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin

✓ import { plugins: ['react-functional-set-state'] } from '.eslintrc' (JSON config)

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

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

✓ "react-functional-set-state/no-this-state-props": "error"

✗ "no-this-state-props": "error"

Rule names must be prefixed with the plugin name when configured in ESLint.

default import

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

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

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

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

Debug

Known issues

gotchaThe 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).

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

breakingVersion 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.

affects: >=1.2.0 <1.3.0

gotchaThe 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 })`.

affects: >=1.0.0

Errors

Common errors & fixes

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

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.

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

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.

TypeError: Cannot read property 'undefined' of null

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.

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/BE-Webdesign/eslint-plugin-react-functional-set-state ↗

packagehttps://www.npmjs.com/package/eslint-plugin-react-functional-set-state ↗