Reactions & Subscriptions

A Reaction is a function that automatically re-runs whenever any Signal it depends on changes.

Reactions

A dependency is created when a Signal’s value is accessed (using .get() or .value) inside the function passed to Reaction.create().

Creating a Reaction

To create a new reaction pass a function to Reaction.create().

The reaction will immediately run to determine its dependencies, and then rerun in the next flush cycle when its dependencies change .

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

const counter = new Signal(0);

// Create a reaction that logs the counter's value
const reaction = Reaction.create(() => {
  // Accessing counter.get() creates a dependency
  console.log('counter:', counter.get());
});

// Update the signal, triggering the reaction
counter.set(1);

// alternatively
// counter.value = 1

Stopping a Reaction

You can use the .stop() method of a reaction to stop it from running.

// Stop the subscription created above
reaction.stop();

counter.set(2); // No output, reaction was stopped

Advanced Controls - For more ways to control reactivity and stop reactions see Reactive Controls.

Component Reactions

Reactions are the foundation for reactivity within component templates and can be created directly from component lifecycle events.

Components For more information on reactions inside components see Component Reactivity.

Reactivity Example

The following example shows the difference between a reactive variable (Signal) and a regular variable in a Reaction.

• person1 is a Signal and when its value is updated the function reruns.
• person2 is a regular javascript variable and does not cause the reaction to rerun when changed.

Subscriptions

As an alternative to Reactions, you can use a Signal’s .subscribe() method to execute a specific callback only when that particular Signal changes.

Unlike a Reaction, a subscription callback does not automatically track dependencies on other signals accessed within it. It simply runs in response to changes in the subscribed Signal.

Creating a Subscription

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

const name = new Signal('Alice');

const subscription = name.subscribe((newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});

name.set('Bob'); // Output: Name changed from Alice to Bob
name.set('Charlie'); // Output: Name changed from Bob to Charlie

Stopping a Subscription

The .subscribe() method returns a subscription object with a .stop() method, allowing you to manually unsubscribe and prevent the callback from running on future changes.

// Stop the subscription created above
subscription.stop();

// No output, subscription was stopped
name.set('David');

Subscriptions are useful for triggering side effects directly in response to a specific state change without the overhead or complexity of a full reactive context.