REACT Tutorial



EVENTS IN REACT


Events in React

In React, events allow you to make your applications interactive. You can respond to user actions such as clicks, typing, form submissions, mouse movements, and keyboard inputs. React uses a system called Synthetic Events that normalizes events across different browsers to provide a consistent API.

React Event Handling Basics

Unlike traditional HTML where event handlers are lowercase and use strings, React events are named using camelCase and you pass a function reference instead of a string. This ensures better performance and allows you to handle events declaratively.

import React from 'react';

function ClickDemo() {
  function handleClick() {
    alert('You clicked the button!');
  }

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

export default ClickDemo;

Here, handleClick is a JavaScript function that runs when the button is clicked. Notice how the event handler is passed directly as onClick={handleClick}, not as a string.

Preventing Default Behavior

In many cases, especially with forms and links, you want to prevent the browser's default action. React's synthetic events provide a method called preventDefault() for this.

function FormDemo() {
  function handleSubmit(event) {
    event.preventDefault();
    alert('Form submission prevented!');
  }

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

The handleSubmit function calls event.preventDefault() to stop the form from refreshing the page, which is the default behavior.

Passing Arguments to Event Handlers

Sometimes you need to pass extra data to your event handler. You can do this with arrow functions or Function.prototype.bind.

function ButtonWithArgs(props) {
  function greet(name) {
    alert('Hello, ' + name + '!');
  }

  return (
    <button onClick={() => greet(props.name)}>Greet</button>
  );
}

Using () => greet(props.name) ensures the function greet only runs when the button is clicked, not immediately on render.

Event Pooling in React

React implements event pooling to improve performance, meaning the event object is reused and all properties are nullified after the event callback runs. If you want to use the event asynchronously (e.g., in a timeout or promise), you need to call event.persist().

function DelayedEvent() {
  function handleClick(event) {
    event.persist(); // prevent React from nullifying the event
    setTimeout(() => {
      alert('Button clicked at: ' + event.type);
    }, 1000);
  }

  return (
    <button onClick={handleClick}>Click with Delay</button>
  );
}

Commonly Used React Events

  • onClick — mouse click events
  • onChange — input or form element value change
  • onSubmit — form submission
  • onMouseEnter / onMouseLeave — mouse hover enter/leave
  • onKeyDown / onKeyUp — keyboard key pressed or released
Tip: Use arrow functions to avoid confusion with this context inside event handlers!

🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review