Event Handling in React

Analogy categoryAnalogies

Introduction

React lets you respond to user interactions like clicks, key presses, and form changes by attaching event handlers directly to JSX elements. Instead of raw DOM events, React wraps browser events in a cross-browser wrapper called a SyntheticEvent, which normalizes behavior across different browsers and works consistently with React's event delegation system. In React 17+, events are attached at the root DOM container instead of document, but the SyntheticEvent API you write against stays the same.

🏏

Cricket analogy: Attaching onClick to a JSX button is like a fielding coach responding to a catch signal from anywhere on the field; React wraps the raw signal in a SyntheticEvent, a standardized umpire signal that means the same thing in Mumbai or Melbourne, and since React 17 it's relayed through the stadium's central hub rather than the league office.

Syntax

jsx

function Button() {
  function handleClick(event) {
    console.log('Button clicked!', event.type);
  }

  return <button onClick={handleClick}>Click me</button>;
}

Explanation

React event handler props use camelCase (onClick, onChange, onSubmit) rather than lowercase HTML attributes (onclick). You pass a function reference, not a string, and you should not call the function immediately — write onClick={handleClick}, never onClick={handleClick()}, since the latter invokes it during render. The handler receives a SyntheticEvent object as its argument, which has the same interface as native events (target, preventDefault, stopPropagation) but is pooled for performance in older React versions and safe to read asynchronously in React 17+. To pass extra arguments, wrap the call in an arrow function, e.g. onClick={() => handleClick(id)}.

🏏

Cricket analogy: Naming a handler onClick, camelCase not 'onclick', and passing onClick={handleAppeal} — never handleAppeal(), which would fire the appeal instantly during rendering instead of waiting for the umpire's real signal; to pass which fielder is appealing, wrap it as onClick={() => handleAppeal(fielderId)}.

Example

jsx

function TodoItem({ id, text, onRemove }) {
  function handleRemoveClick(event) {
    event.stopPropagation();
    onRemove(id);
  }

  return (
    <li onClick={() => console.log('Row clicked', id)}>
      {text}
      <button onClick={handleRemoveClick}>Delete</button>
    </li>
  );
}

Output

Clicking anywhere on the list item logs 'Row clicked' with the item's id. Clicking the Delete button calls stopPropagation() first, so the row's onClick does not also fire, and then calls onRemove(id) to notify the parent component that the item should be removed from state.

🏏

Cricket analogy: Clicking anywhere on a player's row logs 'Row clicked' with their id, but clicking 'Drop from XI' calls stopPropagation() first so the row click doesn't also fire, then calls onRemove(id) to notify the selection committee's parent state.

Key Takeaways

React event props use camelCase, e.g. onClick, onChange, onSubmit.
Pass a function reference to the handler prop; use an arrow function to pass arguments.
SyntheticEvent normalizes native events across browsers and exposes .preventDefault() and .stopPropagation().
Since React 17, events are delegated to the root container instead of document, easing multi-version React embedding.
Avoid inline function creation in performance-critical lists when it causes unnecessary re-renders of memoized children.