useURLHash.ts

import { useSyncExternalStore } from 'react';

function onHashChange(callback: () => void) {
  window.addEventListener('hashchange', callback);
  return () => window.removeEventListener('hashchange', callback);
}

function getHash() {
  return window.location.hash.slice(1) || null;
}

function setHash(hash: string | null) {
  window.location.hash = hash ?? '';
}

export const useURLHash = (): [string | null, (hash: string | null) => void] => {
  const hash = useSyncExternalStore(onHashChange, getHash);
  return [hash, setHash];
};