jsx-handler-names

Keywords: React, event handlers, naming conventions, onClick, onSubmit, handleClick, ESLint rule, LLM-optimized

Enforces consistent naming conventions for event handler functions in JSX. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages.

Quick Summary

Aspect	Details
Severity	Low (code style)
Auto-Fix	❌ No (requires manual renaming)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	Code consistency, team conventions

Rule Details

Naming Convention

JSX Prop	Expected Handler Name	Alternative
`onClick`	`handleClick`	`onClick`
`onSubmit`	`handleSubmit`	`onSubmit`
`onChange`	`handleChange`	`onChange`
`onFocus`	`handleFocus`	`onFocus`
`onBlur`	`handleBlur`	`onBlur`

Examples

❌ Incorrect

// Handler doesn't follow convention
<button onClick={clickHandler}>Click</button>

// Unclear naming
<form onSubmit={submit}>Submit</form>

// Missing prefix
<input onChange={nameChange} />

// Arbitrary naming
<div onMouseEnter={mouseIn}>Hover</div>

✅ Correct

// Using 'handle' prefix
<button onClick={handleClick}>Click</button>

// Using 'on' prefix (for passed props)
<button onClick={onClick}>Click</button>

// Descriptive handler names
<form onSubmit={handleSubmit}>Submit</form>

// With context in name
<input onChange={handleNameChange} />

// Inline functions are allowed
<button onClick={() => doSomething()}>Click</button>

Configuration

{
  rules: {
    'react-features/jsx-handler-names': 'warn'
  }
}

Best Practices

Convention	Example	Use When
`handle` + Event	`handleClick`	Component's own handlers
`handle` + Context + Event	`handleFormSubmit`	Multiple similar handlers
`on` + Event	`onClick`	Props passed from parent

Example Component

function UserForm({ onSubmit }) {
  // Internal handlers use 'handle' prefix
  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  // Props from parent use 'on' prefix
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({ name, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleNameChange} />
      <input onChange={handleEmailChange} />
    </form>
  );
}

jsx-no-bind - Prevent binding in JSX props
no-anonymous-default-export - Require named exports

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.