agentsqripts/lib/performance/react/detectRenderOptimization.js

Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems

/**
 * @file Detect render optimization issues
 * @description Single responsibility: Identify missing render optimizations in React components
 */

const { iterateLines } = require('../../utils/patternDetector');
const isLargeComponent = require('./isLargeComponent');
const analyzeRenderComplexity = require('./analyzeRenderComplexity');

/**
 * Detect render optimization issues
 */
function detectRenderOptimization(lines, filePath, content) {
  const issues = [];
  
  iterateLines(lines, (line, lineNumber, trimmed, i) => {
    
    // Large components without React.memo
    if (/export.*function\s+\w+|export.*const\s+\w+.*=/.test(trimmed) && 
        isLargeComponent(lines, i)) {
      
      // Check if React.memo is used
      const hasMemo = content.includes('React.memo') || content.includes('memo(');
      if (!hasMemo) {
        issues.push({
          type: 'missing_memo',
          severity: 'MEDIUM',
          category: 'React',
          location: `${filePath}:${lineNumber}`,
          line: lineNumber,
          code: trimmed,
          description: 'Large component without React.memo - potential unnecessary re-renders',
          summary: 'Component missing memoization',
          recommendation: 'Wrap component with React.memo to prevent unnecessary re-renders',
          effort: 1,
          impact: '30-60% render performance improvement',
          estimatedSavings: '30-60% render optimization'
        });
      }
    }
    
    // Render method with complex logic
    if (/render\s*\(\s*\)\s*{|return\s*\(/.test(trimmed)) {
      const renderComplexity = analyzeRenderComplexity(lines, i);
      if (renderComplexity.score > 10) {
        issues.push({
          type: 'complex_render',
          severity: 'HIGH',
          category: 'React',
          location: `${filePath}:${lineNumber}`,
          line: lineNumber,
          code: trimmed,
          description: `Complex render logic detected (score: ${renderComplexity.score})`,
          summary: 'Complex render method affecting performance',
          recommendation: 'Break down render into smaller components or use useMemo for expensive calculations',
          effort: 3,
          impact: 'Significant render performance improvement',
          estimatedSavings: '40-70% render time reduction'
        });
      }
    }
  });
  
  return issues;
}

module.exports = detectRenderOptimization;