✅ What is Event Handling in React?

Event handling in React refers to responding to user interactions such as clicks, typing, form submissions, and keyboard actions by passing handler functions to JSX attributes like onClick, onChange, and onSubmit. Unlike native browser events, React wraps events in a SyntheticEvent, which provides a consistent, cross-browser interface. Event handlers receive an event object and can use methods like e.preventDefault() to stop default behavior or e.stopPropagation() to control event bubbling.

🧠 Key Rules and Differences Compared to Plain DOM

React event names use camelCase such as onClick and onChange instead of lowercase HTML attributes. You must pass a function reference to an event handler, not invoke it directly, meaning onClick={handleClick} is correct while onClick={handleClick()} is not. React uses e.preventDefault() rather than returning false, relies on event delegation for performance, and requires you to extract values early when using events asynchronously because SyntheticEvents are pooled.

🔧 Example: Functional Component with Hooks

import React, { useState } from "react";

function CounterForm() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  function handleClick(e) {
    console.log("clicked:", e.type);
    setCount(c => c + 1);
  }

  function handleChange(e) {
    setName(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    alert(`Submitted name="${name}" with count=${count}`);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
      <form onSubmit={handleSubmit}>
        <input value={name} onChange={handleChange} placeholder="Your name" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

🎯 Passing Arguments to Event Handlers

When you need to pass additional data to a handler, wrap the function in an arrow function so the event is still available.

const id = 42;

function handleDelete(id, e) {
  e.preventDefault();
  console.log("delete", id);
}

<button onClick={(e) => handleDelete(id, e)}>Delete</button>;

🏛️ Example: Event Handling in a Class Component

import React from "react";

class Toggle extends React.Component {
  state = { on: false };

  handleToggle = () => {
    this.setState(s => ({ on: !s.on }));
  };

  render() {
    return (
      <button onClick={this.handleToggle}>
        {this.state.on ? "On" : "Off"}
      </button>
    );
  }
}

📌 Common React Event Types

Frequently used events in React include onClick for mouse clicks, onChange for form input updates, onSubmit for form submission, onKeyDown and onKeyUp for keyboard interactions, and onFocus and onBlur for focus management.

✅ Best Practices

Always use camelCase event names and pass function references instead of invoking them. Extract values from the event object early if you plan to use them asynchronously. Keep handlers small and focused, group related logic for readability, and clean up side effects when needed to avoid memory leaks.

🧾 Conclusion

Event handling in React is a fundamental concept for building interactive user interfaces. By leveraging SyntheticEvent, following React’s naming conventions, and using hooks or class methods correctly, you can write predictable, maintainable, and cross-browser-safe event-driven code. Mastering event handling enables you to build responsive and user-friendly React applications.

Event Handling in React – Complete Guide with Examples