<h2 data-sourcepos="1:1-1:15">
<a></a>なんで？</h2>
最初はreact-useを使っていたが<code>window is not defined</code>と出るのがうざすぎて自作するに至った 
もしかしたらもっといい方法があるかもしれないけど一応供養
<h2 data-sourcepos="5:1-5:12">
<a></a>コード</h2>
<div data-lang="ts" data-sourcepos="7:1-30:3"><div><pre><code>import { useSyncExternalStore } from "react";

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

windowオブジェクトとsetHashのタプル

window is not definedというエラーが出たから

他のライブラリの方が優れていると思ったから

react-useのドキュメントが不十分だったから

デフォルトのハッシュを設定する

windowオブジェクトを新しく作成する

ハッシュの変更を監視するため

コンポーネントのライフサイクルを管理するため

状態をグローバルに管理するため