Event handling in React allows components to respond to user interactions such as clicking a button, typing in an input field, submitting a form, or hovering over an element. Without event handling, React applications would be static and unable to react to user behavior.

React uses a concept called Synthetic Events, which are wrappers around native browser events. Synthetic events provide a consistent interface across different browsers, ensuring predictable behavior. From a developer’s perspective, handling events in React feels very similar to handling events in plain JavaScript, but with some important differences.

Basic Event Handling in React

In React, events are written using camelCase, and instead of passing a string, you pass a function as the event handler.

Example of a click event:

function ClickButton() {
  function handleClick() {
    console.log("Button clicked");
  }

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

Here, the onClick attribute receives a function reference. The function is executed only when the button is clicked.

Inline Event Handlers

You can also define event handlers inline using arrow functions. This is common for simple actions.

Example:

<button onClick={() => console.log("Clicked")}>
  Click Me
</button>

However, for complex logic, defining a separate function is recommended for better readability and performance.

Handling Events with Parameters

Sometimes, you need to pass additional data to an event handler. This can be done using arrow functions.

Example:

function Button({ id }) {
  function handleClick(itemId) {
    console.log("Item ID:", itemId);
  }

  return <button onClick={() => handleClick(id)}>Delete</button>;
}

This pattern is widely used in lists, tables, and dynamic UI elements.

Event Handling in Forms

Forms are one of the most common use cases for event handling in React. Events like onChange and onSubmit are used to capture user input.

Example of input change handling:

import { useState } from "react";

function InputExample() {
  const [text, setText] = useState("");

  return (
    <input
      type="text"
      value={text}
      onChange={e => setText(e.target.value)}
    />
  );
}

Here, the onChange event updates the component’s state whenever the user types.

Example of form submission:

function FormExample() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("Form submitted");
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

The preventDefault method stops the browser from reloading the page, which is essential in React applications.

Common React Events

React supports many common events, including onClick, onChange, onSubmit, onKeyDown, onMouseEnter, and onBlur. These events behave consistently across browsers thanks to React’s Synthetic Event system.

Real-World Scenario

In a real-world application like a dashboard or form-based system, event handling is used to capture user actions such as saving data, navigating between steps, filtering results, or validating inputs. For example, clicking a “Save” button triggers an event that validates form data and sends it to a backend service.

Important Notes and Best Practices

Always pass a function to event handlers, not the result of a function call. Avoid writing heavy logic directly inside JSX. Keep event handler functions clean and focused. When handling forms, always prevent default browser behavior unless a page reload is intended.

In summary, event handling in React is the mechanism that allows components to respond to user actions. By using synthetic events, camelCase syntax, and function-based handlers, React provides a clean and reliable way to build interactive, user-driven applications.