blob: f5a9b4ee2c9550943abc5cb3aee164e4dc32a200 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
import { useCallback, useState } from "react";
/**
* Like useState, but backed by sessionStorage so state survives back-navigation
* within the same browser tab. Cleared when the tab is closed.
*/
export function useSessionState<T>(
key: string,
defaultValue: T
): [T, (updater: T | ((prev: T) => T)) => void] {
const [state, setStateRaw] = useState<T>(() => {
try {
const stored = sessionStorage.getItem(key);
return stored !== null ? (JSON.parse(stored) as T) : defaultValue;
} catch {
return defaultValue;
}
});
const setState = useCallback(
(updater: T | ((prev: T) => T)) => {
setStateRaw((prev) => {
const next =
typeof updater === "function"
? (updater as (prev: T) => T)(prev)
: updater;
try {
sessionStorage.setItem(key, JSON.stringify(next));
} catch {
// sessionStorage may be unavailable (private browsing quota, etc.)
}
return next;
});
},
[key]
);
return [state, setState];
}
|
