Signals

Signals are the core primitive for reactive state in Semantic UI. They hold a value and automatically track dependencies, notifying dependent computations—Reactions—when their value changes.

Creating Signals

To create a signal import Signal from the @semantic-ui/reactivity package then initialize it with a value.

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

// Create signals for different data types
const counter = new Signal(0);
const userName = new Signal('Alice');
const isActive = new Signal(true);
const items = new Signal(['apple', 'banana']);
const userProfile = new Signal({ id: 1, name: 'Bob' });

Triggering Reactivity

A Signal’s value can be accessed using .get() or .value.

console.log(counter.get()); // Output: 0
console.log(userName.value); // Output: Alice

If this occurs within a reactive context (like a Reaction or a template expression) it will establish a reactive dependency and rerun the function whenever the value is updated.

reaction(() => {
  console.log(counter.get()); // outputs log whenever value changes
});

Controlling Reactivity There are many ways to control the reactivity of signals in your app. For instance to access a Signal’s value without creating a dependency use the .peek() method. See Reactive Performance and Reactive Controls for more information.

Updating Signal Values

Update a Signal’s value using the .set() method or by directly assigning to the .value property. This will notify any dependent Reactions to re-run.

// Using .set()
counter.set(1);
console.log(counter.get()); // Output: 1

// Using .value assignment
userName.value = 'Charlie';
console.log(userName.value); // Output: Charlie

Semantic UI also provides convenient mutation helpers directly on Signal instances for common update patterns, especially for arrays and objects.

// Using a mutation helper
counter.increment(); // Equivalent to counter.set(counter.peek() + 1)
console.log(counter.get()); // Output: 2

Creating Derived Signals

Signals can be transformed and combined to create new reactive values:

const items = new Signal(['apple', 'banana', 'cherry']);

// Transform a single signal with derive()
const itemCount = items.derive(arr => arr.length);

// Combine multiple signals with computed()
const shoppingList = Signal.computed(() =>
  `You have ${itemCount.get()} items: ${items.get().join(', ')}`
);

console.log(shoppingList.get()); // "You have 3 items: apple, banana, cherry"

Learn More For complete information about derived and computed signals, see the Dependent Signals guide.

Advanced Usage For more configuration options, such as customizing equality checks or value cloning behavior, see the Signal Options & Configuration guide.