agentsqripts/lib/static-bugs/detectors/react-pattern/detect/detectMissingKeys.js

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

/**
 * @file Detect missing keys in React list rendering
 * @description Single responsibility: Detect missing key props in React list rendering
 */

const walk = require('acorn-walk');
const { getLineNumber } = require('../../../utils/astParser');

/**
 * Detect missing keys in list rendering
 * @param {Object} ast - AST tree
 * @param {string} filePath - File path
 * @returns {Array} Detected bugs
 */
function detectMissingKeys(ast, filePath) {
  const bugs = [];
  
  walk.simple(ast, {
    CallExpression(node) {
      // Look for array.map() calls
      if (node.callee.type === 'MemberExpression' &&
          node.callee.property.name === 'map' &&
          node.arguments.length > 0) {
        
        const callback = node.arguments[0];
        
        // Check if the callback returns JSX without key prop
        // This is a simplified check - real JSX parsing would be more complex
        if (callback.body && callback.body.type === 'JSXElement') {
          const hasKey = callback.body.openingElement.attributes.some(
            attr => attr.name && attr.name.name === 'key'
          );
          
          if (!hasKey) {
            bugs.push({
              type: 'missing_react_key',
              severity: 'HIGH',
              category: 'React',
              line: getLineNumber(node),
              column: node.loc ? node.loc.start.column : 0,
              description: 'Missing key prop in list rendering',
              recommendation: 'Add a unique key prop to each element in the list',
              effort: 1,
              impact: 'high',
              file: filePath
            });
          }
        }
      }
    }
  });
  
  return bugs;
}

module.exports = detectMissingKeys;