Deep-dive into Reactivity - Part 1

Welcome to the easy world. In this world, we just have to update a variable, and the framework does the heavy lifting of:

• Tracking all the places this variable was used
• Re-computing the dependent functions
• Updating the dependent DOM element, in the most efficient way possible.

Let's take a simple example. Go ahead and click that button.

On click of the button

• React has to update the variable name to Batman.
• As name was used in the DOM, it has to iterate over the DOM and update the exact h1 tag (without an id to getElementById on).
• Also as name was part of useEffect's dependency array, it will trigger the callback function, and update the DOM element with the clicked timestamp.

No big deal, right?

Let's try and implement this in Vanilla JS from scratch to see why this is a big deal.

Pheew 😪. You saw all the extraHardWork() we had to do to get it working?

As a developer our core job should be to develop the app. The more work we delegate to the framework, the better we can do our job.

In this case, the time we spend tracking

• which DOM elements to update
• in which order should it be executed
• assigning id to each dynamic DOM element, and updating it.

is the time spent not doing our core job.

As the size of the applications scales, this leads to increasing number of bugs. Feeling grateful yet? 😇

In Part 2 we get into how various frameworks like React, Vue and Svelte implement Reactivity, and what kind of crazy optimizations they do to keep it performant.