【単発】Next.jsでも動作するuseHashフック

なんで？

最初はreact-useを使っていたがwindow is not definedと出るのがうざすぎて自作するに至った
もしかしたらもっといい方法があるかもしれないけど一応供養

コード

import { useSyncExternalStore } from "react";

export default function useHash(): [string, (newHash: string) => void] {
  const hash = useSyncExternalStore(
    (callback) => {
      const listener = () => {
        callback();
      };
      window.addEventListener("hashchange", listener);
      return () => {
        window.removeEventListener("hashchange", listener);
      };
    },
    () => window.location.hash,
    () => ""
  );
  const setHash = (newHash: string) => {
    if (!window) return;
    window.location.hash = newHash;
  };
  return [hash, setHash];
}