Solution

You'll wrap useState so its value is mirrored to sessionStorage — read back on mount, written on every change — and so a missing or broken sessionStorage quietly degrades to plain state instead of crashing.

The problem, in plain English

sessionStorage is localStorage's short-lived sibling: same API, but the data is scoped to one tab and cleared when that tab closes. That makes it ideal for per-tab, per-session state — where you are in a checkout flow, a scroll offset, a dismissed banner — without polluting the user's other tabs. React state alone forgets on reload; sessionStorage remembers within the tab's life. useSessionStorage is the useState-shaped bridge between them, and because storage can be unavailable (private mode, quota, server-side render), it must never throw.

The mental model

Two things hold the same value and must agree: React state (drives the UI) and sessionStorage (survives a reload of this tab). Seed state from storage once on mount; on every setValue, write both. There's deliberately no cross-tab listener here — sessionStorage isn't shared between tabs, so unlike useLocalStorage there's no storage event worth handling.

A first attempt

The obvious version starts from initialValue and writes on change:

function useSessionStorageNaive(key, initialValue) {
  const [value, setValue] = useState(initialValue);
  useEffect(() => {
    sessionStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
}

Three problems. It ignores the stored value on mount — it always starts at initialValue, so a reload flashes the default and then overwrites what was saved. It throws if sessionStorage is unavailable — private mode or a full quota turns setItem into an exception that crashes the component. And reading in an effect instead of a lazy initializer means the restore happens a render late. We need to read during initialization and guard every access.

The working solution

const { useState, useCallback } = require('react');

function useSessionStorage(key, initialValue) {
  // Read once, in a lazy initializer (SSR-safe, defensive).
  const readValue = () => {
    if (typeof window === 'undefined') return initialValue;
    try {
      const item = window.sessionStorage.getItem(key);
      return item !== null ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue; // corrupt JSON, private mode, no storage
    }
  };

  const [value, setValue] = useState(readValue);

  // setValue: update state AND persist. Support functional updaters.
  const setStoredValue = useCallback(
    (next) => {
      setValue((prev) => {
        const resolved = next instanceof Function ? next(prev) : next;
        try {
          window.sessionStorage.setItem(key, JSON.stringify(resolved));
        } catch {
          /* quota / unavailable — keep the state update, skip the write */
        }
        return resolved;
      });
    },
    [key],
  );

  return [value, setStoredValue];
}

module.exports = { useSessionStorage };

Two pieces. readValue is passed to useState as a lazy initializer, so it reads sessionStorage exactly once on mount and restores the saved value before the first paint — never re-reading on later renders. setStoredValue resolves a functional updater against the previous state (just like useState), then writes to both React state and sessionStorage in one step. Every storage touch is wrapped in try/catch: a missing window, corrupt JSON, or a QuotaExceededError degrades to the initial value or a skipped write instead of crashing — the state update still lands, so the UI stays responsive even when persistence fails.

Walking through one call

Mount useSessionStorage('step', 1) in a tab where sessionStorage['step'] is already "2":

• init — useState(readValue) runs readValue once: getItem('step') is '2', so JSON.parse gives 2. State starts at 2 (not 1) — the saved step is restored on reload.
• setStep(3) — resolves to 3, writes sessionStorage['step'] = '3', sets state to 3. The UI re-renders; a reload of this tab would restore 3.
• setStep(s => s + 1) — the updater runs against 3, giving 4; storage becomes '4' and state becomes 4.
• close the tab — sessionStorage for this tab is discarded, so a fresh tab starts from initialValue again.

The saved value drove the initial render, and each setValue kept state and storage in lockstep.

Gotchas

• Reading storage on every render — calling getItem in the render body re-reads each render and can desync from state. Read it once in a lazy useState(() => ...) initializer.
• Ignoring the stored value on mount — starting from initialValue and writing in an effect overwrites the saved value. Seed state from storage first.
• Letting storage errors crash the component — setItem throws on quota or in private mode. Wrap it so the state update survives and only the write is skipped.
• Reaching for cross-tab sync — sessionStorage is per-tab; there's no shared storage event to listen for. Adding one is dead code that never fires.

Going further

• useLocalStorage is the same hook against localStorage, plus a storage-event listener for cross-tab sync — the one piece this per-tab version deliberately omits.
• Custom serializers — accepting serialize/deserialize lets you persist Maps, Dates, or Sets that JSON can't round-trip on its own.
• Namespaced keys — prefixing every key (e.g. app:step) avoids collisions when multiple features share one tab's sessionStorage.