eslint-plugin-react-etc

This package will eventually contain a bunch of ESLint rules - some of which will require the use of TypeScript - to highlight potential problems or poor practices in React. As a starting point, there is a single rule - prefer-usememo - but you can expect more rules to be added in future releases, as I have a bunch of ideas that I want to explore.

Some of the rules will be rather opinionated and won't be included in the recommended configuration. Developers can decide for themselves whether they want to enable opinionated rules.

Install

Install the package using npm:

npm install eslint-plugin-react-etc --save-dev

Some of the rules in this package require the ESLint TypeScript parser (indicated in the table below). If you intend to use those rules, install the parser using npm:

npm install @typescript-eslint/parser --save-dev

And then configure the parser and the parserOptions for ESLint. Here, I use a .eslintrc.js file for the configuration:

1const { join } = require("path");
2module.exports = {
3  parser: "@typescript-eslint/parser",
4  parserOptions: {
5    ecmaVersion: 2020,
6    project: join(__dirname, "./tsconfig.json"),
7    sourceType: "module"
8  },
9  plugins: ["react-etc"],
10  extends: [],
11  rules: {
12    "react-etc/prefer-usememo": "error"
13  }
14};

Or, using the recommended configuration:

1const { join } = require("path");
2module.exports = {
3  parser: "@typescript-eslint/parser",
4  parserOptions: {
5    ecmaVersion: 2019,
6    project: join(__dirname, "./tsconfig.json"),
7    sourceType: "module"
8  },
9  extends: ["plugin:react-etc/recommended"],
10};

Rules

The package includes the following rules:

Rule	Description	TS-only	Recommended
prefer-usememo	Forbids useEffect when useMemo should suffice. It's an implementation of the rule that Sophie Alpert mentioned in this tweet.	No	Yes
no-unstable-context-selector	Forbids passing functions that return unstable values to useContextSelector.	No	Yes