no-redundant-should-component-update

Keywords: React, shouldComponentUpdate, performance, PureComponent, optimization, ESLint rule, LLM-optimized

Prevent redundant shouldComponentUpdate implementations that just return true. This rule is part of eslint-plugin-react-features.

Quick Summary

Aspect	Details
Severity	Warning (dead code)
Auto-Fix	❌ No (requires review/removal)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	React class components

Rule Details

A shouldComponentUpdate method that always returns true is redundant since that's React's default behavior. Remove it or implement meaningful comparison logic.

Why This Matters

Issue	Impact	Solution
🔄 Dead code	Unnecessary method overhead	Remove or implement logic
🐛 False optimization	Misleading code intent	Use PureComponent instead
🔍 Maintenance burden	Code appears to do something	Clean up redundant code

Examples

❌ Incorrect

class MyComponent extends React.Component {
  // BAD: Just returns true - this is default behavior!
  shouldComponentUpdate() {
    return true;
  }
  
  render() {
    return <div>{this.props.value}</div>;
  }
}

class AnotherComponent extends React.Component {
  // BAD: Also redundant
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }
}

✅ Correct

// GOOD: No shouldComponentUpdate (uses default behavior)
class MyComponent extends React.Component {
  render() {
    return <div>{this.props.value}</div>;
  }
}

// GOOD: Meaningful implementation
class OptimizedComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Only re-render if value actually changed
    return nextProps.value !== this.props.value ||
           nextState.count !== this.state.count;
  }
}

// BETTER: Use PureComponent for shallow comparison
class PureComponent extends React.PureComponent {
  render() {
    return <div>{this.props.value}</div>;
  }
}

// BEST: Use functional component with React.memo
const MemoizedComponent = React.memo(function MyComponent({ value }) {
  return <div>{value}</div>;
});

Configuration Examples

Basic Usage

{
  rules: {
    'react-features/no-redundant-should-component-update': 'warn'
  }
}

require-optimization - Optimization suggestions
react-render-optimization - Render performance

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Wrapped or Aliased Functions

Why: Custom wrapper functions or aliased methods are not recognized by the rule.

// ❌ NOT DETECTED - Custom wrapper
function myWrapper(data) {
  return internalApi(data); // Wrapper not analyzed
}
myWrapper(unsafeInput);

Mitigation: Apply this rule's principles to wrapper function implementations. Avoid aliasing security-sensitive functions.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.