eslint-plugin-react-no-manual-memo

ESLint plugin for codebases using React Compiler. Flags manual memoization (useMemo, useCallback, React.memo), reminding you to let the compiler do its thing ✨

Why?

As the React Compiler docs state:

React Compiler adds automatic memoization more precisely and granularly than is possible with useMemo, useCallback, and React.memo. If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn’t a match, the compiler will choose to bail out of optimizing that component.

When using React Compiler, manual memoization is no longer necessary in most cases. When the compiler sees manual memoization that does not match the memoization it generated, it will bail out to prevent breaking your components. This leaves potential performance on the table and makes your components harder to read!

This plugin helps you identify, and catch yourself writing, and remove these manual memoization patterns, since they are now largely redundant. In cases where manual memoization can improve on what the compiler is able to output, you're always free to disable the relevant rules!

Installation

npm install --save-dev eslint-plugin-react-no-manual-memo
# or
yarn add --dev eslint-plugin-react-no-manual-memo
# or
pnpm add --save-dev eslint-plugin-react-no-manual-memo

Rules

💼 Configurations enabled in.
⚠️ Configurations set to warn in.
🌐 Set in the all configuration.
✅ Set in the recommended configuration.
🔧 Automatically fixable by the --fix CLI option.

Name	Description	💼	⚠️	🔧
no-component-memo	Disallow React.memo() in favor of React Compiler automatic memoization	🌐 ✅		🔧
no-custom-memo-hook	Disallow custom hooks that only use useCallback and useMemo	🌐	✅
no-hook-memo	Disallow manual memoization hooks (useMemo, useCallback) in favor of React Compiler	🌐 ✅		🔧

Usage

Flat Config (ESLint 9+)

Use the recommended config inside defineConfig():

import { defineConfig } from "eslint/config";
import reactNoManualMemo from 'eslint-plugin-react-no-manual-memo';

export default defineConfig([
	reactNoManualMemo.configs['flat/recommended'],
]);

Note

ESLint will throw an error if you try to use the flat config without wrapping your config in defineConfig().

See the docs section about using third-party configs for more information.

Or configure it manually:

import { defineConfig } from "eslint/config";
import reactNoManualMemo from 'eslint-plugin-react-no-manual-memo';

export default defineConfig([
	{
		plugins: {
			'react-no-manual-memo': reactNoManualMemo,
		},
		rules: {
			'react-no-manual-memo/no-hook-memo': 'error',
			// ...and any other rules you want to enable
		},
	},
]);

Legacy Config (.eslintrc)

Use the recommended config:

{
	"extends": ["plugin:react-no-manual-memo/recommended"]
}

Or configure it manually:

{
	"plugins": ["react-no-manual-memo"],
	"rules": {
		"react-no-manual-memo/no-hook-memo": "error",
		// ...and any other rules you want to enable
	}
}

License

MIT