Reactivity Systems in Vue and React, What they are and How they work
Submitted by Nishant Arora (@nshntarora) on Thursday, 23 August 2018
How do Vue and React know which component to update when another one changes? DOM Manipulation is expensive, how do they make sure they’re doing it in the most performant way possible.
We’ll talk about Changes, Dependency Tracking, Virtual DOM, Diffing, and two fundamentally different ways React and Vue make sure they re-render the right element with the right state. Sounds interesting?
We’ll first start with the what and why of Reactivity, then move on to common ways frameworks have approached it in the past. Then we’ll deep dive into the reactivity systems of Vue and React, how they work, how are they different, how are they similar, which one is better (if one of them is), also do some really simple implementations of the two systems.
Hi! I’m Nishant, currently a Frontend Engineer at SocialCops (we are also the organisers of Vue Delhi Meetups), where I’ve worked on building interfaces in use by instituitions of the largest democracy in the world. I mostly write Vue here. I’m also the creator and maintainer of Matterwiki (https://github.com/matterwiki/matterwiki), an internal wiki for small teams. I write React here.