1.0.2 • Published 1 year ago

@antimatter-labs/eslint-plugin-no-anonymous-use-effect-callback-rule v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

@antimatter-labs/eslint-plugin-no-anonymous-use-effect-callback-rule

This package provides an opinionated eslint rule that enhances the readability and maintainability of React.useEffect usage, by suggesting the usage of names functions for useEffect callbacks.

This was inspired by this tweet of Cory House. Thanks!

TLDR

It will make eslint scream at you if you write

useEffect(() => {
   fetch('...').then(() => console.log("Complete!"))
}, [])

instead of writing

useEffect(function initialComponentFetch() {
   fetch('...').then(() => console.log("Complete!"))
}, [])

Usage

Install it using your package manager:

npm i -D @antimatter-labs/eslint-plugin-no-anonymous-use-effect-callback-rule
yarn add -D @antimatter-labs/eslint-plugin-no-anonymous-use-effect-callback-rule
pnpm add -D @antimatter-labs/eslint-plugin-no-anonymous-use-effect-callback-rule

In your eslint config file add the following (remeber to replace with the desired value: "error", "warn"...)

{
  ...
  "plugins": [
    ...,
    "@antimatter-labs/eslint-plugin-no-anonymous-use-effect-callback-rule"
  ],
  "rules": {
    ...,
    "@antimatter-labs/no-anonymous-use-effect-callback-rule/base": ["<severity>"]
  },
}

The rule act on the following expressions and will trigger a message with the severity specified by you in your eslint config.

import * as React from 'react'

function MyComponent() {
  React.useEffect(function () {})
  React.useEffect(() => {})

  return ...
}
import * as React from 'react'

function MyComponent() {
  useEffect(function () {})
  useEffect(() => {})

  return ...
}
1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago