【React Native】フック useEffect()の使い方

フックとは?

---

フックとは「関数Componentを作ろう！」でご紹介した関数ComponentでstateとライフサイクルメソッドのReactの機能を利用するための関数です。

2019年より前はフックがなかったので、関数Componentはあまり使われていませんでした。フックが登場するまではstateなどの一般的なReactの機能が必要な場合、クラスComponentで書く必要がありました。フックにより全ての関数Componentが関数で書けるようになりました。
関数ComponentはクラスComponentよりコーディングしやすく読みやすいものとなっています。

最近は関数Componentがスタンダードになっているので、フックを勉強しましょう！

一般的に使われているフックはuseState()とuseEffect()があります。今回はuseEffect()を紹介します。
日本語ではeffectは副作用と言われ、useEffect()を副作用フックと言われています。

useEffect()とは?

---

前回はクラスコンポーネントのライフサイクルメソッドを紹介しました。クラスコンポーネントはcomponentDidMountとcomponentDidUpdateとcomponentWillUnmountを使っていますが、関数ComponentはuseEffect()という関数一つでライフサイクルの中でコードの実行ができます。

useEffect()の使い方

---

useEffect()の最初の引数は関数です。この関数は副作用と言います。関数Component内にuseEffect()を書くと毎回レンダーされたら副作用が動きます。つまり、副作用はクラスコンポーネントのcomponentDidMountとcomponentDidUpdateが動くタイミングと一緒です。

前回は色が変わるアプリを作っていました。今回はほとんど同じですが、色が変わらずに表示される文字がひらがなと漢字が交互に繰り返すアプリを作ります。下記のuseEffect()を使っているコードを見ましょう。


※このコードはバグがあります。
このコードにはバグがありますが、どの部分でしょうか？答えはclearInterval()を使っていないところです。レンダーされると副作用が実行されて、前のintervalを消さずに新しいintervalを作成してしまっています。

クラス関数の場合はcomponentDidUpdate()の中でclearInterval()を使います。関数コンポーネントの副作用はcomponentDidMount()、componentDidUpdate()の二つと同じ実行タイミングなので、マウントか更新かどちらの場合の判定が必要になりそうですね。この判定は不可能ではありませんが、useEffect()の戻り値でマウントか更新かを考えずに綺麗に実装できます。

クリーンアップ

---

副作用の戻り値は任意の関数です。この関数はコンポーネントのマウント解除時と次のタイミングで同じ副作用が動く時に実行されます。副作用の戻り値はクリーンアップ関数として使うための関数です。下記コードのように戻り値を入れると上手く動きます。

const interval = setInterval(() => {
  setIsHiragana((previousState) => !previousState);
}, 60000 / bpm);

return () => clearInterval(interval);

副作用が動く時に前のintervalがクリアされます。マウント解除の時も同様です。

副作用のスキップ

---

副作用を毎回実行するとパフォーマンスが悪くなる場合があります。これの対策としてuseEffect()の2つ目の引数を使います。useEffect()には引数が2つあります。上記で説明した1つ目の引数は副作用の関数です。2つ目の引数は依存の配列です。

副作用は依存の配列の中の値が変わらないと動きません。今回はintervalを変えたい時はbpmが変わる時なので、依存の配列に[bpm]を書くとbpmが変わらない時には副作用がスキップされます。

クリーンアップと副作用のスキップ処理を入れた最終コードは下記になります。

Reactのフックリリース履歴

---

リリース履歴

2013年5月	React JS
2015年3月	React Native
2019年2月	React JSフック
2019年3月	React Nativeフック

この履歴を見るとReact JSは6年間、React Native は4年間フックがない状態でした。フックがない関数コンポーネントで作れるものが少なかったので、その6年間で作られたReactのコードのほとんどがクラスComponentでした。最近は関数Componentが主流になっていますが、クラスComponentのサポートも続いています。

結論

---

関数Component内で副作用を実装したい時にはuseEffect()を使います。useEffect()の引数は副作用の関数と依存の配列です。関数コンポーネントと違ってcomponentDidMount、componentDidUpdate、componentDidUnmountの3つの関数を使わなくてuseEffect()だけで管理します。

2019年からReactのフックのおかげで関数ComponentはクラスComponentと同じことができるようになりました。Reactの開発はどちらでも可能ですが、公式サイトの例は関数Componentの方が多いです。個人的な印象は関数Componentの方が分かりやすいと思います。システム、チュートリアル、Q&Aサイト等はまだクラスComponentが多いので両方の事が分かると多くの情報を摂取することができます。

Reactについては他の記事でもご紹介しています。一緒に読んで頂ければ理解も深まると思います。 「基礎知識とExpoを使用した開発環境構築！」

参考

---

useEffectのドキュメンテーション

ReactJSのウィキペディア（リリース日）

React Nativeのウィキペディア（リリース日）

Reactフックのリリース

React Nativeフックのリリース

これからエンジニア転職を考えている方へ

---

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください