Reactのフックとは何かZennYY🎃Reactのフックとは何か2024/02/13に公開JavaScriptReactプログラミング初心者techReactを学習していく中で非常に重要な要素となるフックについて勉強がてらまとめておきます。フックとはフックとは関数コンポーネント内で状態やライフサイクルなどを管理できるようにするための仕組みです。フックが存在する前はクラスコンポーネントでしか状態を管理することはできなかったのですが、フックの登場で関数コンポーネントでも状態を管理することができるようになりました。フックはそれ以外にも様々な機能を関数コンポーネントに追加することを可能にします。今日のReactにはなくてはならない仕組みです。フックには以下の2つのルールが存在しています。フックはトップレベルで呼び出すことフックは関数コンポーネントのトップレベルで呼び出すことが求められており、ループや条件分岐内で呼び出すことはできません。フックは関数コンポーネントもしくはカスタムフック内で呼び出すことフックは通常の関数内で呼び出すことはできません。以下に最も使われるであろう2つのフックを解説します。useState関数コンポーネントでステート(状態)を扱うためのフックです。以下のように記述します。useState(initialState);stateが現在の状態を表し、stateを変更するための関数がsetStateです。set{状態}の組み合わせになるようにしましょう。useStateでこの2つの変数を生成でき、initialStateにはstateの初期値を設定します。useEffectuseStateと同じくらい頻繁に用いられるのがこのフックです。このフックは関数コンポーネントに副作用を設定することができます。副作用とは関数のスコープ外に影響を及ぼすことであり、関数の外のAPI操作やDOM操作などを行うことができます。以下の形で記述します。[依存配列]);基本的にuseEffectフックはコンポーネントのライフサイクルごとに動作します。ここがuseEffectフックの動作のキモであり、複雑なところです。削除時の動作はクリーンアップコードの部分に書くため、混在しないのですが生成時と更新時は同じ部分を実行するためうまく設計しないと処理がぐちゃぐちゃになってしまうため注意が必要です。最後の依存配列には監視する変数を配列で定義します。この変数が変更された段階でuseEffectフックはもう一度副作用を実行します。ここに設定された変数が更新される=コンポーネントが更新されるという認識で問題ないと思います。最後に今回は代表的なフックを2つ紹介しましたが、この2つのフックの利用頻度はとても高いと感じています。useEffectフックは複雑で理解しにくいですが、非常に強力な性能を持っているのでなんとか使いこなしたいところですね。YYしがない出戻りエンジニア(予定)です。過去SI業界でSESのエンジニアとして働いていました。現在はWeb業界でエンジニアとして再起すべく学習中です。DiscussionYYしがない出戻りエンジニア(予定)です。過去SI業界でSESのエンジニアとして働いていました。現在はWeb業界でエンジニアとして再起すべく学習中です。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。