<title>を変更するhooks

ReactでCSR単体の開発を行う場合<title>要素の管理をJavaScript側から行う必要があります。
ページ・コンポーネントごとに<title>を設定するようにしても良いですが、hooksとして切り出して再利用したいです。
この記事では<title>を設定することと、アンマウント時にタイトルを元の状態に戻せるようなhooksを紹介します。

<title>にはdocument.titleでアクセスできます。そして、document.titleに文字列を渡すことで値の設定ができます。
そのため、SampleComponentコンポーネントをマウントした時に<title>を設定するには以下のようにします。

const SampleComponent: FC = () => {
  useEffect(() => {
    document.title = 'サンプル';
  }, []);

  return <></>;
};

これをhooksに抜き出すと以下のようになります。

const useTitle = (title: string) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

これで、コンポーネントがマウントされた時にタイトルの設定が可能になりました。
このままでは、コンポーネントがアンマウントされた時もタイトルを維持してしまいます。任意でアンマウントするタイミングに元のタイトルへ戻せるようにしていきます。

const useTitle = (title: string, restorePrevTitle = false) => {
  const prevTitle = useRef<string>(document.title);

  useEffect(() => {
    if (prevTitle.current === title) {
      return;
    }
    document.title = title;

    return () => {
      if (restorePrevTitle) {
        document.title = prevTitle.current;
      }
    }
  }, [title]);
};

新たにrestorePrevTitleを引数に取り、trueの場合はアンマウント時に元のタイトルへ戻るようにしました。
<title>を変更する前の値はrefに渡すことにより、レンダリング間で保持させています。そして、アンマウント時にその値をdocument.titleに渡すことで元のタイトルへ戻すようにしました。

このhooksを使うときは同時に複数のコンポーネントで利用しないことです。複数のコンポーネントで利用した場合はそれぞれのライフサイクルなどのタイミングによって設定されるタイトルが一意に定まらないことが多いので気をつけてください。