60Implement useLocalStorage() with serialization and cross-tab updates

Implement useLocalStorage(key, initialValue, { serialize = JSON.stringify, deserialize = JSON.parse } = {}). It works like useState, but the value is stored in localStorage and stays in sync:

• across tabs: when another tab changes the key, this component updates (the browser fires a storage event in other tabs);
• across components in the same tab: two components using the same key show the same value (the storage event does not fire in the tab that made the change).

It returns [value, setValue, remove].

function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage("theme", "light");
  return <button onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}>{theme}</button>;
}

Requirements

• Read the stored value on the first render; fall back to initialValue when it is missing or cannot be parsed.
• setValue accepts a value or an updater function, like useState, and writes the serialised value.
• remove() deletes the key and resets to initialValue.
• Never crash when storage is unavailable or full; keep the in-memory value working.