Zenn
🐶

useEffectを理解する

2023/10/19に公開
React
初心者
React Hooks
#
useEffect
tech

はじめに

最近、Reactの勉強を始めました。わからないことが多いので、勉強の記録もかねてまとめようと思います。今回はuseEffectについて理解をするために前回作成したカウントアップのアプリを使おうと思います。

useEffectとは

useEffectとはReact Hookのひとつで、副作用を制御することができます。副作用というとネガティブなイメージがあるかもしれませんが、ここではDOMの変更など、関数の外に影響を与えるような処理のことを言います。useEffectは以下のように宣言します。

useEffect(() => {
    // 処理の記述
return () => {
   // クリーンアップ処理の記述
};
}, [制御する依存配列]);

実際に使ってみる。

今回はuseStateを理解するで作成した簡単なカウントアップアプリを自動で増えていくようにしていきたいと思います。リンクは以下になります。
useStateを理解する

App.js
import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

   return () => {
    clearInterval(timerId);
   };
  }, []);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
}

export default App;

 useEffect(() => {
    const timerId = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

   return () => {
    clearInterval(timerId);
   };
  }, []);

依存配列に空の配列を設定しています。これによって、マウントされる時のみuseEffectが実行され、カウントが自動で１つずつ増える処理が実装されます。

  const timerId = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

こちらは実際の処理です。今回はsetIntervalで特定の間隔で何かを実行するプログラムを記述しています。今回は前回のカウント値を取得し、それに１を加えて新しいカウント値を設定するコードを記述しています。

    return () => {
    clearInterval(timerId);
   };

こちらはクリーンアップ関数の処理です。タイマーを止めるコードを記述しています。

おわりに

今回はuseEffectに関してまとめました。他のものに関してもまとめていきたいと思っています。

参考文献

useEffect

Discussion