【デイトラ学習記録】DAY32 ライフサイクルメソッド（useEffect）

今回は、Reactのライフサイクルメソッド（useEffect）について学習していきます。

ライフサイクルメソッド（useEffect） Webアプリ開発コースフロントエンド開発編

フロントエンド領域の開発を学んでキャリアの幅を広げよう

ライフサイクルメソッド（useEffect）とは

useEffectフックはReactのコンポーネントに副作用を簡単に追加する機能
副作用とは、コンポーネントがレンダリングされたタイミングだったり、更新された特定にタイミングで何かしらの処理を実行すること

useEffectの基本形

useEffect は、Reactのコンポーネントのライフサイクルに関連する処理を記述するためのフックで、コンポーネントのマウント時とアンマウント時と再レンダリング時のタイミングで実行したい処理を簡潔に書くことができる

マウント
- コンポーネントがDOMに追加されたときに実行される処理
- 利用例 : 初期化処理、データのフェッチ、イベントリスナーの登録など
アンマウント
- コンポーネントがDOMから削除されるときに実行されるクリーンアップ処理
- 利用例 : イベントリスナーの解除、タイマーのクリア、サーバー接続の切断など
再レンダリング
- コンポーネントの状態やプロパティが変更されて再描画されるときに発生する。
- 利用例: 動的なデータやUI更新に応じた処理。
第一引数
- 副作用の処理（エフェクト処理）
第二引数
- useEffect の実行タイミングを指定する変数や状態を配列形式で渡す

クリーンアップ処理

return () => {} で、クリーンアップ処理を実行できます。
クリーンアップ処理とは、コンポーネントがアンマウントされる際や、依存配列の変更によりuseEffectが再実行される前に実行される処理のことです。

TSX

useEffect(() => {
  console.log("初回マウント時および todoList が変更されたときに実行");
  
  // クリーンアップ処理
  return () => {
    console.log("アンマウント時または todoList が変更される前に実行");
  };
}, [todoList]);

第二引数に依存配列を指定した場合

初回のマウント時に実行され、その後 todoList が変更されるたびに再実行されます。

TSX

useEffect(() => {
  console.log("初回マウント時および todoList が変更されたときに実行");
}, [todoList]);

引数がない場合

初回のマウント時に実行され、その後コンポーネントが再レンダリングされるたびに実行されます。クリーンアップ処理はありません。

TSX

useEffect(() => {
  console.log("マウント時および再レンダリング時に実行");
});

引数が空配列の場合

初回のマウント時のみ実行され、依存配列が空なので再レンダリングでは実行されません。

初期のマウント時に一度だけ実行したい場合などに使用します。

使用例: 初期のデータフェッチ取得など

TSX

useEffect(() => {
  console.log("初回マウント時に実行");
}, []);

TODOアプリでローカルストレージを使ったuseEffectの使用例

マウント時に1度だけ、ローカルストレージからデータを取得する

TSX

useEffect(() => {
  const todoListData = localStorage.getItem("todo-list");
  if (todoListData) {
    setTodoList(JSON.parse(todoListData));
  }
}, []);

todoListが更新されるたびに、ローカルストレージに保存

TSX

// TODOが追加されるごとに、todoListが更新される
const [todoList, setTodoList] = useState<Todo[]>([]);

// todoListが更新される度に、"todo-list"という名前でローカルストレージに保存
useEffect(() => {
  localStorage.setItem("todo-list", JSON.stringify(todoList));
}, [todoList]);

Window: localStorage プロパティ – Web API | MDN

localStorage は window プロパティの読み取り専用プロパティで、この Document の origin における Storage オブジェクトにアクセスできます。格納されたデータは、ブラウザーのセッションを跨いで保存されます。

リポジトリ

GitHub – yuta0824/dev-react-practice at add-useEffect-day32

デイトラWeb開発コースフロントエンド開発編 CSSでのスタイリングの練習課題です. Contribute to yuta0824/dev-react-practice development by creating an account on GitHub.

※復習内容のメモ

フィルターのお決まりの処理

setTodoListをuseStateで定義

src/js/App.tsx

const [todoList, setTodoList] = useState<Todo[]>([]);

コンポーネントまで、setTodoListをバケツリレーしてフィルタリング
フィルタリングする処理をよくコード読む
- setTodoList の引数
- (prev) => prev.filter((todo) => todo.id !== id)

src/js/component/todo/TodoItem.tsx

const handleDelete = () => {
  setTodoList((prev) => prev.filter((todo) => todo.id !== id));
};

バケツリレー

Propsのバケツリレーが必要なシチュエーションをコードをよく読む

感想

useEffect と localStorage へデータを保存する方法を学習しました。

バックエンドやデータベースを勉強しないと、ブラウザをリロード時にデータを保管できないよなーって思っていたので、手軽に保管できる機能を学習できて良かったです！
ちょっとした成果物だと、localStorage を使って作成できそうです。

今回は、データの更新ごとにlocalStorageへデータを保管する。という例題で練習しました。
様々なシチュエーションで副作用を使いた場面があるのだろうなーと今は予想しています。
useEffectの基本的な概念は理解できたので、使うシチュエーションをよりキャッチアップしていきたいと思いました。