FrontEnd Tech

[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




-FrontEnd, Tech
-,

執筆者:

免責事項

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


comment

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

CAPTCHA


関連記事

Remixでフォーム作るならConformが良いらしいので試してみた

1 はじめに2 Conformを使わずにフォームを実装2.1 サンプル実装2.2 このコードの辛い点3 Conformを使ってみる3.1 サンプルコード4 さいごに5 おすすめ書籍 はじめに 最近、R ...

[Flutter]カメラのフレームデータを使ってリアルタイム画像認識

1 はじめに2 準備3 実装3.1 カメラプレビューの作成3.2 プレビューからフレームデータ取得3.3 フレームデータから画像認識3.4 画像認識した箇所に枠線の表示4 さいごに5 おすすめ書籍 は ...

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

laravel logo

Inertia使ってみた①

1 はじめに2 Inertiaとは3 ルーティング4 LaravelからReactに値渡し5 レスポンス5.1 初回5.2 page object5.3 2回目以降5.4 リロード時6 さいごに7 お ...

react-icon

MUI Themeでカラー、シャドウ、フォントなどを設定する

1 はじめに2 Themeとは3 Themeのセットアップ4 Themeの設定方法4.1 Palette4.1.1 colorオブジェクト4.1.2 直接色を指定する4.2 Elevationのシャド ...

フォロー

blog-page_side_responsive

2022年12月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

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