Skip to main content

Event Handlers in React: Best Practices and Key Concepts

Event Handlers​

Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.

Event handling uses camelCase syntax, in contrast to HTML where event names are written in lowercase. For example, onclick becomes onClick.

To add an event handler, define event handlers as functions and then pass it as a prop to the appropriate JSX tag.

function Button() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

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

Inline Event Handlers​

Event handler functions can be defined directly inline, which is convenient for handling simple actions.

<button onClick={() => alert("Button clicked!")}>Click Me</button>

However, this approach can affect performance due to the recreation of the function on each re-render. If the event handler is defined inside the component, you can use the useCallback hook to memoize the function, preventing it from being recreated on every re-render.

Why Functions Passed To Event handlers Are Passed, Not Called?​

Functions passed to event handlers should be passed, not called. For example:

// Passing a function (correct)
<button onClick={handleClick}></button>

// Calling a function (incorrect)
<button onClick={handleClick()}></button>

The difference is subtle. In the first example, handleClick is passed as the event handler, so React will call it only when the button is clicked.

In the second example, the handleClick() function is executed immediately during rendering due to the () parentheses, which triggers the function right away, not on the click event.

What Are Synthetic Events​

Synthetic events are React's cross-browser wrapper around browser-native events.

Its API is same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

The native events can be accessed directly from synthetic events using nativeEvent attribute.

function handleEvent(event) {
  const nativeEvent = e.nativeEvent;
  console.log(nativeEvent);
  e.stopPropagation();
  e.preventDefault();
}

export default function App() {
  return <button onClick={handleEvent}>Click Me</button>;
}

Event Propogation​

You can stop event propagation and prevent the default behavior of an event using the stopPropagation() and preventDefault() methods, respectively. These methods are available on the event object passed to event handlers in React.

function MyComponent() {
  const handleClick = (e) => {
    // Prevent the default behavior of a click event (e.g., following a link)
    e.preventDefault();

    // Stop the propagation of the event to parent elements (bubbling phase)
    e.stopPropagation();

    // Your custom logic here
  };

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

How To Pass A Parameter To An Event Handler?​

  1. You can pass parameters to an event handler by wrapping the handler in an anonymous function

    import React from "react";

    function Button() {
      const handleClick = (name) => {
        console.log(`${name} clicked!`);
      };

      return <button onClick={() => handleClick("John")}>Click me!</button>;
    }

  2. You can use the bind method to bind the event handler to a specific context and pass arguments

    function Button() {
      const handleClick = function (event, name) {
        console.log(`${name} clicked!`);
        console.log(event.target); // prints the button element
      };

      return <button onClick={handleClick.bind(this, "John")}>Click me!</button>;
    }

Bubble & Capture Events In React​

When an event is triggered, it follows two main phases:

  1. Capture Phase: The event travels from the root element of the DOM down to the target element.onClickCapture: Handles the event in the capture phase.

  2. Bubble Phase: The event travels from the target element back up to the root. onClick: Handles the event in the bubble phase.

export default function App() {
  const bubbleHandler = (e) => {
    console.log(`Bubble:: ${e.currentTarget.tagName}`);
  };

  const captureHandler = (e) => {
    console.log(`Capture:: ${e.currentTarget.tagName}`);
  };

  return (
    <div onClickCapture={captureHandler} onClick={bubbleHandler}>
      <span onClickCapture={captureHandler} onClick={bubbleHandler}>
        <button onClickCapture={captureHandler} onClick={bubbleHandler}>
          Click Me
        </button>
      </span>
    </div>
  );
}
// Output:
Capture::DIV;
Capture::SPAN;
Capture::BUTTON;

Bubble::BUTTON;
Bubble::SPAN;
Bubble::DIV;

Difference Between HTML and React Event Handling​

AspectHTML Event HandlingReact Event Handling
SyntaxUses lowercase event names, e.g., onclick, onchange.Uses camelCase event names, e.g., onClick, onChange.
Event Listener AttachmentEvent listeners are directly added to DOM elements.Event listeners are managed by React using a single event listener on the root element (delegation).
Event ObjectThe event object is a native DOM event object.React provides a synthetic event object (wrapper around the native event for cross-browser compatibility).
Binding thisIn regular functions, this may need manual binding (e.g., onclick="handler.bind(this)").In React, this binding is handled automatically in arrow functions. For class components, you need explicit binding.
Adding ListenersMultiple listeners for the same event can be added.React does not allow multiple handlers for the same event on a single element; the latest handler overwrites previous ones.
Memory ManagementDevelopers need to manually remove event listeners to prevent memory leaks.React cleans up event listeners automatically during component unmounting.
Custom EventsYou can create and dispatch custom DOM events.React doesn't support custom events directly; instead, you use state, props, or context for communication.