Signal-Based State Management in React: Optimizing Propagation Beyond Zustand

Prologue: The Exhaustion of Unnecessary Re-renders

Back in college, when preparing end-of-term presentations for my history research group, I encountered a highly frustrating process. If I corrected a single outdated quote in one slide, I often had to manually audit and update the structures, indexes, and outlines of the entire slide deck just to maintain consistency.

When I first learned React and started building application state flows, that exact organizational inefficiency came to mind. It was driven by React's most powerful, yet often fatiguing mechanism: Component Re-rendering.

Global state tools like Zustand and Redux are brilliant. However, their core mental model revolves around re-running the entire component function whenever the subscribed state changes. For instance, if a tiny shopping cart counter (count) incremented in the top corner of a page, the parent header component—along with all its deep child trees—had to trigger Virtual DOM reconciliation, recalculating layout calculations unnecessarily.

"Can we bypass component-wide re-renders and directly target the exact HTML text node that changed in the DOM?" The modern web ecosystem has responded to this challenge with a powerful concept: Signals. I want to share my architectural journey of integrating this paradigm into React apps to unlock absolute rendering efficiency.

---

Concept: React's Top-Down Rendering vs. Signal's Fine-Grained Reactivity

The classic React rendering pipeline differs fundamentally from Signal-driven Fine-Grained Reactivity.

1. React's Top-Down Pull-Rendering

In standard React, a state mutation triggers a top-down traversal (pull) of the active component tree.

• State Update -> Component Function Execution -> New Virtual DOM Construction -> Reconciliation (Diffing against old Virtual DOM) -> Physical DOM Commit (Batch update of differences).
• While highly predictable, as state scopes scale, Virtual DOM diffing burdens the main CPU thread. To optimize this, developers must heavily write optimization guardrails like useMemo, useCallback, and React.memo.

2. Signal's Pinpoint Push-Rendering

Signals bypass standard Virtual DOM diffing. They surgically push value changes directly to the specific DOM references that consume them.

• Architecture: A Signal is not just a container for values. It implements a reactive subscription mechanism that monitors precisely which nodes read its values.
• Execution: When a specific text node in a component's JSX references signal.value, the Signal hooks into that reference. Upon modification, it updates the underlying browser text node directly, leaving the surrounding component structure untouched.
• Consequently, components execute only once during mount, and subsequent state propagation targets targeted DOM nodes with pinpoint precision.

---

Deep Dive: The Under-the-Hood Magic of Preact Signals in React

React does not expose a native Signal API yet. However, using the @preact/signals-react library, developers can seamlessly unlock this execution engine inside standard React code bases.

If the component function does not re-run, how does the screen update? The secret lies in a clever compiler translation.

1. Intercepting JSX Binding

When you bind a Signal directly within your JSX layout:

const count = signal(0);

function Counter() {
  return <div>{count}</div>; // Pass the raw Signal object, not the string/number value
}

The Preact Signals compilation plugin intercepts the React JSX output at compile-time. Detecting a raw Signal object passed as a child, it dynamically injects an invisible, ultra-lightweight wrapper component (Reactive Node) around that single node. When count.value updates, React ignores the outer Counter container entirely. Instead, it surgically re-renders only the microscopic dummy wrapper node sandwiched in the DOM.

2. Reaching Absolute Zero Re-renders

This architecture yields a remarkable visual when inspected using the React DevTools Profiler: as the state increments rapidly, the render count of the parent Counter component remains locked at exactly 1. Virtual DOM computation drops to absolute physical zero, resulting in dramatic performance gains.

---

Practical: Integrating Preact Signals in a React Application

Let's walk through building a global todo store using Signals to replace a classic Zustand store.

1. Package Installation and bundler Configuration

First, install the core library:

npm install @preact/signals-react

For Vite applications, configure the Babel plugin inside vite.config.ts to allow automatic JSX reactive analysis:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: {
        // Injects the compiler-level Signals reactivity analyzer
        plugins: [["@preact/signals-react/babel"]],
      },
    }),
  ],
});

2. Structuring the Global Signal Store

You can design global application stores with pure, elegant JavaScript objects, avoiding standard state management boilerplate:

// src/store/todoStore.ts
import { signal, computed } from "@preact/signals-react";

export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

// 1. Define reactive state values
export const todosSignal = signal<Todo[]>([
  { id: 1, text: "Refine historical paper drafts", completed: false },
  { id: 2, text: "Profile React 19 source codebase", completed: true },
]);

// 2. Define computed states (derived values recalculated automatically on dependency change)
export const completedCount = computed(() => {
  return todosSignal.value.filter(todo => todo.completed).length;
});

// 3. Expose state modifiers (pure actions)
export const addTodo = (text: string) => {
  todosSignal.value = [
    ...todosSignal.value,
    { id: Date.now(), text, completed: false }
  ];
};

export const toggleTodo = (id: number) => {
  todosSignal.value = todosSignal.value.map(todo =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  );
};

3. Binding to the Component Tree

Integrating the store inside components is exceptionally clean. There are no Hooks to initialize, no state selector selectors to wire, and no hook boundaries to manage. You simply import the Signal and render it directly:

// src/components/TodoStats.tsx
import React from "react";
import { completedCount, todosSignal } from "../store/todoStore";

export function TodoStats() {
  // This component will NEVER re-render when todo items are toggled or added!
  // The browser text elements update with pinpoint accuracy via direct DOM injection.
  return (
    <div className="p-4 rounded-xl bg-slate-800 text-white">
      <h3 className="text-lg font-bold">Todo Analytics</h3>
      <p>Total Tasks: {todosSignal.value.length}</p>
      <p>Completed Tasks: {completedCount}</p>
    </div>
  );
}

---

Epilogue: Evolving Beyond the Virtual DOM

Just as a researcher feels immense relief when abandoning the tedious task of updating manual slide indexes in favor of a dynamic document system, a modern frontend developer benefits heavily from adopting reactive pinpoint updates.

The Virtual DOM paradigm introduced by React revolutionized the web development industry for a decade. However, modern user experiences demand ultra-fluid, zero-overhead runtimes.

Understanding when to leverage the stability of classic subscribing models like Zustand, and when to unlock the micro-precision efficiency of Signals, is a vital architectural skill. Breaking free from the limits of heavy rendering trees to deliver high-speed web apps is the hallmark of modern frontend engineering.