When a form, its preview and its Save button need the same draft

The factory combines React Context, useSyncExternalStore and Immer: Context locates the nearest store, components subscribe to selected snapshots through useSyncExternalStore, and Immer handles nested draft updates along with the inverse patches used for optional rollback. The package documents React 18 and 19 support and ships ES modules with TypeScript declarations.

npm install @khanglvm/react

Set up a page-owned draft

This example keeps a job draft under one Provider, the same setup as the editor described above. The api calls stand in for the application's own save behavior.

import { createContextState } from "@khanglvm/react"

type JobDraftState = {
  step: "details" | "requirements" | "preview"
  draft: {
    title: string
    skills: string[]
  }
  saving: boolean
  error?: string
}

export const {
  Provider: JobDraftStateProvider,
  useContextStateValue: useJobDraftValue,
  useSetContextState: useSetJobDraftState,
  useStateSnapshotGetter: useJobDraftSnapshot,
} = createContextState<JobDraftState>("JobDraft")

export function JobDraftPage({ children }: { children: React.ReactNode }) {
  return (
    <JobDraftStateProvider
      initialState={{
        step: "details",
        draft: { title: "", skills: [] },
        saving: false,
      }}
    >
      {children}
    </JobDraftStateProvider>
  )
}

export function StepIndicator() {
  const step = useJobDraftValue((state) => state.step)
  return <span>{step}</span>
}

export function AddSkillButton({ skill }: { skill: string }) {
  const setState = useSetJobDraftState(false)

  return (
    <button
      onClick={() => {
        setState((draft) => {
          draft.draft.skills.push(skill)
        })
      }}
    >
      Add skill
    </button>
  )
}

export function SaveDraftButton() {
  const setState = useSetJobDraftState()
  const getSnapshot = useJobDraftSnapshot()

  async function saveDraft() {
    const revert = setState((draft) => {
      draft.saving = true
      draft.error = undefined
    })

    try {
      await api.saveDraft(getSnapshot((state) => state.draft))

      setState((draft) => {
        draft.saving = false
      })
    } catch {
      revert()

      setState((draft) => {
        draft.error = "Could not save the draft."
      })
    }
  }

  return <button onClick={saveDraft}>Save</button>
}

I rename the returned hooks after the state they belong to, so a consumer imports a job-draft hook instead of a generic state hook.

Choose the access a component needs

On a search page, for example, the filter bar can read filters while a toolbar reads the selection, and an export action can take a snapshot of the current filters when someone clicks it. A language value belongs higher, in app-shell state, so translated labels can change without resetting the page's form progress or closing its open drawers.

Selectors should derive their result from state alone, because time, randomness or network calls can change independently of the selected state and make the subscription unreliable. The implementation caches structurally equal selector results so their references can stay stable.

Read after an asynchronous wait

A snapshot getter is useful when validation finishes after the user has made another edit:

function SaveButton() {
  const getEditorSnapshot = useEditorSnapshot()

  async function save() {
    await api.validate()

    const latestDraft = getEditorSnapshot((state) => state.draft)
    await api.save(latestDraft)
  }

  return <button onClick={save}>Save</button>
}

That read does not subscribe to future changes, so a value the component renders still needs a selector hook. Event handlers, keyboard shortcuts and debounced saves can use the getter whenever they need the current value at the moment they act.

Roll back an optimistic update

The setter can retain the inverse patches needed to revert an update after a failed request:

async function archiveCandidate(id: string) {
  const revert = setCandidatesState((draft) => {
    const candidate = draft.itemsById[id]
    candidate.archived = true
  })

  try {
    await api.archiveCandidate(id)
  } catch {
    revert()
  }
}

For frequent builder edits, useSetBuilderState(false) keeps draft updates while skipping rollback patch generation. Several mutations can also flush together through a queued microtask, and a post-flush hook is useful when an editor needs to recompute expensive derived state once after that batch.

Keep lifetime and server rendering explicit

Each Provider creates its own store, so sharing a factory does not share state between Providers or between server requests. Server and client initial values still need to agree for hydration.

App-shell state can survive ordinary client-side route changes, while feature state survives only as long as its owning Provider stays mounted. URL-backed state can use a separate query-parameter store with the same subscription approach; it does not become URL-backed simply by entering this store.

The package also includes typed translations, browser events and helpers for props and children, and the state guide covers the API and its limits. Redux, Zustand and Jotai remain alternatives with different tools and state models; an existing team workflow may be a good reason to keep them.