react-render-optimization

Keywords: react render optimization, performance, ESLint rule, JavaScript, TypeScript

ESLint Rule: react-render-optimization with LLM-optimized suggestions and auto-fix capabilities.

Quick Summary

Rule Details

Why This Matters

Configuration

No configuration options available.

Examples

❌ Incorrect

// Example of incorrect usage

✅ Correct

// Example of correct usage

Configuration Examples

Basic Usage

// eslint.config.mjs
export default [
  {
    rules: {
      'react-features/react-render-optimization': 'error',
    },
  },
];

LLM-Optimized Output

🚨 react render optimization | Description | MEDIUM
   Fix: Suggestion | Reference

Related Rules

• rule-name - Description

Further Reading

• Reference - Description

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.

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.