Menu
Gate React UI on Persist hydration with useHydrated + toHydrationSignal. Use when avoiding flash of default state on async backends (IndexedDB), SSR snapshot true, or wiring HydrationSignal into React 18/19.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | react-persist |
| description | Gate React UI on Persist hydration with useHydrated + toHydrationSignal. Use when avoiding flash of default state on async backends (IndexedDB), SSR snapshot true, or wiring HydrationSignal into React 18/19. |
| license | MIT |
| metadata | {"type":"framework","library":"@stainless-code/persist","library_version":"0.4.1","framework":"react"} |
| requires | ["persist"] |
| sources | ["stainless-code/persist:src/adapters/frameworks/react.ts","stainless-code/persist:docs/architecture.md"] |
@stainless-code/persist/frameworks/react exports useHydrated(signal) — a thin useSyncExternalStore wrapper over HydrationSignal. It does not persist state; pair it with a ./sources/* adapter (persist-zustand, persist-tanstack-store, …).
hydrated: true (nothing to wait for server-side).null / undefined signal → treat as hydrated (no persistence configured).bun add @stainless-code/persist react
react ^18 || ^19 is the optional peer of /frameworks/react.
// store module
import { toHydrationSignal } from "@stainless-code/persist";
import { persistStore } from "@stainless-code/persist/sources/zustand";
const persist = persistStore(store, { name: "app:prefs:v1", storage });
export const prefsHydration = toHydrationSignal(persist);
// component
import { useHydrated } from "@stainless-code/persist/frameworks/react";
const { hydrated } = useHydrated(prefsHydration);
const prefs = useStore(store); // your selector — not from useHydrated
if (!hydrated) return <Skeleton />;
return <PrefsView prefs={prefs} />;
{ hydrated: boolean } — read state via your store's selector.getState() can still see defaults.useHydrated is still the safe read.useHydrated as the state source. It only reports the gate.hydrated: false on the server. SSR snapshot is true.toHydrationSignal(persist). Pass a HydrationSignal, not PersistApi.null signal means “loading”. It means “no persist” → hydrated.useHydrated(signal: HydrationSignal | null | undefined) → { hydrated: boolean }toHydrationSignal(persist) from @stainless-code/persistSee also: the matching persist-* source skill for your store.
Gate Alpine.js UI on Persist hydration (Alpine.plugin + useHydrated / $hydrated). Use when wiring HydrationSignal into Alpine data components.
Gate Angular UI on Persist hydration with useHydrated (readonly Signal). Call inside an injection context; use when avoiding flash of default state on async backends.
Gate Lit element UI on Persist hydration with HydrationController. Use when wiring HydrationSignal into a ReactiveControllerHost; not a hook.
Persist with React Native AsyncStorage via @stainless-code/persist/backends/async-storage. Use for RN string-wire JSON state; always gate with useHydrated.
Compress a string-wire StateStorage with @stainless-code/persist/backends/compressed (gzip/deflate). Backend wrapper — compose with createStorage; stack compress-then-encrypt.
Cross-tab sync for backends without storage events via @stainless-code/persist/transport/crosstab (createBroadcastCrossTab). Wrap storage + pass crossTabEventTarget; call close() on teardown.