タイトル連動
state を外の世界に反映する
useEffect の使いどころで分かりやすいのが、state とブラウザの状態を合わせる仕事です。今回はいいね数をブラウザのタブのタイトルに出します。
タブのタイトルは document.title に文字列を入れると変わります。React が管理していない場所なので、これは副作用です。
JavaScript (JSX)
useEffect(() => {
document.title = `いいね ${likes} 件`;
}, [likes]);依存配列に likes を入れているのがポイントです。これで「いいね数が変わったときだけタイトルを書き直す」になります。押すたびに state が変わり、描画のあとに effect が走り、タイトルが追いかけます。
なぜイベントハンドラーではないのか
「ボタンを押したときにタイトルを変える」と考えると、onClick の中に書きたくなります。それでも一応動きますが、いいね数を変える経路が増えたとき (取り消しボタン、初期値の読み込みなど) にそのたびタイトルの更新を書き足すことになります。
effect にしておくと、経路が何本になっても「likes が変わったらタイトルを合わせる」1か所で済みます。きっかけの操作ではなく、合わせたい結果を書く のが React の考え方です。
表示を目で確かめる
タブのタイトルは小さくて見落としやすいので、この演習では同じ文字列を画面にも出します。effect の中で document.title を書きかえるのと同時に、state にも同じ文字列を入れます。
JavaScript (JSX)
const text = `いいね ${likes} 件`;
document.title = text;
setTitlePreview(text);つまずきどころ
依存配列を [] にすると、タイトルは最初の 0 件のまま止まります。押しているのにタイトルが変わらないときは、まず依存配列を見てください。
演習
いいね数をタブのタイトルと画面の両方に反映します。