Reactのフックとは何か
Reactを学習していく中で非常に重要な要素となるフックについて勉強がてらまとめておきます。
フックとは
フックとは関数コンポーネント内で状態やライフサイクルなどを管理できるようにするための仕組みです。
フックが存在する前はクラスコンポーネントでしか状態を管理することはできなかったのですが、フックの登場で関数コンポーネントでも状態を管理することができるようになりました。
また、フックはそれ以外にも様々な機能を関数コンポーネントに追加することを可能にします。
今日のReactにはなくてはならない仕組みです。
また、フックには以下の2つのルールが存在しています。
-
フックはトップレベルで呼び出すこと
フックは関数コンポーネントのトップレベルで呼び出すことが求められており、ループや条件分岐内で呼び出すことはできません。 -
フックは関数コンポーネントもしくはカスタムフック内で呼び出すこと
フックは通常の関数内で呼び出すことはできません。
以下に最も使われるであろう2つのフックを解説します。
useState
関数コンポーネントでステート(状態)を扱うためのフックです。
以下のように記述します。
const [state, setState] = useState(initialState);
stateが現在の状態を表し、stateを変更するための関数がsetStateです。
名前は自由に変更可能ですが{状態}, set{状態}の組み合わせになるようにしましょう。
useStateでこの2つの変数を生成でき、initialStateにはstateの初期値を設定します。
useEffect
useStateと同じくらい頻繁に用いられるのがこのフックです。
このフックは関数コンポーネントに副作用を設定することができます。
副作用とは関数のスコープ外に影響を及ぼすことであり、関数の外のAPI操作やDOM操作などを行うことができます。
以下の形で記述します。
useEffect(() => {
// 生成時、更新時に実行されるコード
return () => {
// 削除時に実行されるコード（オプション）
};
}, [依存配列]);
基本的にuseEffectフックはコンポーネントのライフサイクルごとに動作します。
具体的にはコンポーネント生成時、更新時、削除時になります。
ここがuseEffectフックの動作のキモであり、複雑なところです。
削除時の動作はクリーンアップコードの部分に書くため、混在しないのですが生成時と更新時は同じ部分を実行するためうまく設計しないと処理がぐちゃぐちゃになってしまうため注意が必要です。
最後の依存配列には監視する変数を配列で定義します。
この変数が変更された段階でuseEffectフックはもう一度副作用を実行します。
ここに設定された変数が更新される＝コンポーネントが更新されるという認識で問題ないと思います。
最後に
今回は代表的なフックを2つ紹介しましたが、この2つのフックの利用頻度はとても高いと感じています。
特にuseEffectフックは複雑で理解しにくいですが、非常に強力な性能を持っているのでなんとか使いこなしたいところですね。
Discussion