Reactivity with Signals

See the Reactivity API Reference for a full reference guide to the reactivity library.

Understanding Reactivity

Reactivity put simply is values changing causes stuff to happen.

Signals

Signals are a mechanism for implementing reactivity that works by tracking what functions reference a variable. These references are called dependencies and are used to track references to update when an underyling value is updated.

To ensure dependencies are properly tracked signals are accessed using a value (accessor) or a get() function.

Reactions

The function that re-runs when a signal is changed is called a Reaction. When a signal is referenced inside a reaction it will cause the reaction to rerun when the value changes.

Naming Conventions Signals implementations vary in their naming conventions a reactive context is called watcher in the signals proposal, a computation in Preact and watch in Lit.

Usage

Standalone

Semantic UI includes a package @semantic-ui/reactivity which exports Signal, Reaction, and Dependency and can be used as a standalone package without using Semantic UI components.

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

const counter = new Signal(1);

Reaction.create(() => {
  console.log(counter.value);
  // outputs 1 2
});
counter.increment();

Component

If you are using @semantic-ui/component, reactivity is built into templating and available directly from lifecycle callbacks.

You can use reaction and signal directly from all lifecycle callbacks. Reactions created this way will automatically be tied to the component lifecycle.

Learn more about reactivity in components in the dedicated component reactivity section.

const createComponent = ({ self, reaction, signal }) => ({
  value: signal(0),
  initialize() {
    // this will log whenever the value updates
    reaction(() => {
      console.log(self.value);
    });
  }
});

Example

Birthday Calendar

Imagine keeping a birthday calendar for your friends birthdays.

In a signal based reactivity system the current day could be thought of as a signal.

Each day you might wake up and notice that the day has updated. You can then run a reaction to check if any of your friends’ birthdays are today.

const today = new Signal( new Date() );

// each day when you wake up
const newDay() => {
  today.set(new Date());
}

const checkBirthdays = Reaction(() => {
  const today = today.get();
  each(friendsBirthdays, (birthday) => {
    if(today == birthday) {
      // wish them happy birthday
    }
    else {
      // no birthdays today
    }
  });
}