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


関連記事

Go言語

GoフレームワークGinでミドルウェアを使ってログインAPIを実装

1 はじめに2 ログインAPIの作成3 ログインのセッション管理4 ミドルウェア4.1 gin.Default()4.2 Logger4.3 Recovery4.4 sessions5 独自ミドルウェ ...

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

react-icon

Reactで動画編集機能を作り込める「remotion」を試してみた

1 はじめに2 Remotionとは3 Remotionを使ってみる3.1 導入3.2 動画のレイアウト作成3.3 Playerでの動画プレビュー3.4 テキスト編集機能を付け加える4 おまけ : C ...

【Flutter】ボタンタップ時に展開するアニメーションがしたい!

1 はじめに2 Flowウィジェット2.1 Animation2.2 AnimationController3 実装4 さいごに5 おすすめ書籍 はじめに Flutterでボタンなどを設置するのはとて ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

フォロー

blog-page_side_responsive

2022年12月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

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