@ospm/eslint-plugin-react-unhookify weekly downloads statistics

eslint-plugin-react-unhookify

ESLint plugin to remove React hooks (useMemo, useCallback) and memo HOC for cleaner React code.

Note: With React Compiler 1.0 now stable, automatic memoization is handled at build time. This plugin is most useful for:

• Projects using React Compiler
• Codebases where manual memoization was over-used
• Migrating legacy code before adopting React Compiler

Philosophy

This plugin follows the philosophy that:

1. Memoization should be intentional: Only use memoization when you have measured performance problems
2. Code simplicity matters: Unnecessary memoization adds complexity without benefits
3. React is fast: Modern React is already optimized, and premature optimization can hurt more than help
4. Developer experience: Cleaner code is easier to read, maintain, and debug

React Compiler 1.0 Context

React Compiler 1.0 (released October 2025) provides automatic memoization at build time, making manual useMemo, useCallback, and React.memo unnecessary in most cases.

Key Benefits of React Compiler

• Automatic optimization: Analyzes component data flow and memoizes automatically
• Better than manual: Can memoize in cases where hooks cannot be used (e.g., after early returns)
• Production proven: Battle-tested at Meta with 12% faster loads and 2.5× faster interactions
• Zero code changes: Works without requiring code rewrites

When to Use This Plugin vs React Compiler

Scenario	Recommended Approach
New projects	Use React Compiler 1.0
Existing projects	Adopt React Compiler incrementally, use this plugin to clean up over-memoization
Legacy codebases	Use this plugin to remove unnecessary memoization before compiler adoption
Performance-critical code	Use React Compiler + manual memoization only as escape hatches

React Compiler Recommendations

For new code: Rely on the compiler for memoization and use useMemo/useCallback only when you need precise control.

For existing code: Either leave existing memoization in place (removing it can change compilation output) or carefully test before removing.

Rules

remove-use-memo

Removes React.useMemo calls and inlines the computed value to simplify code by eliminating unnecessary memoization.

❌ Incorrect

const expensiveValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedResult = useMemo(() => a + b, [a, b]);

✅ Correct

const expensiveValue = computeExpensiveValue(a, b);
const result = a + b;

Edge Cases (will NOT be flagged):

• useMemo calls containing other React hooks (for safety)
• Complex functions with multiple statements
• Incorrect useMemo signatures

remove-use-callback

Removes React.useCallback calls and inlines the function to simplify code by eliminating unnecessary memoization.

❌ Incorrect

const handleClick = React.useCallback(() => {
  doSomething();
}, [doSomething]);

const handleChange = useCallback((event) => {
  console.log(event.target.value);
}, []);

✅ Correct

const handleClick = () => {
  doSomething();
};

const handleChange = (event) => {
  console.log(event.target.value);
};

remove-memo

Removes React.memo HOC calls and uses the component directly to simplify code by eliminating unnecessary memoization.

❌ Incorrect

const MyComponent = React.memo(() => {
  return <div>Hello</div>;
});

const MemoizedComponent = memo(({ name }) => {
  return <div>Hello {name}</div>;
});

✅ Correct

const MyComponent = () => {
  return <div>Hello</div>;
};

Installation

Option 1: React Compiler 1.0 (Recommended for new projects)

npm install --save-dev --save-exact babel-plugin-react-compiler@latest
npm install --save-dev eslint-plugin-react-hooks@latest

Option 2: This Plugin (For legacy cleanup or pre-compiler migration)

npm install @ospm/eslint-plugin-react-unhookify --save-dev

Option 3: Combined Approach

Use React Compiler for automatic optimization and this plugin to clean up legacy memoization:

npm install --save-dev --save-exact babel-plugin-react-compiler@latest
npm install --save-dev eslint-plugin-react-hooks@latest
npm install @ospm/eslint-plugin-react-unhookify --save-dev

Comparison: React Compiler vs Manual Memoization

Feature	React Compiler 1.0	Manual Memoization	This Plugin
Automatic optimization	✅ Build-time analysis	❌ Manual implementation	❌ Manual cleanup
Performance	12% faster loads, 2.5× interactions	Varies by implementation	Removes unnecessary overhead
Code simplicity	✅ No manual hooks needed	❌ Adds boilerplate	✅ Cleaner code
Control	Limited (escape hatches available)	✅ Full control	✅ Selective removal
Learning curve	Low (install and enable)	High (need to understand patterns)	Low (auto-fix available)
Best for	Most applications	Performance-critical cases	Legacy code cleanup

Usage

Flat config (ESLint 9+)

import reactUnhookify from '@ospm/eslint-plugin-react-unhookify';

export default [
  {
    plugins: {
      'react-unhookify': reactUnhookify,
    },
    rules: {
      'react-unhookify/remove-use-memo': 'error',
      'react-unhookify/remove-use-callback': 'error',
      'react-unhookify/remove-memo': 'error',
    },
  },
];

Legacy config (ESLint 8)

module.exports = {
  plugins: ['react-unhookify'],
  rules: {
    'react-unhookify/remove-use-memo': 'error',
    'react-unhookify/remove-use-callback': 'error',
    'react-unhookify/remove-memo': 'error',
  },
};

Recommended Configuration

This plugin exports a recommended configuration that enables all rules.

Flat config…