useEffect
表示されたことをきっかけにする
前のレッスンで、副作用の置き場所は2つあると学びました。操作がきっかけならイベントハンドラー、表示されたこと自体がきっかけなら useEffect です。
「ページが出たらデータを取りに行く」「表示された時刻を記録する」のような仕事には、押すボタンがありません。こういうときに使うのが useEffect です。
書き方
useEffect は引数を2つ取ります。1つめが実行したい処理の関数、2つめが依存配列です。
JavaScript (JSX)
import { useEffect } from "react";
export default function App() {
useEffect(() => {
console.log("画面に出ました");
}, []);
return <h1>あおいのプロフィール</h1>;
}2つめの [] は「何にも依存しない」という意味です。こう書くと、中の処理は 最初の描画が終わったあとに1回だけ 走ります。部品が画面に現れることをマウントと呼ぶので、「マウント時に1回」と言います。
大事なのは、描画の前ではなく あと だという点です。React はまず画面を出し、それが終わってから effect を呼びます。だから画面の表示が effect に待たされることはありません。
画面に出したいときは state と組み合わせる
console.log は開発者ツールにしか出ません。結果を利用者に見せたいときは、effect の中で state を更新します。
JavaScript (JSX)
const [status, setStatus] = useState("読み込み中");
useEffect(() => {
setStatus("読み込み完了");
}, []);まず「読み込み中」の画面が出て、そのあと effect が走って「読み込み完了」に変わります。1周ぶん遅れて切りかわる、この流れを覚えておいてください。
つまずきどころ
useEffect は import が必要です。import { useState, useEffect } from "react"; のように、使うフックをまとめて書きます。また、2つめの [] を書き忘れると毎回のレンダーで走ってしまいます。そこは次のレッスンで扱います。
演習
表示された時点でメッセージを切りかえます。