agentsqripts/lib/performance/react/detectInlineObjectCreation.js

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

/**
 * @file Detect inline object creation in JSX
 * @description Single responsibility: Identify inline object/function creation causing re-renders
 */

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

/**
 * Detect inline object creation in JSX
 */
function detectInlineObjectCreation(lines, filePath) {
  const issues = [];
  
  iterateLines(lines, (line, lineNumber, trimmed, i) => {
    
    // Inline objects in JSX props
    if (/<\w+/.test(trimmed)) {
      const inlineObjects = [
        /style=\s*\{\s*\{/, // style={{}}
        /\w+=\s*\{\s*\{/, // prop={{}}
        /\w+=\s*\[/, // prop={[]}
        /onClick=\s*\{\s*\(\s*\)\s*=>/, // onClick={() => {}}
        /\w+=\s*\{\s*\(\s*\)\s*=>/  // general arrow functions
      ];
      
      inlineObjects.forEach(pattern => {
        if (pattern.test(trimmed)) {
          issues.push({
            type: 'inline_object_creation',
            severity: 'MEDIUM',
            category: 'React',
            location: `${filePath}:${lineNumber}`,
            line: lineNumber,
            code: trimmed,
            description: 'Inline object/function creation in JSX causes unnecessary re-renders',
            summary: 'Inline object creation in render',
            recommendation: 'Move object/function outside render or use useMemo/useCallback',
            effort: 1,
            impact: 'Prevents unnecessary re-renders',
            estimatedSavings: '20-40% re-render reduction'
          });
        }
      });
    }
  });
  
  return issues;
}

module.exports = detectInlineObjectCreation;