eslint-plugin-react-no-manual-memo

1.0.4 verified Fri May 01 auth: no javascript

ESLint plugin for codebases using React Compiler. Flags manual memoization patterns (useMemo, useCallback, React.memo) to remind developers to let the compiler optimize automatically. Current version 1.0.4, actively developed, ships TypeScript types. Provides three rules: no-component-memo (auto-fixable), no-hook-memo (auto-fixable), and no-custom-memo-hook. Includes a recommended flat config for ESLint 9+. Peer dependency on eslint ^8.57.0 || ^9.0.0. Key differentiator: specifically targets React Compiler users, unlike generic eslint-plugin-react.

Common errors

error Cannot find module 'eslint-plugin-react-no-manual-memo' ↓

cause Plugin not installed or not in node_modules.

fix

Run 'npm install --save-dev eslint-plugin-react-no-manual-memo'.

error ESLint: Error: 'react-no-manual-memo' config is not defined ↓

cause Attempting to use flat config without wrapping in defineConfig() or using incorrect config key.

fix

Use reactNoManualMemo.configs['flat/recommended'] inside defineConfig() array.

error ESLint: Unexpected top-level property 'plugins' ↓

cause Using flat config style but ESLint version < 9, or mixing config formats.

fix

Use ESLint 9+ for flat config, or use .eslintrc.* format for older versions.

Warnings

breaking v1.0.4 changed 'no-hook-memo' from warn to error in recommended config. If your build treats warnings as errors, expect new failures. ↓

fix Set rule severity explicitly: 'react-no-manual-memo/no-hook-memo': 'warn' in your config if you want warnings.

gotcha Flat config (ESLint 9+) must be wrapped in defineConfig() from eslint/config when using plugin configs directly. ESLint throws an error otherwise. ↓

fix Use defineConfig() as shown in the README, or apply config array directly per ESLint docs.

gotcha Plugin is ESM-only. Projects using CommonJS may encounter import issues. Ensure your ESLint config is an ES module or use dynamic import. ↓

fix Use 'import' syntax, or rename config file to .mjs, or set 'type': 'module' in package.json.

Install

npm install eslint-plugin-react-no-manual-memo

yarn add eslint-plugin-react-no-manual-memo

pnpm add eslint-plugin-react-no-manual-memo

Imports

default

wrong

const reactNoManualMemo = require('eslint-plugin-react-no-manual-memo')

correct

import reactNoManualMemo from 'eslint-plugin-react-no-manual-memo'

Plugin ships ESM only; CommonJS require may work depending on bundler but ESM is recommended.

rules

wrong

const { rules } = require('eslint-plugin-react-no-manual-memo')

correct

import { rules } from 'eslint-plugin-react-no-manual-memo'

Access individual rule definitions via named export. ESM only.

configs
```
import { configs } from 'eslint-plugin-react-no-manual-memo'
```
Use configs['flat/recommended'] for ESLint 9+ flat config.

Quickstart

Setup eslint-plugin-react-no-manual-memo with recommended flat config for ESLint 9+ and example of individual rule configuration.

// Install: npm install --save-dev eslint-plugin-react-no-manual-memo

// ESLint flat config (eslint.config.js)
import { defineConfig } from 'eslint/config';
import reactNoManualMemo from 'eslint-plugin-react-no-manual-memo';

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

// Or use individual rules
import reactNoManualMemo from 'eslint-plugin-react-no-manual-memo';
export default [
  {
    plugins: { 'react-no-manual-memo': reactNoManualMemo },
    rules: {
      'react-no-manual-memo/no-hook-memo': 'error',
      'react-no-manual-memo/no-component-memo': 'warn',
      'react-no-manual-memo/no-custom-memo-hook': 'warn',
    }
  }
];