Store utilities

snapshot

import { snapshot } from "solid-js/store"

function snapshot<T>(store: Store<T>): T

snapshot(store) produces a non-reactive plain value suitable for serialization or interop with libraries that expect plain objects/arrays. It replaces unwrap from Solid 1.x.

Usage

import { createStore, snapshot } from "solid-js/store"

const [store] = createStore({ user: { name: "Alice" } })

const plain = snapshot(store)
JSON.stringify(plain) // works — plain is non-reactive

Common patterns

Sending data to an API

const [formData] = createStore({ name: "", email: "" })

async function submit() {
  await fetch("/api/submit", {
    method: "POST",
    body: JSON.stringify(snapshot(formData)),
  })
}

Logging

import { createEffect } from "solid-js"
import { deep, snapshot } from "solid-js/store"

createEffect(
  () => deep(store),
  (value) => {
    console.log("Store changed:", snapshot(store))
  }
)

Optimistic store source

import { createOptimisticStore, snapshot } from "solid-js/store"

const [optimistic, setOptimistic] = createOptimisticStore(
  () => snapshot(sourceStore),
  initialValue
)

Migration

// 1.x
import { unwrap } from "solid-js/store"
const plain = unwrap(store)

// 2.0
import { snapshot } from "solid-js/store"
const plain = snapshot(store)

The returned value is a new object/array graph where necessary, while preserving references when nothing has changed. This is not the same as simply unwrapping proxies — it generates distinct objects suitable for serialization.

Report an issue with this page