React: What are React Signals and why are they needed?

React Signals are reactive primitives for state management that update components pointwise, without full re-rendering.

Why it matters: React's default re-rendering model is coarse-grained — when state changes, the entire component (and potentially its children) re-renders. In large components or lists, this causes performance issues even when only a small piece of data changed. Signals solve this by tracking dependencies at a granular level and updating only the exact DOM nodes that depend on the changed value.

React problem: When state changes, the entire component re-renders. Even if only one element in a large list changed. Signals solution: Automatically track dependencies and update ONLY the necessary parts of DOM.

How Signals work:

1. A signal is a reactive container around a value.
2. When you read signal.value inside a component, React tracks that this component depends on this signal.
3. When signal.value changes, only the components that read it are re-rendered.
4. Computed signals derive values from other signals and cache them.
5. Effects run whenever their dependency signals change.

Example (Preact Signals):

1import { signal, computed, effect } from "@preact/signals";
2
3const count = signal(0);  // Reactive variable
4const doubled = computed(() => count.value * 2);  // Computed
5
6// Automatically executes when count changes
7effect(() => console.log("Count:", count.value));
8
9// In component — only this component re-renders
10function Counter() {
11  return <button onClick={() => count.value++}>{count}</button>;
12}

Comparison with useState:

• useState: changed → component re-rendered.
• Signals: changed → only components that read this value are updated.

Performance considerations:

• Signals avoid the overhead of calling component functions entirely for unaffected components.
• They are especially beneficial for high-frequency updates (animations, real-time data).
• The tradeoff is a different mental model — signals are not part of React's core API.

Common pitfalls:

• Mixing signals with React state causes confusion about which updates which.
• Not all React libraries are compatible with signals.
• Signals are an alternative to React, not an extension — use them intentionally.

Libraries: @preact/signals-react, @tui-core/signals, Legend State.