useEffect——「表示された後に」動かす

実践編へようこそ。この教材のゴールは、インターネットの向こうからデータを取ってきて表示することです。天気予報アプリも、SNSも、ECサイトも、画面の中身はどこかのサーバーから取得したデータ——それができると、あなたの作品は「自分の中で完結するアプリ」から「世界とつながるアプリ」に変わります。

その第一歩は、意外なところから始まります。「表示された後に、何かをする」という新しいタイミングの獲得です。

今までの処理は、ぜんぶ「操作されたとき」だった

React教材で書いた処理を思い出してください。カウンターも、ToDoの追加も、動くのはユーザーが何かしたとき(onClick、onChange)でした。でも、データ取得は違います。ユーザー一覧のページを開いたら、ボタンを押さなくても一覧は表示されていてほしい。つまり必要なのは「画面が表示されたら、自動で動く」処理です。

まず、素直に書いて失敗する

「表示されたときに動かしたいなら、関数の本体に直接書けばいいのでは?」——やってみます。

const Welcome = () => {
  const [message, setMessage] = useState("準備中...");

  setMessage("ようこそ!");   // × 描画のたびに実行される

  return <p>{message}</p>;
};

これは無限ループになります。流れを追うと——①Reactが関数を実行(描画)→②途中でsetMessageが動く→③setはReactへの「描き直して」の合図(React教材Ch14)→④Reactがまた関数を実行→⑤またsetが動く→……永遠に繰り返し。実際、コンソールに「Too many re-renders」というエラーが出ます。

関数の本体は「描画の途中」です。描画の途中でsetを呼んではいけない——では、「描画が終わった後」に処理を差し込むには?