Tech FrontEnd

【React初心者】改めて主要なhookの使い方

投稿日:

はじめに

今回はReactでの開発を始めたての筆者が、頻出するhookについて、備忘録がてらまとめてみたいと思います。

useState

useState()は、関数コンポーネントでstateを管理(stateの保持と更新)するためのReactフックであり、最も利用するであろうフックです。
stateとはコンポーネントが内部で保持する「状態」のことで、画面上に表示されるデータ等、アプリケーションが保持している状態を指しています。stateはpropsと違い後から変更することができます。

1つ目の要素:stateの現在の値
2つ目の要素:stateの現在の値を更新するための関数
state が更新されてもinitialStateはinitialStateとして保持される
useStateの左辺のstate変数には任意の名前を付けることが出来ます。
基本的には扱いたいstate名にsetをつけたものになると思います。

再レンダリング後もReactはその変数の現在のstateの値をそのまま持っており 、最新のstateの値を関数に渡します。現在のstateの値を更新したい場合は、setStateを呼びます。

useEffect

useEffectを使うと、useEffectに渡された関数はレンダリングの結果が画面に反映された後に動作します。
つまりuseEffectとは、「関数の実行タイミングをReactのレンダリング後まで遅らせるhook」です。

副作用の処理(DOMの書き換え、変数代入、API通信などUI構築以外の処理)を関数コンポーネントで扱えます。
クラスコンポーネントでのライフサイクルメソッドに当たります。

useEffect()の基本構文は以下の通りです。関数コンポーネントのトップレベルで宣言します。

第2引数を指定することにより、第1引数に渡された副作用関数の実行タイミングを制御することができます。Reactは第2引数の依存配列の中身の値を比較して、副作用関数をスキップするかどうかを判断します。
また、第2引数を省略することもできますが、コンポーネントがレンダリングされるたびに副作用関数が実行されてしまい、無限ループの温床になりやすいので注意する必要があります。実際には、第2引数を省略するケースはほとんどありません。

では、副作用関数を初回レンダリング時の一度だけ実行させたい場合はどうするかというと、第2引数に空の依存配列[]を指定します。

副作用関数を実行したいタイミングを制御してみます、下記の場合はcountに変化があったときだけ副作用関数を実行します。

この場合、再レンダリングが行われてもcountの値に変更がなければ副作用関数は実行されません。

useLayoutEffect

ReactのHookにはuseEffectと似た名前でuseLayoutEffectというフックがあります。useEffectとuseLayoutEffectは使い方、記述方法については似ているのですが大きな違いがあります。useEffectは上記の通り、一度画面が描写された後(レンダリング後)にuseEffectの副作用関数が実行されます。useLayoutEffectは画面が描写される前(レンダリング前)にuseLayoutEffectの中の処理が実行されます。

useCallback

useCallbackはパフォーマンス向上のためのフックで、メモ化したコールバック関数を返します。
useEffectと同じように、依存配列の要素のいずれかが変化した場合のみ、メモ化した値を再計算します。

メモ化とは同じ結果を返す処理について、初回のみ処理を実行記録しておき、値が必要となった2回目以降は、前回の処理結果を計算することなく呼び出し値を得られるようにすることです。

useCallbackは、初回の呼び出しでは渡された関数をそのまま返します。Appが再レンダリングされたとき、useCallbackの返り値としては初回レンダリング時のときの関数オブジェクトが再利用されます。 つまり、ここでいうhandleClickは初回のレンダリング時も2回目のレンダリング時も同じ(===の意味で等しい)関数オブジェクトになります。 useCallbackを噛まさない場合は、handleClickは毎回新しく作られた関数オブジェクトとなってしまいます。
ここでは、単にログを吐いているだけですが、APIの接続や複雑な計算処理などパフォーマンスに影響がある処理の場合に効果を発揮します。

useContext

useContextとは、Context機能をよりシンプルに使えるようになった機能です。
親からPropsで渡されていないのに、Contextに収容されているデータへよりシンプルにアクセスできるというものです。

createContextでContextを作成します。
<Context.Provider value=<value>>でラップした配下のComponent内ではContextの値(value)を呼び出せるようになります。

Contextの値の呼び出しはuseContextを使用します。

これだけでContext値を取得できるようになります。

さいごに

React初心者としては、まずhookを使いこなすことが大事だと思いました。基礎を理解してどんどん開発の応用を効かせられるようにしていきたいと思います。

おすすめ書籍

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-Tech, FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

svelte

SvelteのStore入門

1 はじめに2 SvelteにおけるStoreの概要2.1 Storeの条件2.2 Storeの種類3 Storeの実装と使い方3.1 Writable Store3.1.1 実装例3.1.2 使用例 ...

react-icon

React QueryのSuspese Modeを使ってみた! [TypeScript]

1 はじめに2 React Suspenseとは3 React QueryのSuspense Mode3.1 事前準備3.2 Suspenseモードの有効化3.3 データをフェッチするコンポーネントの ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

Nuxt 3(ベータ)の新機能を紹介

1 はじめに2 Nuxt 3の特徴2.1 新しいサーバエンジン(Nitro Engine)が登場2.2 Vue 3&Composition APIのネイティブサポート2.3 TypeScriptのネイ ...

C# マルチキャストデリゲートの備忘録

1 はじめに2 C#のデリゲートについて2.1 デリゲートの定義3 マルチキャストデリゲートについて3.1 追加方法3.2 削除方法4 さいごに5 おすすめ書籍 はじめに こんにちはsuzukiです。 ...

フォロー

blog-page_side_responsive

2023年2月
 1234
567891011
12131415161718
19202122232425
262728  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。