🚀 eslint-plugin-react-hooks-optimization 🔧

eslint-plugin-react-hooks-optimization is an ESLint plugin that recommends using useMemo and useCallback to optimize React projects and reduce unnecessary re-renders. This plugin detects performance issues in the codebase and provides specific recommendations to help developers achieve optimal performance.

✨ What's New in v1.0.3

• 🎯 Precise Warning Locations: Warnings now point to the exact code location needing optimization
• 🔍 Enhanced Loop Detection: Added detection for large iterations (e.g., i < 1000)
• ⚡ Performance Improvement: Operations inside Hooks are now recognized as already optimized

📦 Installation

npm install eslint-plugin-react-hooks-optimization --save-dev
# or
yarn add eslint-plugin-react-hooks-optimization --dev

⚙️ Configuration

Add to your ESLint configuration file (.eslintrc.json):

{
  "plugins": ["react-hooks-optimization"],
  "rules": {
    "react-hooks-optimization/prefer-optimization": [
      "warn",
      {
        "performanceThreshold": {
          "complexity": 5, // Function complexity threshold (number of conditions/loops)
          "arraySize": 1000 // Array size threshold (number of elements)
        }
      }
    ]
  }
}

Configuration Options Explained

• complexity (default: 5)

  • Total number of conditions/loops in a function
  • Lower values suggest more aggressive optimization

• arraySize (default: 1000)

  • Minimum array size requiring optimization
  • Lower values suggest more aggressive optimization

🎯 Memoization Rules

useMemo Suggestions

1. Large Array Operations

// ⚠️ Warning
const largeArray = new Array(1000).fill(0);

// ✅ Recommended
const largeArray = useMemo(() => new Array(1000).fill(0), []);

2. High Iteration Count

// ⚠️ Warning
for (let i = 0; i < 10000; i++) {
  // operations
}

// ✅ Recommended
const result = useMemo(() => {
  // iteration logic
}, []);

useCallback Suggestions

1. Event Handler Props

// ⚠️ Warning: Functions starting with 'handle' or 'on' passed as props
const handleClick = () => {
  // handle logic
};
<ChildComponent onClick={handleClick} />;

// ✅ Recommended
const handleClick = useCallback(() => {
  // handle logic
}, []);

🤔 Why These Rules?

1. Array Size (1000)

   • Large array operations can significantly impact render performance
   • The threshold of 1000 elements is based on common React application patterns

2. Complexity (5)

   • Functions with 5+ conditions/loops often benefit from memoization
   • Helps prevent expensive recalculations during re-renders

3. Event Handler Naming

   • Following React conventions for handler naming ('handle', 'on')
   • Ensures consistent optimization of component callbacks

🔧 Custom Configuration Examples

// Strict optimization
{
  "performanceThreshold": {
    "complexity": 3,
    "arraySize": 50
  }
}

// Default settings
{
  "performanceThreshold": {
    "complexity": 5,
    "arraySize": 100
  }
}

// Large-scale apps
{
  "performanceThreshold": {
    "complexity": 7,
    "arraySize": 500
  }
}

📜 License

MIT License

👨‍💻 Author

Created by Sijin