How Events Work in React | Lecture 134 | React.JS 🔥

Summary

This lecture delves into how React handles events and their underlying mechanisms, starting with a primer on event propagation and delegation in the DOM to lay the groundwork for understanding React's approach. It explains the process of events bubbling through the DOM tree and introduces the concept of event delegation for efficient event handling across multiple elements. The discussion transitions to React's unique handling of events, highlighting the use of synthetic events to normalize browser inconsistencies and the practice of attaching event handlers to the root container for performance gains. The lecture concludes by contrasting event handling in React with vanilla JavaScript, emphasizing differences in syntax, event object handling, and phase capturing.

Takeaways

• 👣 Events in the browser follow a propagation pattern: capturing phase (top to target) and bubbling phase (target to top).
• 🎯 By default, event handlers listen to events during the bubbling phase, allowing parent elements to handle child events.
• 🧩 Event delegation allows handling events for multiple elements in one central place, improving performance and memory usage.
• 🃏 In React, event handlers are registered to the root DOM container, not individual elements, utilizing event delegation behind the scenes.
• ⚡ React creates a synthetic event object, a wrapper around the native DOM event, to fix browser inconsistencies and ensure consistent event behavior.
• 🔀 React bubbles focus, blur, and change events, which normally don't bubble, except for the scroll event.
• 🐫 React uses camelCase for event handler prop names (e.g., onClick), unlike vanilla JavaScript (onclick or click).
• 🚫 To prevent default browser behavior in React, use event.preventDefault(), as returning false from the handler doesn't work.
• 🔍 Attach 'Capture' to the event handler name (e.g., onClickCapture) to handle events in the capturing phase, though rarely used.
• 🧠 Understanding event propagation and React's event handling mechanisms helps diagnose and fix strange event-related behaviors in applications.

Q & A

What is event propagation in the context of the DOM?

Event propagation is the process by which an event travels through the DOM tree. It starts at the root of the document, goes down to the target element during the capturing phase, and then bubbles back up to the root during the bubbling phase.

How does event delegation work in the DOM and why is it useful?

Event delegation is a technique where event listeners are added to a parent element instead of individual child elements. It's useful for handling events on multiple elements in one central place, improving app performance and memory usage, especially with a large number of elements.

How does React handle events differently from vanilla JavaScript?

React handles events by registering all event handler functions to the root DOM container of the React app instead of directly on the target element. This approach allows React to perform event delegation automatically for all events in applications.

What is the significance of the capturing and bubbling phases in event propagation?

The capturing and bubbling phases are important for understanding how events travel through the DOM tree. The capturing phase is when the event travels down to the target element, and the bubbling phase is when it travels back up. This process allows for more flexible event handling strategies.

Why might you want to prevent an event from bubbling in a React application?

Preventing an event from bubbling can be necessary to stop the event from being handled by parent elements' event handlers when such behavior is not desired. It's done by calling the stopPropagation method on the event object, although it's rarely necessary.

What are synthetic events in React and why are they used?

Synthetic events in React are wrappers around the browser's native event objects. They provide a consistent interface across different browsers, fixing browser inconsistencies and including some additional functionalities. This makes event handling in React more reliable and consistent.

How does React's event handling improve app performance?

React's event handling improves app performance by using event delegation at the root DOM container. This means React only needs to register one event handler per event type, reducing the number of event listeners and simplifying event management across the application.

In React, how can you stop the default behavior triggered by an event?

In React, to stop the default behavior triggered by an event, you must call the preventDefault method on the synthetic event object. Returning false from an event handler function, as you might in vanilla JavaScript, does not work.

What is the difference between the way event handlers are named in React and in vanilla JavaScript?

In React, event handler props are named using camelCase, like onClick, while in HTML it would be all lowercase (onclick), and in vanilla JavaScript addEventListener method, the event is referred to simply by its type, like 'click', without the 'on' prefix.

How can you handle an event in the capturing phase instead of the bubbling phase in React?

In React, to handle an event in the capturing phase, you can attach 'Capture' to the event handler name, for example, using onClickCapture instead of just onClick. This allows you to catch events in the capturing phase rather than the default bubbling phase.

Outlines

00:00

🌐 Understanding Events in React

This section transitions from the topics of rendering and state management in React to focus on event handling, which is crucial yet less discussed. It begins with a refresher on how event propagation and delegation work in the traditional Document Object Model (DOM), illustrating the process of event capturing and bubbling. The narrative then moves to explain the significance of understanding these concepts for React developers, given that many might not be fully aware of how events operate in a browser context. The example of clicking a button within a DOM tree is used to elucidate how events originate, propagate, and can be managed through event handlers and the stopPropagation method, both in vanilla JavaScript and React.

05:01

🔍 React's Event Handling Mechanism

This part delves into the nuances of handling events in React applications, raising the question of why understanding traditional event delegation is necessary when React seems to abstract these details away. It explains React's approach to event handling, which involves attaching event handlers not to the individual elements but to the root DOM container of the React application. This section highlights how React internally employs event delegation for performance optimization by bundling multiple event handlers and attaching them to the root of the fiber tree. It emphasizes the automatic and invisible nature of this process, which enhances application performance without the developer's active intervention. The discussion underscores the distinction between the component tree and the DOM tree in React, advising developers to consider the latter when thinking about event propagation.

10:03

🛠 React's Synthetic Events and Differences from Vanilla JavaScript

The final segment introduces React's synthetic events, which are wrappers around native DOM event objects designed to normalize browser inconsistencies and extend functionalities. It outlines the characteristics of synthetic events, including their interface and methods like stopPropagation and preventDefault, and notes the exception of certain events that do not bubble in React, such as the scroll event. The narrative contrasts event handling in React with vanilla JavaScript, covering differences in naming conventions, the inability to use return false to prevent default actions in React, and the provision for handling events during the capturing phase. The summary encapsulates the practical knowledge necessary for working with events in React and reassures developers of the underlying complexities being managed by React behind the scenes.

Keywords

💡Event Propagation

Event propagation refers to the way events travel through the DOM tree from the root to the target element (capturing phase) and then back up to the root (bubbling phase). In the context of the video, it's crucial for understanding how React and browsers handle events. The script uses the example of clicking a button to illustrate how an event travels down to the target element and then bubbles back up, emphasizing the importance of this process in both native JavaScript and React event handling.

💡Event Delegation

Event delegation is a technique where a single event listener is attached to a parent element rather than individual child elements. It leverages the event bubbling phase to handle events on multiple elements. The video script discusses event delegation to explain how it can optimize performance and memory usage in applications, particularly in React, by handling events for many elements with a single handler in a common parent element.

💡DOM Tree

The DOM tree is a hierarchical representation of the document's structure, where each node is an object representing a part of the document. The video emphasizes understanding the DOM tree to grasp how events propagate and are delegated in web applications. It distinguishes between the DOM tree and React's component or fiber tree, highlighting that event propagation concerns the actual structure of the DOM.

💡Synthetic Events

Synthetic events in React are wrappers around the browser's native event system. They provide a consistent interface across different browsers, fixing browser-specific inconsistencies. The script discusses synthetic events to explain how React abstracts native event handling, providing developers with a unified and cross-browser compatible event system.

💡stopPropagation

The stopPropagation method is used to prevent an event from bubbling up the DOM tree. The video script mentions this method to explain how developers can control event propagation in both vanilla JavaScript and React, using it to stop an event from triggering handlers on parent elements.

💡preventDefault

preventDefault is a method used to stop the browser's default action that normally would occur in response to a specific event. The script highlights its importance in React event handling, noting that in React, developers must explicitly call preventDefault on the synthetic event object to prevent default behavior.

💡onClick

onClick is an event handler prop in React used to listen for click events on elements. The video uses this prop as an example to demonstrate how to attach event handlers to elements in React applications, contrasting it with the lowercase onclick attribute in vanilla HTML and the addEventListener method in JavaScript.

💡Root Container

The root container in a React application is the DOM element where the React app is rendered. The video explains that React registers event handlers at this root level, rather than on individual elements, utilizing event delegation internally to handle events efficiently and performantly across the app.

💡Fiber Tree

The fiber tree is an internal structure used by React for rendering and updating the DOM. The script mentions the fiber tree in the context of event handling to illustrate that React attaches event handlers at the root of the fiber tree during the render phase, showcasing an optimization technique that underlies React's event system.

💡onClickCapture

onClickCapture is a prop in React that attaches an event handler during the capturing phase, rather than the bubbling phase. The video script introduces this concept to explain advanced event handling in React, allowing developers to control the phase during which their event handler is executed.

Highlights

React handles events behind the scenes by delegating them to the root DOM container, rather than registering event handlers directly on the target elements.

Event propagation and event delegation in the DOM are essential concepts for understanding how React handles events.

During event propagation, events travel down the DOM tree (capturing phase), reach the target element, and then travel back up (bubbling phase).

By default, event handlers in React listen to events during the bubbling phase.

Event delegation allows handling events for multiple elements in one central place, improving performance and memory usage.

React physically registers one event handler function per event type at the root node of the fiber tree during the render phase.

React's synthetic events are wrappers around the DOM's native event objects, fixing browser inconsistencies and ensuring events work the same way across browsers.

Important synthetic event methods, like stopPropagation and preventDefault, have the same interface as native event objects.

In React, event handler props are named using camelCase (e.g., onClick), while in HTML and vanilla JavaScript, they are named differently (onclick, click).

To prevent the browser's default behavior in React, you must call preventDefault on the synthetic event object, rather than returning false from the event handler.

React provides the option to attach event handlers for the capturing phase by adding 'Capture' to the event handler name (e.g., onClickCapture).

Understanding event bubbling and delegation in React can help diagnose and fix strange behaviors related to events in applications.

React's event handling mechanism is designed to make applications more performant by leveraging event delegation and synthetic events.

The DOM tree, not the component tree, is crucial for understanding event bubbling in React applications.

Mastering event handling in React provides confidence and proficiency in working with events in applications.

Transcripts

‫Let's now leave the topics of rendering and state,

‫and turn towards another essential part

‫of React applications that we haven't

‫really talked about yet, and that's events.

‫So in this lecture, we will learn how React handles events,

‫and how they work behind the scenes,

‫but let's start with a quick refresher

‫on how event propagation and event delegation

‫work in the DOM,

‫because this is important to understand how React works,

‫and also, because I believe that many people

‫don't have a good grasp on how events

‫actually work in the browser.

‫So let's consider this tree of DOM elements,

‫and note that this really is a DOM tree,

‫so not a fiber tree or a React element tree.

‫And now, let's say that some event happens,

‫like a click on one of the three buttons,

‫and so here is what's gonna happen in the browser.

‫As soon as the event fires,

‫a new event object will be created,

‫but it will not be created where the click

‫actually happened.

‫Instead, the object will be created

‫at the root of the document,

‫so at the very top of the tree.

‫From there, the event will then travel down the entire tree

‫during the so-called capturing phase,

‫all the way, until it reaches the target element,

‫and the target element is simply the element

‫on which the event was actually first triggered.

‫So at the target, we can choose to handle the event

‫by placing an event handler function on that element,

‫which usually is exactly what we do.

‫Then immediately after the target element has been reached,

‫the event object travels all the way back up the entire tree

‫during the so-called bubbling phase.

‫Now, there are two very important things

‫to understand about this process.

‫The first is that during the capturing and bubbling phase,

‫the event really goes through every single child

‫and parent element one by one.

‫In fact, it's if the event originated

‫or happened in each of these DOM elements.

‫The second important thing is that by default,

‫event handlers listen to events

‫not only on the target element,

‫but also during the bubbling phase,

‫so if we put these two things together,

‫it means that every single event handler in a parent element

‫will also be executed during the bubbling phase

‫as long as it's also listening for the same type of event.

‫For example, if we edit another click event handler

‫to the header element,

‫then during this whole process,

‫both the handlers at the target and the header element

‫would be executed when the click happens.

‫Now, sometimes we actually don't want this behavior,

‫and so in that case, we can prevent the event

‫from bubbling up any further simply by calling

‫the stopPropagation method on the event object,

‫and this works in vanilla JavaScript, and also in React,

‫but it's actually very rarely necessary,

‫so only use this if there really is no other solution.

‫Okay, so this is essentially how events work in the browser.

‫Now, the fact that events bubble like this

‫allows developers to implement a very common

‫and very useful technique called event delegation.

‫So with event delegation, we can handle events

‫for multiple elements in one central place,

‫which is one of the parent elements.

‫So imagine that instead of three buttons,

‫there would be like, 1,000 buttons.

‫Now, if we wanted to handle events on all of them,

‫each button would have to have its own copy

‫of the event handler function,

‫which could become problematic

‫for the app's performance and memory usage.

‫So instead, by using event delegation,

‫we can simply add just one handler function

‫to the first parent element of these buttons.

‫Then when a click happens on one of the buttons,

‫the event will bubble up to the options div in this example

‫where we can then use the events target property

‫in order to check whether the event originated

‫from one of the buttons or not,

‫and if it did, we can then handle the event

‫in this central event handler function.

‫Now, if you took my JavaScript course,

‫then you will already know how to do this in practice,

‫because in fact, we do this all the time

‫in vanilla JavaScript applications.

‫However, in React apps, it's actually not so common

‫for us to use this technique,

‫but that might leave you wondering,

‫if this is actually not important in React,

‫then why are we even talking about this?

‫Well, for two reasons.

‫First, because sometimes you find some strange behaviors

‫related to events in your applications,

‫which might actually have to do with event bubbling,

‫and so as a good React developer,

‫you always want to understand exactly what's going on

‫in order to fix these problems,

‫and the second reason is that this is actually

‫what React does behind the scenes with our events,

‫and so let's take a look at that.

‫So let's consider this same DOM tree,

‫and let's say again that we want to attach

‫an event handler to one of the buttons,

‫or even to some other DOM element,

‫and this is what that would look like in React code.

‫So we would simply use the onClick prop

‫to listen for click events, and then pass it a function.

‫So that's really easy, right?

‫Now, if we think about how React

‫actually registers these event handlers behind the scenes,

‫we might believe that it would look something like this.

‫So React might select a button,

‫and then add the event handler to that element,

‫so that sounds pretty logical, right?

‫However, this is actually not what React does internally.

‫Instead, what React actually does is to register this

‫and all other event handler functions

‫to the root DOM container,

‫and that root container is simply the DOM element

‫in which the React app is displayed.

‫So if we use the default of Create React App,

‫that's usually the div element with an ID set to route.

‫So again, instead of selecting the button

‫where we actually placed our event handler,

‫we can imagine that React selects the route element,

‫and then adds all our event handlers to that element,

‫and I say imagine, because the way React

‫does all this behind the scenes is actually

‫a lot more complex than this,

‫but that's not really worth diving into here.

‫The only thing that's worth knowing

‫is that React physically registers

‫one event handler function per event type,

‫and it does so at the root note of the fiber tree

‫during the render phase.

‫So if we have multiple onClick handlers in our code,

‫React we'll actually somehow bundle them all together

‫and just add one big onClick handler

‫to the root node of the fiber tree,

‫and so this is yet another important function

‫of the fiber tree,

‫but anyway, what this means is that behind the scenes,

‫React actually performs event delegation

‫for all events in our applications.

‫So we can say that React delegates all events

‫to the root DOM container,

‫because that's where they will actually get handled,

‫not in the place where we thought we registered them,

‫and so this works exactly how we just learned

‫in the previous slide.

‫So again, whenever a click happens on the button,

‫a new event object is fired off,

‫which will then travel down the DOM tree

‫until it reaches the target element.

‫From there, the event will bubble back up.

‫Then as soon as the event reaches the root container

‫where React registered all our handlers,

‫the event will actually finally get handled

‫according to whatever handlers match the event

‫and the target element.

‫And finally, once that's all done,

‫the event, of course, continues bubbling up

‫until it disappears into nowhere,

‫and the beauty of this is that it all happens automatically

‫and invisibly just to make our React apps

‫yet a little bit more performant.

‫Now, just one small detail that I want you to notice

‫is that it's really the DOM tree that matters here,

‫not the component tree.

‫So just because one component is a child

‫of another component,

‫that doesn't mean that the same is true

‫in the displayed DOM tree.

‫So just keep that in mind when thinking

‫about bubbling in React applications.

‫All right, so we talked a lot about events

‫and event objects,

‫and so now, let's finish by taking a look

‫at how these event objects actually work behind the scenes.

‫So whenever we declare an event handler like this one,

‫React gives us access to the event object

‫that was created, just like in vanilla JavaScript.

‫However, in React, this event object is actually different.

‫So in vanilla JavaScript, we simply get access

‫to the native DOM event object, for example,

‫pointer event, mouse event, keyboard event, and many others.

‫React, on the other hand, will give us something

‫called a synthetic event,

‫which is basically a thin wrapper

‫around the DOM'S native event object,

‫and by wrapper we simply mean that synthetic events

‫are pretty similar to native event objects,

‫but they just add or change some functionalities

‫on top of them.

‫So these synthetic events have the same interface

‫as native event objects,

‫and that includes the important methods,

‫stopPropagation, and preventDefault.

‫What's special about synthetic events though,

‫and one of the reasons why the React team

‫decided to implement them is the fact

‫that they fix some browser inconsistencies,

‫making it so that events work in the exact same way

‫in all browsers.

‫The React team also decided that all

‫of the most important synthetic events actually bubble,

‫including the focus, blur, and change events,

‫which usually do not bubble.

‫The only exception here is the scroll event,

‫which does also not bubble in React.

‫Okay, and now to finish, I want to quickly mention

‫some differences between how event handlers work

‫in React and vanilla JavaScript.

‫The first one is that in React, the prop name

‫to attach an event handler are named using camelCase,

‫so something like onClick with an upper case C.

‫In HTML, on the other hand,

‫it would be onclick, all lower case,

‫and if we used an addEventListener in vanilla JavaScript,

‫the event would simply be called click,

‫so without the on prefix.

‫Now, in vanilla JavaScript,

‫whenever we want to stop the default behavior

‫of the browser in response to an event,

‫we can return faults from the event handler function,

‫and the big example of that is the browser

‫automatically reloading the page when we submit a form.

‫However, if we would attempt to return faults

‫in a React event handler, that would simply not work.

‫So in React, the only way to prevent the browser's default

‫behavior is to call preventDefault

‫on the synthetic event object.

‫And finally, in the rare event that you need

‫to handle an event in the capturing phase

‫rather than in the bubbling phase,

‫you can simply attach Capture to the event handler name,

‫for example, onClickCapture instead of just onClick,

‫but most likely, you will never use this,

‫so just keep this somewhere in the back of your mind.

‫All right, so what we just learned in this slide

‫is basically everything that you need to know in practice

‫in order to successfully work with events in React.

‫The rest all happens invisibly behind the scenes,

‫but I hope that you also found the rest

‫of the lecture interesting,

‫and that it gave you even more confidence

‫in working with events in your applications.