Reactivity

This guide focuses primarily on reactivity in the context of components.

Signals Semantic UI uses a signals based approach for reactivity. This works by tracking references to signals and then running a flush which triggers those reactions after their values change. For more information see our dedicated section on reactivity.

Sources of Reactivity

Reactive Data

Reactivity occurs when a reactive value is modified inside of a reactive context. If you want a value to render reactively, you must have both a reactive value and a reactive context.

Reactive Data Sources

State
Settings
Signal

Reactive Data Contexts

Template Conditionals
Template Loops
Template Expressions
Reaction created inside your component

Non-Reactive Data

If you want to use or set a variable without triggering reactivity either a value or context must be non-reactive.

Non-Reactive Data Sources

DOM Elements or Properties
Properties set on your component
$ or $$ DOM Query Collections

Non-Reactive Data Contexts

Component Methods
Lifecycle Callbacks
Event & Keyboard Handlers

Avoiding Reactivity You can access reactive values with peek to avoid reactivity, and use Reaction.nonreactive to control the reactivity of a function.For more information see controlling reactivity.

Component Reactivity

State Reactivity

Your component’s state is the internal store of reactivity for your component. When your component is initialized each state property will become a signal and will trigger reactivity inside a Reaction.

const defaultState = {
  counter: 0;
}

const onCreated = ({state, reaction}) {
  reaction(() => {
    // counter will not update when the value changes below
    console.log(`Count: ${state.counter.get()}`);
  });
  // update value
  state.counter.increment();
}

State will also trigger reactivity in your template.

Counter is: {counter}

Settings Reactivity

Settings are not reactive inside a reaction because they are not instances of signal.

const defaultSettings = {
  counter: 0;
}

const onCreated = ({settings, reaction}) {
  reaction(() => {
    // counter will not update when the value changes below
    console.log(`Count: ${settings.counter}`);
  });
  // update value
  settings.counter++;
}

However settings are reactive inside templates, and will trigger updates when their underlying value changes.

Counter is: {counter}

Template Reactivity

Reactive variables can be accessed from inside a template without calling its get or value helper.

<ul>
  {#each item in items}
    <li>{item}</li>
  {/each}
</ul>

Expressions, loops, and conditionals are reactive contexts by default. If items in this example grows the results will update automatically.

<ul>
  {#if hasAny items}
    Has items
  {else}
    No items
  {/if}
</ul>

Advanced Use

All lifecycle events and callbacks will return signal and reaction. These can be used to create scoped reactions that will be tied to the component’s lifecycle, and automatically torn down when the component is destroyed.

Exposing Reactivity

You can expose a signal on your component instance to allow other components to rely on it as a source of reactivity. This can be a useful way to share reactivity across related parts of your app.

Component state and settings are not accessible outside your component unless they are exposed on your component instance.

const createComponent = ({ self, signal, reaction }) => {
  return {
    todos: signal([]),
  };
};

const createComponent = ({ findParent }) => {
  getTodos() {
    const todoList = findParent('todoList');
    return todoList.todos.get();
  }
};

Reducing Reactivity

Template expressions are reactive by default but this might not always be ideal. Template reactivity can be removed by using the nonreactive helper

Learn more about controlling reactivity in the dedicated subsection for controlling reactivity

<ul>
  {#each item in nonreactive items}
    {item}
  {/each}
</ul>

On This Page