TanStack
Store v0v0
Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
Neon
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
Menu
Getting Started
API Reference
Store API Reference
Examples
Store API Reference

useCreateAtom

Function: useCreateAtom()

Call Signature

ts
function useCreateAtom<T>(getValue, options?): ReadonlyAtom<T>;
function useCreateAtom<T>(getValue, options?): ReadonlyAtom<T>;

Defined in: preact-store/src/useCreateAtom.ts:27

Creates a stable atom instance for the lifetime of the component.

Pass an initial value to create a writable atom, or a getter function to create a readonly derived atom. This mirrors createAtom, but only creates the atom once per component mount.

Type Parameters

T

T

Parameters

getValue

(prev?) => T

options?

AtomOptions<T>

Returns

ReadonlyAtom<T>

Example

tsx
function Counter() {
  const countAtom = useCreateAtom(0)
  const [count, setCount] = useAtom(countAtom)

  return (
    <button type="button" onClick={() => setCount((prev) => prev + 1)}>
      {count}
    </button>
  )
}
function Counter() {
  const countAtom = useCreateAtom(0)
  const [count, setCount] = useAtom(countAtom)

  return (
    <button type="button" onClick={() => setCount((prev) => prev + 1)}>
      {count}
    </button>
  )
}

Call Signature

ts
function useCreateAtom<T>(initialValue, options?): Atom<T>;
function useCreateAtom<T>(initialValue, options?): Atom<T>;

Defined in: preact-store/src/useCreateAtom.ts:31

Creates a stable atom instance for the lifetime of the component.

Pass an initial value to create a writable atom, or a getter function to create a readonly derived atom. This mirrors createAtom, but only creates the atom once per component mount.

Type Parameters

T

T

Parameters

initialValue

T

options?

AtomOptions<T>

Returns

Atom<T>

Example

tsx
function Counter() {
  const countAtom = useCreateAtom(0)
  const [count, setCount] = useAtom(countAtom)

  return (
    <button type="button" onClick={() => setCount((prev) => prev + 1)}>
      {count}
    </button>
  )
}
function Counter() {
  const countAtom = useCreateAtom(0)
  const [count, setCount] = useAtom(countAtom)

  return (
    <button type="button" onClick={() => setCount((prev) => prev + 1)}>
      {count}
    </button>
  )
}
Edit on GitHub
createStoreContext
useCreateStore
© 2026 TanStack LLC