Reactの副作用：useEffectの基本的な使い方をやさしく解説
副作用（Side Effect）とは？
useStateによる状態管理を理解したら、
次に覚えておきたいのが
副作用（Side Effect）
という考え方です。
副作用とは簡単に説明すると、
画面を表示すること以外の処理
のことを指します。
例えば、画面にカウンターの数字を表示するだけなら、
Reactは画面を描画しているだけなので副作用ではありません。
一方で、次のような処理は画面を表示するだけではなく、
別の仕事も行っています。
- API通信を行う
- ブラウザのタイトルを変更する
- タイマー処理を実行する
- イベントを登録・解除する
- ローカルストレージへデータを保存する
これらは画面を表示すること以外の処理であり、
Reactでは副作用と呼ばれます。
「コンポーネントの外側に影響を与える処理」という説明を見かけることがありますが、
初心者の方はまず「画面を表示すること以外の処理」の方がイメージしやすいと思います。
副作用という名前だけど悪いものではない
「副作用」と聞くと、
薬の副作用のように悪いものという印象があるかもしれません。
しかしReactでは、
副作用は悪いわけではありません。
例えば、
サーバーからデータを取得したり、
ブラウザのタイトルを変更したりする処理は、
実際のアプリケーションでは欠かせない機能です。
Reactでは、
必要な副作用を適切なタイミングで実行する
ことが重要です。
そのためReactでは、
副作用を管理するための仕組みとして
useEffect
が用意されています。
次は、実際にuseEffectを使って副作用を実行する方法を見ていきましょう。
useEffectとは？
useStateと同じように、
まずインポートして利用します。
import { useEffect } from "react";
基本的な書き方は以下になります。
useEffect(() => {
// 実行したい処理
}, []);
useEffectには2つの引数があります。
| 引数 | 役割 |
|---|---|
| 第一引数 | 実行したい処理 |
| 第二引数 | 処理を実行する条件となる値 |
第二引数によって、
「いつ処理を実行するか」
を制御できます。
useEffectの基本的な動き
useEffectでは、第二引数に指定した値が変更された時に、
第一引数の処理が実行されます。
例えば、カウントが変更された時に
ページタイトルを変更する処理を考えてみます。
前回までの記事を見てくださっている方は、
Counter.tsxで、以下のコードを追記してみましょう。
useEffect(() => {
document.title = `${count}回クリックされました`;
}, [count]);
どうですか？
Counterボタンをクリックするたびに、ブラウザのタブに表示されるタイトルが変更されているのではないでしょうか。
この場合の処理の流れは以下になります。
- ボタンをクリックする
- countの値が変更される
- useEffectが変更を検知する
- ページタイトルを更新する
ポイントは、
第二引数に指定した値が変更された時だけ処理が実行される
という点です。
依存配列 [count] の意味
以下のコードの場合、
useEffect(() => {
document.title = `${count}回クリックされました`;
}, [count]);
Reactはcountの変更だけを監視します。
- countが変更された場合 → useEffect実行
- count以外の値が変更された場合 → useEffectは実行されない
このように依存配列を利用することで、
必要なタイミングだけ副作用を実行できます。
初回表示時だけ実行する方法
useEffectでは、 コンポーネントが最初に表示された時だけ処理を実行することもできます。
その場合、第二引数に空配列を指定します。
useEffect(() => {
console.log("初回表示時のみ実行");
}, []);
この場合、コンポーネントが画面に表示されたタイミングで 1回だけ処理が実行されます。
[]（空配列）を指定すると、初回表示時のみ実行される
よく利用されるケースとしては、以下があります。
- 初回表示時のAPI取得
- 初期データの読み込み
- 初期設定の実行
まとめ
Reactで動的なアプリケーションを作成するためには、
状態管理の理解が欠かせません。
まずはuseStateを使って値を管理する感覚を身につけ、
その後useEffectを利用してAPI通信や外部処理との連携を実装できるようになると、
Reactで作れるアプリケーションの幅が大きく広がります。
Reactの状態管理は、
基本的な内容でありながら実務でも非常に重要なテーマです。
useStateで状態を管理する
useEffectで副作用を制御する
State変更によってReactが画面を更新する
小さなコンポーネントから実際に手を動かしながら、
Reactの状態管理を身につけていきましょう。
管理人そーそー。が在籍中の会社は👉こちら👈
みんな仲が良くて、大好きな会社です☺️
無料で参加できるエンジニア交流Barもやってるので、気軽に遊びにきてください！
コメント