Preact Signals & Bypassing the VDOM

Achieve true fine-grained reactivity by updating the DOM without re-rendering components.

State Management7 min readConcept 21 of 22

What is a Signal?

A Signal is a reactive state container that holds a .value. When the value changes, the signal automatically notifies anything that is currently subscribing to it.

Unlike React useState, Signals are framework-agnostic objects that can live inside or outside of component bodies.

Bypassing the Virtual DOM

In standard React, calling a state setter forces the entire component function to re-execute, generating a new Virtual DOM tree that React must diff against the previous one.

Signals offer true fine-grained reactivity. When you pass a signal directly into JSX (e.g., <div>{countSignal}</div>), the library intercepts it and updates the text node in the actual DOM directly, completely bypassing the parent component's render function and the VDOM diffing process.

Reading .value vs Passing the Object

If you read countSignal.value inside your component body, you force the component to subscribe to the signal and it will re-render normally.

To bypass the re-render, you must pass the signal object reference *itself* into the JSX: {countSignal}. The package @preact/signals-react patches React's JSX runtime to handle this automatically.

Interactive Lab: The VDOM Bypass Proof

Click the button to increment the Signal. Watch closely: the text on the screen updates, but the component's render count stays permanently frozen at 1!

// 1. Initialize Signal (0) const count = useSignal(0); // 2. Track component renders const renders = useRef(0); renders.current++; // 3. Pass object reference to JSX (DO NOT read .value!) return ( <div> <h1>Signal Value: {count}</h1> <p>Component Renders: {renders.current}</p> </div> );
Signal Value
0
Component Renders:1
VDOM Bypassed

Click the button. The Signal's value updates in the DOM, but the component's internal render count remains permanently frozen at 1!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How do you ensure a React component DOES NOT re-render when a signal updates, but the text on screen still changes?

Remember this

  • A Signal wraps a reactive .value.
  • Updating a Signal's value does not inherently trigger a React component re-render.
  • Reading .value inside a component body subscribes the component to re-renders.
  • Passing the signal object {signal} directly into JSX bypasses the Virtual DOM entirely.

Done with this concept?

Mark it complete to track your progress. No login needed.