Signal Computed & Effects

Eliminate dependency arrays with automatic runtime tracking.

State Management6 min readConcept 22 of 22

Computed & Effects

computed() derives a value from one or more base signals. It caches its output and only re-evaluates when its dependencies change, similar to useMemo.

effect() executes side effects automatically whenever any signal read inside its body updates, similar to useEffect.

No More Dependency Arrays

React hooks require you to explicitly declare what dependencies you are tracking in a [deps] array. If you make a mistake, you introduce stale closures or infinite loops.

Signals track dependencies dynamically at runtime. If you read a .value anywhere inside a computed or effect closure, the signal registers it as a subscriber automatically!

Lazy Evaluation

Unlike standard React renders, computed() signals evaluate lazily. They won't actually run their calculation until something (like an effect or a component) subscribes to them.

This means you can declare hundreds of complex computed derivations globally, and pay zero performance cost until they are actively rendered.

Concept Visual: Runtime Tracking

Watch how the Signals engine scans the code at runtime to automatically discover dependencies, eliminating the fragile React [deps] array.

// Signals dynamically register dependencies // by intercepting the .value getter at runtime.
React (Manual Tracking)
const [count] = useState(1);
const [mult] = useState(10);
useEffect(() => {
console.log(count * mult);
}, [count, mult]);
⚠Miss a dependency? Stale closure bug.
Signals (Automatic Tracking)
const count = useSignal(1);
const mult = useSignal(10);
useSignalEffect(() => {
console.log(count.value * mult.value);
}); // No array needed!
Dependencies mapped at runtime.

Notice how the Signals block has no dependency array. The engine scans execution and automatically tracks what is read!

Check yourself

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

  1. 1Why doesn't `effect()` require a dependency array like `useEffect`?

Remember this

  • computed() derives and caches state lazily.
  • effect() runs side effects reactively.
  • Signals eliminate dependency arrays entirely.
  • Runtime dependency tracking prevents stale closures by default.

Done with this concept?

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