Synapsev5.0.6

State Manager

Creating Storages

Working with Data

Patterns

Recipes

Business Logic Layer

createSynapse

React

Utilities

Recipes

API

API Client

API Hooks (React)

Network / fetch

Working example on GitHubHookLocalStorageExample.tsx

useCreateStorage (localStorage)

The same useCreateStorage, only with type: 'localStorage' — data survives a page reload. The only difference from the memory variant is the type field.

The same end-to-end todo domain (TodoState, initialTodoState — see MemoryStorage).

Usage

typescript
import { useCreateStorage, useStorageSubscribe } from 'synapse-storage/react'

function TodoApp() {
  const { storage, isReady } = useCreateStorage<TodoState>({
    type: 'localStorage',         // <- the only difference from memory
    name: 'todo-hook-local',
    initialState: initialTodoState,
  })

  if (!isReady) return <div>Loading…</div>

  // Reading and writing — same as with memory
  const todos = useStorageSubscribe(storage, (s) => s.todos)
  storage.set('filter', 'completed')
}

When to use

  • A component/screen state should survive a reload (draft, selected filter, settings), but you don't want to set up a global module-level store.

When not to use

  • The state is ephemeral → memory variant.

  • Large data → IndexedDB variant.

More on subscriptions and operations — the "Working with data" section.