Store Utilities


Edit this page

modifyMutable streamlines the process of making multiple changes to a mutable Store, as obtained through the use of [createMutable]/reference/store-utilities/create-mutable).

It operates within a single batch, ensuring that dependent computations are updated just once, rather than triggering updates for each individual change.

function modifyMutable<T>(mutable: T, modifier: (state: T) => T): void;

The function takes two arguments:

  1. The first argument is the mutable Store that needs modification.
  2. The second argument is a Store modifier, which could be one of those returned by reconcile.

For example, if the UI depends on multiple fields of a mutable:

import { createMutable } from "solid-js/store";
const state = createMutable({
user: {
firstName: "John",
lastName: "Smith",
<h1>Hello {state.user.firstName + " " + state.user.lastName}</h1>;

Modifying n fields in sequence will cause the UI to update n times:

state.user.firstName = "Jane";
state.user.lastName = "Doe";

To trigger just a single update, the fields can be modified using a batch:

import { batch } from "solid-js";
batch(() => {
state.user.firstName = "Jane";
state.user.lastName = "Doe";

modifyMutable combined with reconcile or produce provides two alternate ways to do similar things:

import { modifyMutable, reconcile } from "solid-js/store";
// Replace state.user with the specified object (deleting any other fields)
firstName: "Jane",
lastName: "Doe",
import { modifyMutable, produce } from "solid-js/store";
// Modify two fields in batch, triggering just one update
produce((state) => {
state.user.firstName = "Jane";
state.user.lastName = "Doe";
Report an issue with this page