Tech FrontEnd

[React初心者]カスタムフックについて学ぶ

投稿日:

はじめに

今回はReactを学び始めて間もない初心者が、カスタムフックについて学んだので、備忘録がてらまとめてみたいと思います。

Ract Hook(フック)とは

React Hook とは、フックによって関数コンポーネント中で状態や、ライフサイクルを扱うための機能です。
フックは扱う対象や、機能によって複数の種類があり、Reactが公式に提供しているフックはこちらから確認できます。

また、公式ドキュメントにフックについて下記のようにあります。

要するにフックとは?
フックとは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。フックは React をクラスなしに使うための機能ですので、クラス内では機能しません。
https://ja.reactjs.org/docs/hooks-overview.html#but-what-is-a-hook

Reactには、クラスコンポーネントと関数コンポーネントがありますが、フックの登場で関数コンポーネントでもクラスコンポーネントと同様の機能が使えるようになったということで、現在では関数コンポーネントでの開発が主流になっているとのことです。

カスタムフックの実装

フックのルール

公式サイトにフックのルールについて以下のようにあります。

  • フックは関数のトップレベルのみで呼び出してください。ループや条件分岐やネストした関数の中でフックを呼び出さないでください。
  • フックは React の関数コンポーネントの内部のみで呼び出してください。通常の JavaScript 関数内では呼び出さないでください(ただしフックを呼び出していい場所がもう 1 カ所だけあります — 自分のカスタムフックの中です。これについてはすぐ後で学びます)。

https://ja.reactjs.org/docs/hooks-overview.html#rules-of-hooks

上記のルールに違反してフックを呼び出すと、ビルドエラーまたは実行時エラーが発生します。
これは描画ごとに呼び出されるフックの数と順番を同じにするためです。

カスタムフック

フックを使用する関数を新たに定義して、それを関数コンポーネントのトップレベルで呼び出すことができます。
このような関数を実装することで複数のフックを組み合わせたカスタムフックが実装できます。

公式ドキュメントでは下記のように説明されています。

カスタムフックはstateを使うロジック(データの購読を登録したり現在の値を覚えておいたり)を共有するためのもの
https://ja.reactjs.org/docs/hooks-custom.html

カスタムフックの実装

実際に簡単なカスタムフックを作成したいと思います。
以下はテキストボックスに文字を入力して際に、入力された文字が表示されるといったものになります。
関数コンポーネント外で useInput というカスタムフックを定義しています。カスタムフックの名前は他のフックと同様に use から始まる名前にします。

Input を実行してテキストボックスに入力すると、以下のような挙動になります。

さいごに

これを覚えないとReactが始まらないくらい大事な機能だと思うので、頭に叩き込んでいきたいと思います。

おすすめ書籍

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

blog-page_footer_336




blog-page_footer_336




-Tech, FrontEnd
-,

執筆者:

         

免責事項

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


comment

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

CAPTCHA


関連記事

icon

ドキュメント作成の技術「テクニカルライティング」とは

1 はじめに2 テクニカルライティングとは3 少しでも分かりやすく、簡潔にする3.1 一文一義3.2 長くしすぎない、繋げすぎない3.3 長さの目安は?4 伝わりやすく書く4.1 まず主題を書く4.2 ...

Sign in with Appleの実装

1 はじめに2 Sign in with Appleとは2.1 iOS レビューガイドライン2.2 つまり3 準備4 実装5 デザイン6 さいごに7 おすすめ書籍 はじめに こんにちは、nukkyです ...

もうすぐ登場!Vue 3の変更点まとめ

1 はじめに2 仕様変更2.1 複数のv-modelが定義可能に2.2 template直下に複数のタグを記述可能に2.3 開始処理がcreateAppに2.4 scoped cssの仕様変更2.5 ...

入門スクラム〜スクラムフレームワーク

1 はじめに2 スクラムの特徴2.1 シンプルなフレームワークであること2.2 素早い反復を繰り返すこと2.3 検査・適応・透明性3 スクラムの役割3.1 プロダクトオーナー3.2 スクラムマスター3 ...

React Router v7のSSRでパスルーティングな i18n をやってみた

1 はじめに2 remix-i18nextの導入2.1 インストール2.2 セットアップ2.3 entry.server.tsxの実装2.4 entry.client.tsxの実装3 i18n対応3. ...

フォロー

follow us in feedly

blog-page_side_responsive

2022年12月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

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