Skip to main content

React Events

Synthetic events = React's cross-browser event system

What are Synthetic Events?​

"React's wrapper around native events"

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

"Synthetic events are React's normalized event system that provides consistent behavior across browsers, wrapping native events."

Event Handling​

camelCase event names

// HTML
<button onclick="handleClick()">

// React
<button onClick={handleClick}>

"React uses camelCase for event names (onClick, onChange) instead of lowercase HTML attributes."

Event Handlers​

Function reference, not string

// ✅ Correct
<button onClick={handleClick}>

// ❌ Wrong
<button onClick="handleClick()">

"Event handlers in React are function references, not strings like in HTML."

Event Object​

SyntheticEvent, not native Event

function handleClick(e) {
  e.preventDefault(); // SyntheticEvent
  console.log(e.target); // Element that triggered
  console.log(e.currentTarget); // Element with handler
}

"Event handlers receive SyntheticEvent objects, not native events, providing consistent API across browsers."

Event Pooling (Legacy)​

Events reused, need to persist

// ❌ Old React - event pooling
function handleClick(e) {
  setTimeout(() => {
    console.log(e.type); // null (event reused)
  }, 100);
}

// ✅ Persist event
function handleClick(e) {
  e.persist();
  setTimeout(() => {
    console.log(e.type); // Works
  }, 100);
}

Note: Event pooling removed in React 17+.

"In older React versions, events were pooled and reused - React 17+ removed this, events persist automatically."

Common Events​

onClick · onChange · onSubmit

// Click
<button onClick={handleClick}>

// Change
<input onChange={handleChange}>

// Submit
<form onSubmit={handleSubmit}>

// Mouse
<div onMouseEnter={handleEnter}
     onMouseLeave={handleLeave}>

"Common React events include onClick, onChange, onSubmit, and mouse events like onMouseEnter/Leave."

Passing Arguments​

Arrow function or bind

// Arrow function
<button onClick={() => handleClick(id)}>

// Bind
<button onClick={handleClick.bind(null, id)}>

// Inline arrow
<button onClick={(e) => handleClick(e, id)}>

"Pass arguments to event handlers using arrow functions or bind, with event object as first parameter."

Preventing Default​

e.preventDefault()

function handleSubmit(e) {
  e.preventDefault(); // Prevent form submission
  // Handle form
}

"Use e.preventDefault() to prevent default browser behavior, like form submission or link navigation."

9️⃣ Event Delegation​

React uses delegation automatically

React automatically uses event delegation:

  • All events delegated to document root
  • Better performance
  • Automatic cleanup

"React automatically uses event delegation, attaching listeners to document root for better performance and automatic cleanup."

Stop Propagation​

e.stopPropagation()

function handleClick(e) {
  e.stopPropagation(); // Stop bubbling
  // Handle click
}

"Use e.stopPropagation() to stop event from bubbling up to parent elements."

"React uses synthetic events - cross-browser wrappers around native events. Event names are camelCase (onClick). Handlers receive SyntheticEvent objects. React 17+ removed event pooling. React automatically uses event delegation. Use e.preventDefault() and e.stopPropagation() to control event behavior."

🧠 Ultra-Short Cheat Sheet​

Synthetic events
camelCase (onClick)
Function references
SyntheticEvent object
Event delegation (automatic)
preventDefault()
stopPropagation()
React 17+ no pooling