solidjs-stores

SolidJS Stores

When to Use Stores vs Signals

Use Case	Primitive
Simple values (string, number, boolean)	createSignal
Objects/arrays where you update the whole value	createSignal
Nested objects/arrays with fine-grained updates	createStore
Complex state trees (app state, form state)	createStore

createStore

Creates a reactive store with fine-grained tracking on nested properties.

import { createStore } from "solid-js/store";

const [store, setStore] = createStore({
  user: { name: "John", age: 30 },
  todos: [
    { id: 1, text: "Learn Solid", done: false },
    { id: 2, text: "Build app", done: false },
  ],
});

How it works:

• Store values are wrapped in proxies
• Signals are created lazily — only when a property is accessed in a tracking scope
• Reading store.user.name in JSX creates a subscription to just that property
• Updating store.user.name only triggers updates for subscribers of that exact property

// Only the specific <span> updates, not the entire component
return (
  <div>
    <span>{store.user.name}</span>  {/* tracked */}
    <span>{store.user.age}</span>   {/* independently tracked */}
  </div>
);

Setter Patterns

Direct value (shallow merge for objects)

// Shallow merge at top level
setStore({ user: { name: "Jane", age: 25 } });

// Shallow merge — keeps unmentioned properties
setStore({ user: { name: "Jane" } }); // age is preserved

Function form

setStore(prev => ({ ...prev, newProp: "value" }));

Path Syntax

Navigate to nested properties with string keys:

// Set a nested property
setStore("user", "name", "Jane");

// Set deep nested property
setStore("user", "address", "city", "New York");

// Function form at any level
setStore("user", "age", prev => prev + 1);

Array operations with path syntax

// Update item at index
setStore("todos", 0, "done", true);

// Append to array
setStore("todos", store.todos.length, {
  id: 3, text: "Deploy", done: false,
});

// Update multiple indices
setStore("todos", [0, 2], "done", true);

// Range of indices
setStore("todos", { from: 0, to: 2 }, "done", false);

// Filter-based update
setStore("todos", todo => todo.done, "text", prev => `[DONE] ${prev}`);

// Dynamic update with function
setStore("todos", 0, "done", done => !done);

produce — Immer-Style Mutations

For complex updates, produce lets you mutate a draft object.

import { produce } from "solid-js/store";

setStore(
  produce((state) => {
    state.user.name = "Jane";
    state.todos.push({ id: 3, text: "Deploy", done: false });
    state.todos[0].done = true;
  })
);

Combine with path syntax:

setStore(
  "todos",
  0,
  produce((todo) => {
    todo.done = true;
    todo.text = `[DONE] ${todo.text}`;
  })
);

Limitations: produce only works with objects and arrays, not Sets or Maps.

When to use produce vs path syntax:

• Path syntax: targeted single-property updates, simple operations
• produce: multiple changes to the same subtree, array mutations (push, splice)

reconcile — Efficient Data Diffing

Diffs new data against existing store data, applying only the changes. Essential for API responses.

import { reconcile } from "solid-js/store";

// Replace store data with API response, only updating what changed
const newData = await fetchTodos();
setStore("todos", reconcile(newData));

Options

// key — property used to match items (default: "id")
setStore("todos", reconcile(newTodos, { key: "todoId" }));

// merge — push diffing to leaves instead of replacing objects
setStore("todos", reconcile(newTodos, { merge: true }));

Option	Default	Description
key	"id"	Property to match items across old/new data
merge	false	When false: referential check, replace if different. When true: deep diff to leaves.

Common pattern — resource + reconcile:

const [todos] = createResource(fetchTodos);

createEffect(() => {
  const data = todos();
  if (data) setStore("todos", reconcile(data));
});

unwrap — Extract Plain Objects

Converts a store proxy back to a plain JavaScript object. Useful for serialization or passing to non-Solid code.

import { unwrap } from "solid-js/store";

const rawData = unwrap(store);
console.log(JSON.stringify(rawData));

createMutable

Creates a mutable reactive proxy. State can be mutated directly.

import { createMutable } from "solid-js/store";

const state = createMutable({
  count: 0,
  user: { name: "John" },
});

// Direct mutation — reactive
state.count++;
state.user.name = "Jane";

When to use: Rarely. Primarily for interop with libraries that expect mutable objects (e.g., MobX-style patterns). Prefer createStore for most cases — the explicit setter makes state changes easier to track and debug.

Store Getters

Stores support JavaScript getters for derived values:

const [store, setStore] = createStore({
  firstName: "John",
  lastName: "Smith",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
});

// store.fullName reactively updates when firstName or lastName change

Nested Stores

You can create a store from a nested property of an existing store:

const [store, setStore] = createStore({
  users: [{ name: "John" }, { name: "Jane" }],
});

// Create a derived store for the nested array
const [users, setUsers] = createStore(store.users);

// Changes through setUsers update store.users
setUsers(users.length, { name: "Bob" });