Reactive Performance

Complex reactive patterns can sometimes cause performance overhead from spurious updates. Semantic UI provides several utilities to control dependency tracking and prevent unnecessary reactivity.

Reaction Performance

Guard

guard() creates a nested reaction that only triggers updates in the outer reaction if its returned value changes.

This prevents downstream updates if an intermediate calculation result remains the same despite underlying Signal changes.

When To Use Use guard when you want a dependency to only trigger reactivity under certain conditions.

Nonreactive

nonreactive() allows you access reactive values without creating reactive dependencies inside the specified closure.

When To Use Use nonreactive when you want to prevent portions of a Reaction from being reactive.

const nameSignal = signal('Alice');
const statusSignal = signal('Online'); // Changes to this won't trigger the reaction

reaction(() => {
  const name = nameSignal.get(); // Dependency created
  const status = nonreactive(() => statusSignal.get()); // No dependency created
  console.log(`User ${name} is currently ${status}`);
});

nameSignal.set('Bob'); // Triggers reaction
statusSignal.set('Offline'); // Does NOT trigger reaction

Signal Performance

Peek

peek() accesses a signal’s current value without creating a reactive dependency in the current context. This is similar to nonreactive but scoped to a single retrieved value.

When To Use Use peek() when you want to access a reactive value without reactivity.

const counter = signal(0);
const trigger = signal(false);

reaction(() => {
  trigger.get(); // Depends only on 'trigger'
  const currentCount = counter.peek(); // Read 'counter' non-reactively
  console.log('Reaction triggered! Count:', currentCount);
});

counter.set(1); // Does NOT trigger reaction
trigger.set(true); // DOES trigger reaction