Under the hood of event listeners in React
Tags: javascript, react, tutorial
Published: 2021-06-12 19:46:58

Recently, during the migration to React 17, I had a problem between event listeners handled by React and one added on document manually. It was due to the part **Changes to Event Delegation** of the React 17 release note. 

At this moment I understood that I had a misconception of how React handles event listener. So I decided to explore the React code to understand how it works.

Spoiler alert: I will simplify a lot the process made by React to make the article easier to read and that you don't quit it before the end :D.

# The misconception

Before going deep in the React codebase, I would like to explain what was in my head about the management of event listeners.

For example when I write this simple code:

```javascript
function App() {
  return (
     <button onClick={() => console.log('Click on the button')}>
        Click me
     </button>
  );
}
```

In my head, React was doing under the hood, something like:

```javascript
// `buttonRef` an imaginary reference added by React on the button
buttonRef.addEventListener('click', onClick);
```

# How it really works

After reading the React 17 release note. I was like "What? React was attaching event handlers on `document` and now on `rootNode`".

Ps: All this article will be based on the version `v17.0.2` of React.

## Event handlers creation

### Handled events

React initializes at runtime multiple objects to know how to handle event listeners. For example there are:

- An array of all native events that are handled:

```javascript
const handledNativeEvents = ['click', 'change', 'dblclick', ...]
```

- An object that does a mapping between the native events and the event handlers properties:
```javascript
const reactEventHandlerPropByEventName = {
   'click': 'onClick',
   'dblclick': 'onDoubleClick',
   ...
}
```

> **Note: ** There are also a notion of priorities, but we will not talk about it in this article:
```javascript
const prioritiesByEventName = {
  'click': 0, // DiscreteEvent
  'drag': 1,  // UserBlockingEvent
  'load': 2,  // ContinuousEvent
  ...
};
```

### Root/Container node Fiber creation

Actually the event handlers registrations, are made during the creation of the root Fiber node.

Let's look at the entry point in your application, where React is initialized:
```javascript
import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);
```

The code behind the `ReactDOM.render` handles at the same time the creation an the update of the Fiber tree.

---

**_How does React know if it needs to create the Fiber tree?_**
Actually React store in the root DOM node, a key named `_reactRootContainer`. You can get it in your browser by typing:
```javascript
// In my example, my container id is `root`
document.getElementById('root')._reactRootContainer
```
![Get FiberRootNode from browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipxprakpycca5yfcch3t.png)

SO if there is a value the Fiber tree has been already created otherwise let's create it.

---

Finally during the creation, all the events that are handled by React are looped to create event listeners linked to the root DOM node:
```javascript
handledNativeEvents.forEach(eventName => {
      rootDomNode.addEventListener(eventName, myEventListener);
      rootDomNode.addEventListener(eventName, myEventListener, true);
  }
```

**_What are the added event listeners?_**
By going a little deeper in the code, we can see that the listeners call a same method named `dispatchEvent` (with different priorities) that will handle the event.

This is the method that we will talk about in the next part.



---

And now we can see in the browser that React added the listener to the root DOM node in developer console:
![Event listener added by react on root node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqr3z4s0mgs9btxsrfo8.png)

---



## Trigger of this event handlers

Now that we know how and where React add event listeners. The question we can ask to ourself is: "How the callback I put on the `onClick` property of my `button` is called".

### Some magic

We need to know some magic that React does on DOM nodes.

Actually React puts on DOM nodes a reference to the Fiber node under a dynamic key named [`internalInstanceKey`] and the props under the key [`internalPropsKey`].

---

> **Note: ** If you want to know values of `internalInstanceKey` and `internalPropsKey` (and that you don't have a smart console that helps you with autocomplete) you will have to add a debugger point on `react-dom` code to get it.

**_How to go into the `react-dom` code?_**
You will need to install the [`React Developer Tools`](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and then follow this little gif:
![Open react-dom code in dev console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj9dnututbxtd001o1a8.gif)

Then after refresh, we finally can get the wanted values:
![Get keys values for instance and props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85sb6yy7iu0hus3nsdk8.gif)

> **Warning:** If you refresh again the page, it will not be the same values!

### Process after click

With the following example, what does it happen when clicking on the button:
```javascript
function App() {
  return (
     <button onClick={() => console.log('Click on the button')}>
        Click me
     </button>
  );
}
```

We have seen previously that the listener added by React will call the method `dispatchEvent`.

From the event, we can have the `target` DOM node and thanks to the key `internalInstanceKey` we can have the Fiber node instance of this DOM node, in our case the button. 

> **Note:** The `target` will be the clicked element and the `currentTarget` the root DOM node element (on which the event listener is applied).

From the clicked Fiber node, we can go up in the Fiber tree until the root node. 
For each Fiber node, React watch if the component is a `HostComponent` (ie a htnml element) and if there is a prop corresponding to React event handler thanks to the object `reactEventHandlerPropByEventName`, in our case we search `onClick` prop. This listeners are stored in an array named `dispatchQueue`.


> **Note:** Basically it traverses the Fiber tree node, from the `target` node to the `root` node element.

**Here is a little gif to understand the process that gets listeners and fills the `dispatchQueue`:**
![Gif of the process to get listeners](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nzvmya0ehqjpfo0ezr0.gif)


Then this `dispatchQueue` will be processed by executing these listeners in order:
```javascript
function executeDispatchQueue(event) {
  for (const listener of dispatchQueue) {
    listener(syntheticBaseEvent);
  }
}
``` 

### Event sent by React

If you put a debugger point, in the `onClick` method of the button. You can see that the type of the event  is not a `MouseEvent` but a `SyntheticBaseEvent`

Indeed React wraps the native event, into a React event:
```javascript
const syntheticBaseEvent = {
  nativeEvent,
  target,
  currentTarget,
  type,
  _reactName,
  ...
}
```


**_Why are nativeEvent wrapped?_**
It helps reducing cross-browser inconsistencies.


# Conclusion

When you put an `onClick` on a `button`, **React** will not add an **click event listener** on the DOM element. **React**, at the first mount,
only adds **event listeners** (with capture mode too) on the **root node**.

Then when the user trigger the event, the event listener of the root node, is called.
Thanks to the **target** property of the event, React can get the Fiber node because it puts reference to Fiber nodes on
DOM elements into a dynamic key of the form `_reactFiber...`.

From that Fiber node, React goes up in the tree, to get all listener that match the React event name and put them in an
array (a **dispatch queue**). Then all the callbacks from that queue are executed.

If you want more information about it with links to React code, you can see [my gist](https://gist.github.com/romain-trotard/76313af8170809970daa7ff9d87b0dd5).


----

Want to see more ? Follow me on [Twitter](https://twitter.com/romain_trotard ) or go to my [Website](https://www.romaintrotard.com). :panda_face: