マリーとジョーのIT研究ブログ ( ロックシステム)

株式会社ロックシステムの技術研究チームのマリーとジョーです。IT研究ブログを色々更新していきます!

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

f:id:rocksystem6611:20210308151510g:plain



フックとは?


フックとは「関数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()の戻り値でマウントか更新かを考えずに綺麗に実装できます。

以下のブログでは本内容に加えて、引き続きuseEffect()、副作用のスキップについてまでを紹介しています。 是非見てね!
ロックシステム技術ブログ:【React Native】フック useEffect()の使い方