Framework Reactivity: Coarse vs. Fine-Grained Updates

Why it exists

All modern UI frameworks must solve one core problem: keeping the user interface synchronized with the application's state. When data changes, the screen must reflect it. Different frameworks evolved distinct strategies to manage this process efficiently, balancing developer experience with performance.

The mental model

Think of reactivity as a notification system. A coarse-grained system is like a building's fire alarm: it yells "something changed!" and everyone evacuates and re-assembles. This is like React re-rendering a component tree. A fine-grained system is like a pager: it sends a message directly to the specific people who need to act. This is like Vue updating only the exact DOM nodes that depend on a piece of state, skipping the rest of the component.

How it works

Frameworks use different tools to achieve these models. Coarse-grained (React) works by re-running the component function when state changes. It creates a new virtual DOM, compares ("diffs") it with the old one, and applies only the necessary changes to the real DOM. Fine-grained systems use more direct tracking. Vue 3 uses JavaScript Proxies to intercept state access; when you read a property, Vue records a dependency, and when you write to it, only its dependents are notified. Angular's Signals are explicit state containers that track their own subscribers, notifying them directly on change. Svelte acts as a compiler, analyzing your code at build time to generate optimized JavaScript that directly manipulates the DOM when state changes, a process made more explicit with Svelte 5's Runes.

When to use it

Coarse-grained reactivity, as in React, offers a simple mental model where the UI is always a function of state, supported by a massive ecosystem. The React Compiler now automates optimizations, mitigating historical performance concerns. Fine-grained reactivity, found in Vue, Angular Signals, and Svelte, is excellent for performance-critical applications. It offers surgical precision, ensuring the absolute minimum amount of code runs when state changes, which can lead to faster updates and less CPU usage.

When not to use it

The main risk is misunderstanding the model you're working with. Don't assume React's re-render model is inherently slow; its VDOM diffing is highly optimized. However, poor state management can cause performance bottlenecks. Conversely, don't assume fine-grained systems are a free lunch. Their dependency tracking mechanisms consume memory and CPU, and in systems like Vue, deeply nested reactive objects can introduce overhead.

One canonical example

A simple counter illustrates the difference. In React, calling setCount(1) triggers a re-render of the entire component function. In Vue, updating count.value (a Proxy-wrapped ref) only updates the specific DOM text node that displays it. In Angular, calling count.set(1) on a signal notifies only the specific components or computed values that read from it, bypassing the rest of the component tree.