{
  "context": "This criteria evaluates how well the engineer follows React component and event handler naming conventions, particularly those enforced by ESLint configurations like react/jsx-handler-names, react/jsx-no-bind, and react/jsx-pascal-case.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Component naming",
      "description": "The component is named using PascalCase (e.g., ToggleButton, not toggleButton or toggle_button). This follows the react/jsx-pascal-case rule.",
      "max_score": 15
    },
    {
      "name": "Event handler prop naming",
      "description": "Event handler props follow the 'on*' naming pattern (e.g., onStateChange, onClick, onToggle). This follows the react/jsx-handler-names rule for callback prop naming.",
      "max_score": 20
    },
    {
      "name": "Event handler method naming",
      "description": "Internal event handler methods follow the 'handle*' naming pattern (e.g., handleClick, handleToggle). This follows the react/jsx-handler-names rule for handler function naming.",
      "max_score": 20
    },
    {
      "name": "No .bind() in JSX",
      "description": "The implementation does not use .bind() in JSX props (e.g., avoids onClick={this.handleClick.bind(this)}). This follows the react/jsx-no-bind rule which prevents performance issues.",
      "max_score": 15
    },
    {
      "name": "No arrow functions in JSX",
      "description": "The implementation does not use arrow functions directly in JSX props (e.g., avoids onClick={() => handleClick()}). This follows the react/jsx-no-bind rule which prevents unnecessary re-renders.",
      "max_score": 15
    },
    {
      "name": "React hooks usage",
      "description": "Uses React.useState hook correctly to manage internal state (active/inactive toggle), demonstrating proper functional component patterns.",
      "max_score": 15
    }
  ]
}