Understanding Reactivity from a Frontend Development Perspective

Reactive programming is one of the most important concepts in software development. In recent years, all major frontend frameworks have incorporated reactive design. For example, Vue's ref, React's useState and useEffect, and other frameworks' Signals are all implementations of reactivity. Through this article, we explore this concept so that readers can better understand different reactive design approaches.

Before diving deeper, let's clarify the terminology. In Chinese translations, reactivity is often translated as "响应式". We will use this term to distinguish it from "responsive design", which is a different concept related to UI adaptation.

What is Reactivity?

Before discussing what reactivity is concretely, let's look at the following code. Suppose you're in a JavaScript interview and the interviewer asks what the following console.log will output. What would your answer be?

let celsius = 20;
let fahrenheit = (celsius * 9) / 5 + 32;

console.log(`Fahrenheit is: ${fahrenheit}`);

celsius = 30;

console.log(`Fahrenheit is: ${fahrenheit}`);

The output of the console.log above would be:

Fahrenheit is: 68;
Fahrenheit is: 68;

Now the problem emerges. We clearly updated celsius to 30, so why does the second console.log still print 68 for fahrenheit? Shouldn't it be 86?

This is because what the line let fahrenheit = (celsius * 9) / 5 + 32 does is assign the calculated value of 68 to fahrenheit. So it's more accurate to understand it like this. The following version should help clarify why fahrenheit doesn't update when celsius changes:

let celsius = 20;
let fahrenheit = 68; // For JavaScript, this directly assigns the result of (celsius * 9) / 5 + 32

console.log(`Fahrenheit is: ${fahrenheit}`);

celsius = 30;

console.log(`Fahrenheit is: ${fahrenheit}`);

From this, we can see that because there's no persistent connection or "dependency relationship" between fahrenheit and celsius, when the line celsius = 30; executes, celsius updates, but fahrenheit doesn't become aware of this change. Therefore, it won't automatically re-execute the original calculation formula, and fahrenheit remains 68.

However, this is clearly not ideal. The ideal scenario would be that when celsius changes, we don't need to manually reassign fahrenheit. Instead, fahrenheit would automatically update based on the latest celsius value. When we can achieve this, we can say the program is reactive.

Specifically, here's the definition of reactivity (taken from the documentation of Solid.js, a popular JavaScript framework in the community, which we believe provides the most concise and accurate definition):

This programming paradigm refers to a system's ability to respond to changes in data or state automatically, ensuring applications stay up-to-date with their underlying data.

The definition above might still seem a bit abstract. Let's use Excel (or Google Sheets), which most people are familiar with, to illustrate. If you've used Excel, you probably recognize the concept in the screenshot below: when you set A3 to equal A1 + A2, whenever A1 or A2 changes, A3 automatically updates. This embodies reactivity in programming. We can keep A3 synchronized without any extra operations.

Why Does Frontend Development Need Reactivity?

After understanding what reactivity is, let's discuss from a frontend development perspective why reactivity is important.

Using the Excel example mentioned above, the behavior of "when the original value changes, all fields based on that original value also change" is essentially a requirement in frontend development. In frontend development, there are many cases where a value depends on a data source. When the data source changes, the value must update synchronously to ensure the UI displays correct content.

Specifically, synchronization refers to keeping the data source and DOM in sync. Without explicit reactive handling, updating the DOM would require writing selectors like document.querySelector, finding the DOM element to update, and then changing its content.

However, with modern frameworks handling reactivity for us, developers don't need to worry about these tedious and repetitive operations. We can simply declare what value we want, and the UI will automatically display it. This is also the declarative programming paradigm discussed in the article on writing code declaratively.

In React, in the example below, when the button's onClick calls setCelsius(30), and celsius updates, React's reactive system ensures that fahrenheit, which depends on celsius, automatically updates without any manual intervention.

import { useState, useMemo, useCallback } from "react";

function TemperatureConverter() {
  const [celsius, setCelsius] = useState(20);
  const fahrenheit = useMemo(() => (celsius * 9) / 5 + 32, [celsius]);
  const updateTemperature = useCallback(() => setCelsius(30), []);

  return (
    <div>
      <p>Fahrenheit is: {fahrenheit}</p>
      <button onClick={updateTemperature}>Set Celsius to 30</button>
    </div>
  );
}

Similarly, in Vue, when you bind a function to update the temperature in @click, clicking it updates celsius.value to 30. Because of Vue's reactivity mechanism, fahrenheit automatically updates without manual intervention.

<script setup>
import { ref, computed } from 'vue'

const celsius = ref(20)

const fahrenheit = computed(() => {
  return (celsius.value * 9) / 5 + 32
})

function updateTemperature() {
  celsius.value = 30
}
</script>

<template>
   <div>
     <p>Fahrenheit is: {{ fahrenheit }} </p>
     <button @click="updateTemperature"> Set Celsius to 30</button>
   </div>
</template>

Both examples demonstrate that with a reactive mechanism, when we change a base value, all values depending on it automatically update. This allows us to keep data and UI in sync without tedious DOM manipulation.