Mutation Helpers

Helper Usage

A very common pattern when dealing with signals is to modify an existing signal value then update its underlying value triggering reactivity.

This can create a lot of boilerplate because you will need to access the value nonreactively (e.g. using .peek()) and then update the underlying value before finally setting the value again (e.g. using .set()).

const numbers = signal([1, 2, 3]); // Assuming signal is imported
const newNumbers = numbers.peek();
newNumbers.push(4);
numbers.set(newNumbers);

Helpers handle updating an underlying reactive value without having to retrieve and manipulate the value.

const numbers = signal([1, 2, 3]); // Assuming signal is imported
numbers.push(4); // Uses the push helper

Types of Helpers

Helpers are provided for various types of signal primitives that help with the most common ways they are used.

Array Helpers

Array helpers make it easy to update array values with push, unshift and non-standard helpers like removeIndex, setIndex and others.

Collection Helpers

Collection helpers make it easy to update specific values in an array of records by their ID. See methods like setItemProperty, replaceItem, and removeItem.

Boolean Helpers

Boolean helpers like toggle make it easier to toggle boolean values.

API Reference

For a full list of mutation helpers please check out the API reference guides.