タイトル連動｜基礎を学ぶ

state を外の世界に反映する

useEffect の使いどころで分かりやすいのが、state とブラウザの状態を合わせる仕事です。今回はいいね数をブラウザのタブのタイトルに出します。

タブのタイトルは document.title に文字列を入れると変わります。React が管理していない場所なので、これは副作用です。

useEffect(() => {
  document.title = `いいね ${likes} 件`;
}, [likes]);

依存配列に likes を入れているのがポイントです。これで「いいね数が変わったときだけタイトルを書き直す」になります。押すたびに state が変わり、描画のあとに effect が走り、タイトルが追いかけます。

「ボタンを押したときにタイトルを変える」と考えると、onClick の中に書きたくなります。それでも一応動きますが、いいね数を変える経路が増えたとき (取り消しボタン、初期値の読み込みなど) にそのたびタイトルの更新を書き足すことになります。

effect にしておくと、経路が何本になっても「likes が変わったらタイトルを合わせる」1か所で済みます。きっかけの操作ではなく、合わせたい結果を書く のが React の考え方です。

タブのタイトルは小さくて見落としやすいので、この演習では同じ文字列を画面にも出します。effect の中で document.title を書きかえるのと同時に、state にも同じ文字列を入れます。

const text = `いいね ${likes} 件`;
document.title = text;
setTitlePreview(text);

依存配列を [] にすると、タイトルは最初の 0 件のまま止まります。押しているのにタイトルが変わらないときは、まず依存配列を見てください。

いいね数をタブのタイトルと画面の両方に反映します。