【React】5分で理解！useEffectで関数の実行タイミングを探ろう

はじめに

Reactを学び始めたとき、useEffectのことがよく分かりませんでした。useEffectは、アプリがデータを取得したり、自動で何かを更新したりする時に使います。これを上手に使えるようになるには、useEffectがどんな時に動くのかを理解することがとても重要です。この記事では、useEffectの基本的な使い方を簡単に説明します。これを読んで、useEffectをもっと上手に使えるようになってほしいと思います。

対象読者

• ReactでuseEffectを取り敢えず使っている
• useEffectで関数の実行タイミングを確認したい

useEffectの基本構文

useEffectはReactの関数コンポーネントで副作用を扱うために使います。ここでいう「副作用」とは、コンポーネントの普通のレンダリングプロセスとは別に行われる操作のことを指します。これには、データの取得、DOMの手動操作、ログの記録などが含まれます。

useEffect(() => {
  // 実行する副作用
}, [依存配列]);

• 第一引数：副作用を実行する関数。
• 第二引数：依存配列。この配列内の値が変化するたびに副作用が再実行されます。空の配列 [] を渡すと、コンポーネントの初回レンダリング後に一度だけ実行されます

副作用の実行タイミング

依存配列の内容に応じて副作用の実行タイミングが変わります。

例えば、以下のコードはFirestoreからデータを取得し、コンポーネントが初回レンダリングされた後に、一度だけこのデータを取得します。

この例では、console.logを使用して、useEffectがどのタイミングで副作用を実行するかを観察できます。このようにログを活用することで、副作用の実行タイミングを直感的に理解することが可能です。

// Firestoreからデータを取得する関数
  const fetchCareers = async () => {
    try {
      console.log("データ取得を開始します"); // ここを追加
      const querySnapshot = await getDocs(collection(db, "careers"));
      const careersData = querySnapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      })) 
      console.log("データ取得が完了しました:", careersData);　// ここを追加
      setCareers(careersData);
    } catch (err) {
      console.error("Error fetching careers:", err);
    }
  };

  useEffect(() => {
    console.log("コンポーネントがレンダリングされました。"); // ここを追加
    fetchCareers();
  }, []);

実際に、画面で実行タイミングを確認しましょう。

Carrers をクリックして、遷移先のページ（コンポーネント）がレンダリングされたときに、右側のコンソールに以下の実行順でログが出力されたのが確認できました！

① コンポーネントがレンダリングされました。
② データ取得を開始します
③ データ取得が完了しました

おわりに

今回は、useEffectの第二引数に空の配列を指定した場合にいつ実行されるのか？に焦点を置いて、ご説明しました。さらに、理解を深めるには第二引数に色々な値を依存配列に入れて試してみてください。

最後まで読んでいただきありがとうございました！