A Simple Guide to

Understanding Event
Handling in React

INTRODUCTION
 Firat Atalay

Follow

207

When learning React, we often focus on rendering

and state management, but there’s another critical

piece we need to understand: event handling. React

uses events in a unique way, and before diving into

how React manages events, it’s essential to review

how events work in the browser, since React builds

on those concepts.

How Events Work in the Browser (The DOM)

To start, let’s imagine a webpage as a tree of

elements, called the DOM (Document Object

Model) tree. Now, when an event happens, like

clicking a button, the browser creates an event

object. But surprisingly, this event object isn’t

created exactly where you click. Instead, it’s created

at the very top of the DOM tree, at the document

root.

Once the event object is created, it starts its journey

down the tree in a process called the capturing

phase. It moves through each element, from the root

to the target — the element you clicked on.

When the event reaches its target, the browser runs

any event handler functions attached to that

element. But the process doesn’t stop there. After

reaching the target, the event travels back up the

tree in what we call the bubbling phase, passing

through each parent element along the way.

Two Key Concepts About Events in the Browser

 1. Event Propagation: During both capturing

and bubbling phases, the event visits every

parent and child element on its way down and

back up.

2. Event Handlers in the Bubbling Phase: By

default, event handlers respond during the

bubbling phase. So, if you have event handlers

attached to both a button and its parent

element, both will be triggered when you click

the button.

Controlling Event Bubbling

Sometimes, we may want to stop the event from

bubbling up to parent elements. To do this, we can

use a method called stopPropagation(). This works in

regular JavaScript and React, but it’s rarely needed.

Use it only if you have no other solution.

What is Event Delegation?

Imagine you have a webpage with 1,000 buttons. If

you wanted each button to respond to a click, you

could attach an event handler to each one

individually. But doing this for thousands of elements

would slow down your app and use a lot of memory.

This is where event delegation comes in. Instead of

adding event handlers to every single button, you can

add one event handler to a parent element that

contains all the buttons. When you click a button, the

event “bubbles up” to the parent, where the single

handler checks which button was clicked and

responds accordingly.

How Does Event Delegation Work?

When you click a button, the event starts at that

button and then travels up through all the parent

elements in a process called event bubbling. Using

event delegation, you place an event handler on a

common parent, like a <div> that wraps all the

buttons. This handler can then check which button

triggered the event using the event’s target property

and handle the click accordingly.

Here’s a simple example:

document.querySelector('.parent-div').addEventListener('click',
function(event) {

if (event.target.tagName === 'BUTTON') {

console.log('Button clicked:', event.target);

}
});

In this case, the event handler is added to the parent

<div>, but it will respond whenever any button inside

that <div> is clicked.

Event Delegation in Vanilla JavaScript vs. React

In vanilla JavaScript, we often use event delegation to

improve performance by reducing the number of

event handlers. However, in React, this technique is

not used as frequently. Why? Because React already

handles events efficiently using a similar approach

behind the scenes.

Why is Event Delegation Still Important to

Understand?
Even though you might not need to manually

implement event delegation in React, understanding

it is still valuable for two key reasons:

1. Troubleshooting Event Issues: Sometimes,

unexpected behavior in your React app can be

caused by event bubbling. Knowing how

events propagate can help you debug and fix

these issues.

2. React’s Internal Event Handling: React

uses a concept similar to event delegation.

Instead of adding event handlers to each

element, React adds one event listener at the

top level of your app and listens for events

there. This is part of how React optimizes

event handling.

Conclusion
Event delegation is a smart way to manage events in

web applications, especially when you have many

elements that need the same type of event handling.

Even though you might not use this technique directly

in React, knowing how it works will give you a deeper

understanding of both event handling and React’s

efficiency behind the scenes.

Understanding How React Handles Events:

Behind the Scenes

Event handling in React might seem simple at first

glance. You attach an onClick event to a button, pass a

function, and it just works, right? However, behind

the scenes, React is doing something quite

sophisticated. We’ll break down how React handles

events and why understanding this process is

important for you as a React developer.

Attaching Event Handlers in React

Let’s start with the basics. In a typical React app, you

would attach an event handler to a button like this:

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

Here, we’re using the onClick prop to listen for a click

event and calling the handleClick function when the

button is clicked. Simple enough, right?

How Events Are Handled Behind the Scenes

At first, you might think that React directly attaches

this event handler to the specific button you’ve

defined in the JSX. This would make sense, as it

seems similar to how events are handled in vanilla

JavaScript. But that’s not actually what happens!

In reality, React takes a different approach to

handling events. Instead of attaching event

handlers directly to individual DOM elements,

React attaches these handlers to a single root DOM

element — the element that wraps your entire React

application.

If you’ve ever used Create React App, you know that

your app usually gets rendered inside a <div> element

with an ID like root. It’s here that React adds all your

event handlers.

What Exactly Does React Do?

React uses a system called event delegation. When

you write multiple event handlers like this:

<button onClick={handleClickOne}>Button One</button>

<button onClick={handleClickTwo}>Button Two</button>

You might assume that React is adding an onClick

handler to each button. Instead, React is bundling

all of these event handlers into one and attaching

it to the root element. This is part of React's internal

system, and it works thanks to the Fiber tree—a data

structure that React uses to keep track of the

components and their state.

Why Does React Use Event Delegation?

There are several reasons why React handles events

this way:

1. Performance: Instead of attaching hundreds

or thousands of event handlers to individual

DOM elements, React uses one handler for

each event type (like click, input, etc.) and

manages everything centrally. This reduces

memory usage and increases the efficiency of

your app.

2. Consistency: By centralizing event handling,

React can ensure that event behavior is

consistent across different components and

platforms.

3. Simplified Event Management: Handling

events at the root allows React to manage

 complex behaviors, like event bubbling, in a

more controlled and predictable manner.

How Does This Impact Your Code?

For you as a developer, this is good news! You don’t

need to worry about manually managing event

listeners or worrying about performance issues

related to attaching too many event handlers. React

takes care of everything for you.

However, it’s important to understand this system so

that you can troubleshoot any issues that might arise,

especially with things like event bubbling or

propagation. For example, if you encounter

unexpected behavior with nested components,

knowing how React handles events at the root can

help you debug your code more effectively.

What Happens When You Click a Button?

Whenever you click a button in a React application,

something called an event object is created. But this

event doesn’t just stay where the click happens; it

follows a journey through the DOM tree (the

structure of your webpage). Here’s how it works:

1. Event Creation: As soon as you click, a new

event object is fired.

2. Capturing Phase: The event travels down

the DOM tree from the top, moving through

parent elements until it reaches the element

where the click happened (the target

element).

3. Bubbling Phase: After reaching the target

element, the event starts traveling back up

 the DOM tree through the parent elements.

This is called event bubbling.

Where Does React Handle the Event?

Now, here’s where React does something smart.

Instead of handling the event directly at the button

where the click occurred, React handles the event

at the root DOM element of your app. This is

usually the <div> with an ID of root where your entire

React app is rendered.

Here’s how React manages it:

● As the event bubbles back up the DOM tree, it

eventually reaches the root container.

● At this point, React checks which event

handler matches both the event type (like a

click) and the target element (the button).

● React then processes the event based on the

matching handler and executes the necessary

function.

This might seem like an extra step, but it’s all done to

make your app run faster and more efficiently.

Why Does React Do This?

React’s system of event delegation (handling events

at the root element) brings several benefits:

1. Performance: Instead of attaching event

handlers to every individual button or

element, React attaches just one handler at

the root. This reduces memory usage and

makes the app run more efficiently.

2. Simplicity: You don’t need to worry about

how events are bubbling up or where they are

being handled. React manages everything for

you behind the scenes.

3. Predictability: By centralizing event

handling, React ensures that the behavior is

 consistent across different parts of your app,

regardless of how the component structure

looks.

Important Note: DOM Tree vs. Component Tree

One thing to keep in mind is that event bubbling

happens based on the DOM tree, not the component

tree. Just because one component is nested inside

another in your React code doesn’t mean that the

same structure exists in the actual DOM. When

thinking about how events bubble up, it’s the physical

DOM structure that matters, not how your React

components are organized.

Understanding React’s Synthetic Events:

In React, handling events is an essential part of

building interactive applications. While React’s event

system looks a lot like traditional JavaScript, there

are some key differences. One of the most important

concepts to understand is synthetic events. Let’s

break this down in a simple and understandable way.

What Is a Synthetic Event?

In vanilla JavaScript, when an event occurs (like a

click or a key press), the browser creates an event

object. This event object carries important

information about the event — like what triggered it,

where it happened, and more. Examples of such

native events include mouse events, keyboard

events, and pointer events.

In React, however, you don’t interact directly with

these native events. Instead, React gives you a

synthetic event. A synthetic event is a lightweight

wrapper around the native event object. It works

similarly to the native event but with a few important

enhancements.

Why Does React Use Synthetic Events?

React’s synthetic events are designed to improve the

consistency and efficiency of event handling across

different browsers. Here’s why React uses them:

1. Cross-browser Compatibility: Different

browsers can sometimes handle events

differently, which can lead to inconsistent

behavior. React’s synthetic events fix these

inconsistencies, making sure that your event

handling code works the same no matter

which browser your users are on.

2. Improved Performance: React uses a single

event listener on the root element of your

app (event delegation). This allows React to

efficiently manage events without needing to

attach individual event listeners to every

element.

3. Unified API: Synthetic events have the same

interface as native events. This means you

can still use methods like preventDefault() and

stopPropagation() just like you would with native

 events, but with added benefits like

consistency and control.

Key Features of Synthetic Events

● Same Interface as Native Events: Even

though synthetic events are not the same as

native DOM events, they mimic their

interface. You can call familiar methods like:

● stopPropagation(): Stops the event from

bubbling up through the DOM tree.

● preventDefault(): Prevents the default action

(e.g., stopping a form from submitting).

● Fixing Browser Inconsistencies: Different

browsers sometimes handle certain events in

different ways. React’s synthetic events solve

these issues, so you don’t need to worry about

browser differences.
 ● Bubbling by Default: In React, even events

that normally don’t bubble in vanilla

JavaScript (like focus, blur, and change events)

will bubble. This is another way React

ensures more predictable behavior. The one

exception to this is the scroll event, which

does not bubble in React.

How Synthetic Events Work Behind the Scenes

When you declare an event handler in React (like

onClick), React automatically provides access to the

synthetic event. Behind the scenes, React handles

events at the root level of your app and uses event

delegation to manage all event listeners efficiently.

This means that instead of attaching separate event

handlers to every single button, input, or element,

React attaches one handler to the root element and

uses synthetic events to handle them all in a

centralized way.

Conclusion

React’s synthetic events make event handling more

efficient, consistent, and easier to manage. By

wrapping the native DOM events, React ensures that

your app behaves the same across all browsers while

improving performance by delegating events at the

root level.

Key Differences Between Event Handlers in

React and Vanilla JavaScript :

When you’re working with event handlers in React,

things look a bit different compared to plain vanilla

JavaScript. We’ll explore some of the most important

differences so you can work with events in React

confidently and efficiently.

1. CamelCase Naming for Event Handlers

In React, event handler names follow the camelCase

naming convention. This means when you want to

listen to a click event, you’ll use onClick (with a capital

"C"). Here’s how it looks in React:

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

In contrast, in vanilla JavaScript or HTML, event

names are usually written in lowercase or without

the “on” prefix. For example:

HTML:

<button onclick="handleClick()">Click Me</button>

Vanilla JavaScript with addEventListener:

button.addEventListener('click', handleClick);

2. Preventing Default Behavior

In JavaScript, when you want to stop the browser’s

default action (like preventing a form submission or

stopping a link from navigating), you might simply

return false from the event handler function. But this

doesn’t work in React.

Instead, in React, you must call **preventDefault()** on

the synthetic event object. Here’s an example of

preventing a form from being submitted:

function handleSubmit(event) {

event.preventDefault();

// handle form submission logic

<form onSubmit={handleSubmit}>

<button type="submit">Submit</button>

</form>
In this example, preventDefault() is used to stop the

default form submission behavior (which would

normally reload the page).

3. Capturing Phase with onClickCapture

Events in JavaScript generally have two phases: the

capturing phase and the bubbling phase.

Normally, React events are handled in the bubbling

phase, which means the event works its way up from

the element that triggered it to the root.

However, if you need to handle an event in the

capturing phase, React allows you to do that by

adding Capture to the event name. For example,

instead of onClick, you would use onClickCapture:

<button onClickCapture={handleCaptureClick}>Capture
Click</button>
Keep in mind, though, that handling events in the

capturing phase is rare. Most of the time, you’ll be

working with the bubbling phase, so this is something

to remember only when needed.

Wrapping Up

These are the core differences you need to know

when working with event handlers in React versus

vanilla JavaScript:

1. CamelCase for React event names (onClick vs.

onclick).

2. Use preventDefault() instead of returning

false to stop default behavior.

3. Rarely, you can handle events in the

capturing phase by using onClickCapture (or

similar).
Once you understand these basics, you’ll be all set to

handle events in React effectively! Everything else in

React’s event system works behind the scenes, so you

don’t need to worry about it. I hope this guide helps

you feel more confident when working with events in

your React applications!

If you found this article valuable, please give it a

thumbs up! 👍 Your support inspires me to create more

insightful content.

✨ Follow me on Medium to keep up with my latest

posts and coding tips. Let’s explore the world of

programming together!

🌟 Stay connected:
 ● 🚀 GitHub: Check out my projects and

contributions.

● 💼 LinkedIn: Let’s network and chat about

tech trends and opportunities!

Thank you for reading, and happy coding! 🚀

React

Reactjs