eslint-react

The @eslint-react/eslint package provides core building blocks for creating ESLint rules specifically tailored for React environments. It includes specialized interfaces, type aliases, and utility functions to streamline rule implementation and documentation.

Core Building Blocks

Interfaces

• RuleFix: Defines the structure for a rule fix.
• RuleFixer: Provides the API for applying fixes to code.

Type Aliases

• RuleContext: Represents the standard ESLint rule context, providing access to the source code, scope, and reporting mechanisms.
• RuleFeature: Represents specific features or capabilities of a rule.
• RuleListener: Defines the structure for rule listeners (visitors).
• ReportFixFunction: A type for functions that report rule violations and suggest fixes.

Utilities

• createRule: A rule creator utility that automatically generates documentation URLs for your ESLint React rules.
• merge: A utility function used to merge multiple visitor objects into a single visitor object, which is useful when composing rules from multiple sources.

The set-state-in-effect rule is designed to detect state setter calls within React effect hooks (like useEffect). It aims to align with the React Compiler's ValidateNoSetStateInEffects validation logic, though there are specific implementation differences regarding how it identifies and reports these calls.

Key Behaviors

• Direct Calls & IIFEs: The rule reports direct setter calls and syntactic Immediately Invoked Function Expressions (IIFEs) within an effect. Note that the rule only reports these if the setter has at least one argument.
• Async & Promises: Async functions and .then callbacks are explicitly classified as deferred. They are generally not treated as synchronous effect-body calls.
• Nested Callbacks: Ordinary nested callbacks (e.g., inside a setTimeout or an event listener) are not classified as immediate. The rule does not infer scheduling semantics; it primarily allows ordinary nested callbacks unless the function is directly called from the effect setup.
• Setter Aliases: The rule recognizes direct useState-like definitions, tuple index access (e.g., setCount[0]), and .at(1) access. However, it does not follow general variable aliases (e.g., const alias = setState; alias();).
• Transitive Wrappers: The rule can detect setters inside a single wrapper function (e.g., a hook-wrapped callback). However, it does not recursively chase multi-hop wrapper-to-wrapper chains.
• useEffectEvent Support: The rule tracks hooks generically. It detects direct invocation of an event returned by useEffectEvent inside an effect, which is invalid. However, because of how it collects nested callbacks, it may report some valid React patterns (like passing an event to setTimeout) differently than the React Compiler.
• Ref-derived Exemptions: The rule includes unconditional heuristic support for state setters derived from useRef or ref-like member access, including within ref-gated if statements.

Diagnostic Reporting

When a violation is found, the rule reports the location of the resolved internal setter call itself, rather than the wrapper invocation in the effect (which is how the React Compiler reports it).

The monorepo uses TypeScript paths aliases to prevent deep relative imports. There are two primary alias types used for different scopes:

1. @/: Points to the current package's source tree (./src/*). Use this for internal package imports.
2. #/: Points to the workspace root (../../*). This is intended strictly for test helpers and build scripts.

Important Rules:

• Cross-package imports: Always use the actual package name (e.g., @eslint-react/ast). Do not use aliases to import from other packages.
• Published packages: Aliases are resolved and inlined by the bundler; they are not exposed in published packages.

// Inside a package's src/
import { createRule } from "@/utils/create-rule"; // 🟢 Preferred

// Inside a test or script
import { ruleTester } from "#/testing/helpers"; // 🟢 Preferred

// Cross-package import (Use real names, not aliases)
import { someType } from "@eslint-react/ast";