Rule for documenting effects

[kaisermann]

Is your feature request related to a problem? Please describe.

A single useEffect can be easy to understand. However, multiple useEffect calls in a relatively complex application can be hard to understand.

Describe the solution you'd like

I propose a rule vtex/react-explicit-effects, or vtex/react-documented-effects, that looks for effect react hooks (not only useEffect) and enforces one of two ways to document the purpose of the hook:

• Adding a comment above the hook call, explaining the effect use-case.

import { useEffect } from 'react'

const Potato = () => {
  // do this and do that
  useEffect(() => {
    /// ...
  })
}

• Using a named function instead of an arrow function:

import { useEffect } from 'react'

const Potato = () => {
  useEffect(function doThisAndThat() {
    /// ...
  })
}

Describe alternatives you've considered

Leave people to document effects themselves (which is a big no-no)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.
If this is a discussion thread, the most voted option will be final. Thank you for your contributions.

[kaisermann]

If anyone still wants this, I've made a basic version of this rule on my personal preset (which is basically the same as VTEX's):
https://github.com/kaisermann/kiwi/blob/main/packages/eslint-plugin/docs/rules/react-descriptive-effect.md

[igorbrasileiro]

It would be good to have something like that, it enhances the readability and maintainability of the code. Interesting rule, I like it @kaisermann 👏

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.
If this is a discussion thread, the most voted option will be final. Thank you for your contributions.