react-eslint-plugin Rules I Like

An ill-configured linter can slow you down, it might do more harm than good. Let Prettier handle formatting, the linter is for Actual (Potential) Problems©. This section in this post explains it better than I could: Don’t Get Distracted by Imaginary Problems — Overreacted

eslint-plugin-react is a nice ESLint plugin. It has been around for a while and accreted a lot of rules over the years. It has a lot of rules that are meant for class components and propTypes that are not that really relevant anymore.

There are some truly bizarre rules as well, like react/no-set-state, react/no-multi-comp (see this post) and react/jsx-one-expression-per-line.

Still it has valuable rules that I turn on by default. Here's my list, by category and roughly in order of importance:

Bugs

• react/jsx-key Crucial!
• react/no-unstable-nested-components Also crucial!
• react/jsx-no-leaked-render
• react/style-prop-object
• react/void-dom-elements-no-children
• react/jsx-no-duplicate-props

Formatting/Conventions

• react/hook-use-state
• react/destructuring-assignment
• react/no-children-prop
• react/jsx-no-useless-fragment
• react/jsx-fragments
• react/self-closing-comp
• react/display-name Ensure component wrapped in forwardRef and memo have displayName. See my post on it: Avoid anonymous components with displayName`
• react/jsx-pascal-case Resist the urge to write components in all caps

Perf

• react/jsx-no-constructed-context-values Note that this makes no sense when the context provider is at the root of your app and can’t be re-rendered! See an overlooked factor for performance optimization in React