eslint-plugin-comment-on-useeffect

This rule enforces that every useEffect hook in your React components has a comment explaining its purpose. This is particularly useful for maintaining code clarity and understanding the intent behind side effects.

In general, useEffect hooks should follow following rules:

• single responsibility principle. Do not put multiple unrelated side effects in one useEffect. The comment should explain the purpose of the side effect, just like the name of a function would.
• changes made in a useEffect should not trigger it again!
• useRef instead of useState for previous values to avoid unnecessary re-renders

Note: This rule is not intended to enforce comments for every useEffect, but rather to ensure that those that are present are meaningful and informative. This is why useEffect hooks which consist of calls to named functions are ignored, as the function names should be self-explanatory.

Installation

Install the plugin package in your project as:

pnpm add -D eslint-plugin-comment-on-useeffect

npm install -D eslint-plugin-comment-on-useeffect

yarn add -D eslint-plugin-comment-on-useeffect

Usage in Flat config

Add the plugin to your ESLint configuration file:

import eslintPluginCommentOnUseEffect from "eslint-plugin-comment-on-useeffect";
// ... other imports

{
  plugins: {
    "comment-on-useeffect": eslintPluginCommentOnUseEffect,
  },
  rules: {
    "comment-on-useeffect/comment-on-useeffect": "warn",
  },
},

Run from command line

npx eslint src/**/*.{ts,tsx}