Reactive Controls

Free functions that shape how reactivity tracks and propagates inside a reaction. Import them from @semantic-ui/reactivity.

Tracking

nonreactive

nonreactive(func);

Runs func with dependency tracking suspended. Signals read inside it do not subscribe the surrounding reaction. The previous reactive context is restored afterward, even if func throws.

Parameters

Returns

The return value of func.

Usage

import { signal, reaction, nonreactive } from '@semantic-ui/reactivity';

const user = signal({ name: 'Alice', lastLogin: Date.now() });

reaction(() => {
  const { name } = user.get();
  // read lastLogin without subscribing to it
  const lastLogin = nonreactive(() => user.get().lastLogin);
  console.log(name, lastLogin);
});

Example

guard

guard(compute, equalCheck);

Gates downstream reactivity. Re-runs compute reactively but propagates to the surrounding reaction only when its return value changes by equalCheck. Use it to collapse noisy upstream changes into a single meaningful one, for example deriving an even/odd flag from a counter so the reaction re-runs on parity changes, not every increment.

Called outside a reaction, guard has nothing to gate and returns compute() directly.

Parameters

Returns

The current guarded value.

Usage

import { signal, reaction, guard } from '@semantic-ui/reactivity';

const count = signal(0);

reaction(() => {
  // re-runs only when parity flips, not on every increment
  const isEven = guard(() => count.get() % 2 === 0);
  console.log(isEven ? 'even' : 'odd');
});

count.set(2); // no re-run, still even
count.set(3); // re-runs, now odd

Example

Inspecting

currentReaction

currentReaction();

Returns the reaction currently executing, or null when no reaction is running. Useful for conditionally subscribing or for debugging which computation a read belongs to.

Returns

The running Reaction, or null.

Usage

import { signal, reaction, currentReaction } from '@semantic-ui/reactivity';

const value = signal(0);

reaction(() => {
  if (currentReaction()) {
    value.depend();
  }
});