Reaction API reference for Reaction in Semantic UI's reactivity system refresh-cw Guide

Reaction

Reaction is a core class in Semantic UI’s reactivity system that manages reactive computations. When you create a reaction, it will automatically re-run whenever any reactive dependencies (Signals) accessed within it change.

Methods

create

Creates a new reaction and runs it immediately.

Syntax

Reaction.create(callback)

Parameters

NameTypeDescription
callbackFunctionFunction to run reactively. Receives the reaction instance as its argument.

Returns

Reaction - The created reaction instance.

Usage

import { Signal, Reaction } from '@semantic-ui/reactivity';


const counter = new Signal(0);


const reaction = Reaction.create((reaction) => {
  console.log('Counter value:', counter.get());


  if (counter.get() > 5) {
    reaction.stop();
  }
});


counter.set(6); // Reaction stops after this update
counter.set(7); // No output, reaction was stopped

nonreactive

Executes a function without establishing any reactive dependencies.

Syntax

Reaction.nonreactive(callback)

Parameters

NameTypeDescription
callbackFunctionFunction to execute non-reactively

Returns

any - The return value of the callback function.

Usage

import { Signal, Reaction } from '@semantic-ui/reactivity';


const user = new Signal({ name: 'Alice', lastLogin: new Date() });


Reaction.create(() => {
  // This will re-run when name changes
  const name = user.get().name;


  // This won't create a dependency on lastLogin
  const lastLogin = Reaction.nonreactive(() => user.get().lastLogin);


  console.log(`${name}'s last login:`, lastLogin);
});

guard

Creates a reactive computation that only triggers its parent reaction when its return value changes.

Syntax

Reaction.guard(callback)

Parameters

NameTypeDescription
callbackFunctionFunction whose return value is monitored for changes

Returns

any - The current value returned by the callback.

Usage

import { Signal, Reaction } from '@semantic-ui/reactivity';


const count = new Signal(0);


Reaction.create(() => {
  // This will only trigger when the even/odd status changes
  const isEven = Reaction.guard(() => count.get() % 2 === 0);
  console.log(`Count is ${isEven ? 'even' : 'odd'}`);
});


count.set(2); // No output (still even)
count.set(3); // Outputs: "Count is odd"

Instance Methods

run

Executes the reaction’s computation.

Syntax

reaction.run()

Usage

const reaction = Reaction.create(() => {
  // computation
});


reaction.run(); // Manually trigger the reaction

stop

Stops the reaction from running again and cleans up its dependencies.

Syntax

reaction.stop()

Usage

const counter = new Signal(0);
const reaction = Reaction.create(() => {
  if (counter.get() > 3) {
    reaction.stop();
    console.log('Reaction stopped');
  }
});

invalidate

Marks the reaction as invalid, scheduling it to run on the next flush cycle.

Syntax

reaction.invalidate(context?)

Parameters

NameTypeDescription
contextany(Optional) Additional context for the invalidation

Usage

const reaction = Reaction.create(() => {
  // computation
});


reaction.invalidate(); // Schedule reaction to run again

Instance Properties

firstRun

Boolean indicating if this is the reaction’s first execution.

Usage

import { Signal, Reaction } from '@semantic-ui/reactivity';


const data = new Signal({ value: 0 });


Reaction.create((reaction) => {
  if (reaction.firstRun) {
    console.log('Initial setup');
  } else {
    console.log('Value updated:', data.get().value);
  }
});

active

Boolean indicating if the reaction is active (not stopped).

Usage

const reaction = Reaction.create((r) => {
  console.log('Reaction active:', r.active);
});

context

Contains information about what triggered the current reaction run.

Type

{
  value: any;
  trace?: string;
} | null

Properties

NameTypeDescription
valueanyThe value that triggered the reaction
tracestring?Optional stack trace showing where the change originated

Usage

const counter = new Signal(0);
Reaction.create((r) => {
  console.log('Counter:', counter.get());
  if (r.context) {
    console.log('Changed value:', r.context.value);
  }
});

dependencies

A Set containing all the dependencies being tracked by this reaction.

Type

Set<Dependency>

Usage

const counter = new Signal(0);
Reaction.create((r) => {
  counter.get();
  console.log('Number of dependencies:', r.dependencies.size);
});

Scheduling Methods

Reaction proxies several useful methods from Scheduler so you can call them directly without having to import the Scheduler class.

flush

Immediately executes all pending reactions.

Syntax

Reaction.flush()

Usage

import { Signal, Reaction } from '@semantic-ui/reactivity';


const number = new Signal(0);
Reaction.create(() => {
  console.log(number.get());
});


// Without flush, only final value would be logged
[1, 2, 3].forEach(value => {
  number.set(value);
  Reaction.flush(); // Forces immediate update
});
// Logs: 1, 2, 3

scheduleFlush

Schedules a flush of all pending reactions for the next microtask.

Syntax

Reaction.scheduleFlush()

Usage

import { Signal, Reaction } from '@semantic-ui/reactivity';


const value = new Signal(0);
Reaction.create(() => {
  console.log(value.get());
});


value.set(1);
Reaction.scheduleFlush(); // Schedule update for next microtask

afterFlush

Registers a callback to execute after the next flush completes.

Syntax

Reaction.afterFlush(callback)

Parameters

NameTypeDescription
callbackFunctionFunction to execute after flush completes

Usage

import { Signal, Reaction } from '@semantic-ui/reactivity';


const data = new Signal({ processed: false });


Reaction.create(() => {
  // Process data
  const current = data.get();
});


data.set({ processed: true });
Reaction.afterFlush(() => {
  console.log('All reactions completed');
});

Debugging

getSource

Returns the stack trace of the currently running reaction.

Syntax

Reaction.getSource()

Returns

string | undefined - The stack trace of the current reaction, or undefined if no reaction is running.

Usage

Reaction.create(() => {
  console.log(Reaction.getSource());
});