useSessionStorage

React side-effect hook that manages a single sessionStorage key

useSessionStorage binds a React state to a sessionStorage key. It returns a [value, setValue] tuple that behaves like useState. The value is read from session storage on mount and written back on updates. Setting the value to null removes the key. Like useLocalStorage, it supports custom serializers and listens for cross-tab storage events by default.

When to Use

• Storing temporary state that should persist across page navigations within the same tab but not across browser restarts
• Keeping wizard or multi-step form progress that resets when the user closes the tab
• Caching data that is sensitive or session-specific (e.g., one-time tokens, temporary filters)

Notes

• Session-scoped: Unlike localStorage, data in sessionStorage is cleared when the tab or browser is closed. Use useLocalStorage for long-lived persistence.
• Cross-tab sync: The hook listens for storage events by default. Disable with listenToStorageChanges: false.
• Custom serialization: Provide serializer.read and serializer.write in the options for non-string data types.
• See also useLocalStorage for persistent storage and useCookie for cookie-based persistence.

Usage

function Demo() {
  // bind string
  const [value, setValue] = useSessionStorage("my-key", "key");

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue("bar")}>bar</button>
      <button onClick={() => setValue("baz")}>baz</button>
      {/* delete data from storage */}
      <button onClick={() => setValue(null)}>Remove</button>
    </div>
  );
};

API

useSessionStorage

Returns

readonly [T | null, React.Dispatch<React.SetStateAction<T | null>>]: A tuple with the following elements:

• The current value of the sessionStorage.
• A function to update the value of the sessionStorage.

Arguments

UseSessionStorageOptions

UseSessionStorageSerializer