React Hooksって結局なんなの？！初心者なりにまとめてみた
前書き
どうも！エンジニア就活はもう終わりかけと聞いて一瞬絶望しかけたグッピーです！
いやー、インターン先の先輩に就活の相談をしていたのですが、
「エンジニア就活ってもう終わりかけだよね」っていわれ、
軽く絶望してましたw
だからといって早めに始められたかと聞かれると無理だったのでどうしようもないのであんまり気にしていないですね。(強がり)
と自分語りはここまでにして、今回はreactを使っていくに当たって絶対に使うhooksについて個人的にまとめていきます。
hooksとは
reactのhooksとは2019年に追加された機能です。現在ではreactを使うに当たって、理解が必須の機能と言っても過言じゃないでしょう。
hooksを使うことでreactの関数型コンポーネントで状態をもつことやコンポーネントのライフサイクルに応じた処理を記述できます。今回は基本的なhooksのユースケースを紹介した後、カスタムフックについても解説していきたいと思います！また、今回はISID Teck blog様の記事を参考にしているので、詳しくはそちらを見るとわかりやすいと思います！
基本的なhooksの種類
まずはreactに標準搭載されていて、よく使われるhooksについて紹介していきます！主にいかが挙げられます。
・useState
・useEffect
・useContext
・useReducer
・useMemo
・useCallback
具体的な使用方法
useState
useStateは関数型コンポーネントで状態を扱うためのフックです。
以下はuseStateを利用する場合の基本的なコードです。
const[state,setState]=useState<T>(initStateValue);
利用シーンはフォーム送信機能など利用者とインタラクティブにやり取りする値を保持する必要がある場合です！
カウント機能などを作るのにも使いますね
useEffect
useEffectは関数型コンポーネントで副作用を実行するためのフックです。
・・・副作用ってなんやねん！って思う方もいると思います。外部データの取得やdomの手動での更新などの処理をreactでは副作用と呼ぶらしいです。知らなかった・・・
使い所としては、外部APIからリソースを取得したい場合などです。
useContext
useContextはコンポーネント間で横断的に利用したい状態を管理するためのフックです。通常、コンポーネントでは状態をpropsを通して親から子に渡します。しかし、これが多重化していくと処理が遅くなったりと弊害が起きます。しかし、useContextを使うとpropsを通さずに一気に親から孫までデータを渡すことができ、処理が軽くなります。
ユースケースは認証情報の管理などが挙げられます。
useReducer
アプリケーション開発を進めていくと処理が複雑になるにつれて、管理しなければならない状態が増えてきます。その場で発揮するのが、useReducerです。useReducerはuseStateよりも複雑な状態を管理するためのフックです。公式ドキュメントでは「useStateの代替品」として位置付けられています。
useReducerを使うユースケース
stateの状態管理に使う場合が多いです。僕のインターン先でも使ってましたね。
useMemo
useMemoは関数の返り血をメモ化するフックです。メモ化はプログラムの最適化技法の一つで、計算結果を再利用するために保持して、再計算を防ぐ者です。そのため、useMemoは最適化のためのフックという位置付けです。
useMemoのユースケースは、配列を走査するショルが頻繁に必要な場合などに役立ちます。
useCallback
useCallbackは関数をメモ化するフックです。最適化のためのフックという感じですね。
カスタムフック
reactでは標準搭載されているhooks以外にも、自分でhooksを作って使ったりすることもできます！！
まあ、僕みたいな初心者は使わせていただくことだけを考えた方がいいですねw
用語紹介
ライフサイクル・・データの保持をいつまで行うか、などデータの受け渡しに関する期間などをライフサイクルと呼んでいる。
API⇨ある機能をバックエンド側で処理してくれるコード群のこと。削除機能や送信機能もAPIと言いますし、それらをまとめて一つのAPIとも言えます。
終わりに
なかなか難しいですね・・・
hooksを使いこなせてようやく一人前だと思うので、これからも頑張っていきたいですね。
ではまた！グッピーでした！
参考記事