本記事は、Simon Holdorf氏による「8 Awesome React Hooks」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。
すごいReactフック8選
はじめに
React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。
Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。
ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。
1. useTimeout
宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取るカスタムフックを作成します。次に、useRefフックを使用して、コールバック関数の参照を作成します。最後に、useEffectを2回使用します。1回は最後のコールバックを記憶するため、1回はタイムアウトの設定とクリーンアップのためです。
これは、タイマーの実装例です。
2. usePrevious
アプリケーションで使用できる素晴らしいカスタムフックです。プロップや以前の状態を保存できます。まず、値を受け取るカスタムフックを作成します。次に、useRefフックを使用して、その値の参照を作成します。最後に、useEffectを使用して最新の値を記憶します。
これは、カウンターの実装例です。
3. useClickInside
ラップされたコンポーネントの内側をクリックするイベントを処理する場合は、useClickInsideフックが適しています。まず、クリックイベントを処理するために参照とコールバックを受け取るカスタムフックを作成します。次に、useEffectを使用して、クリックイベントの追加とクリーンアップを行います。最後に、useRefを使用して、クリックするコンポーネントの参照を作成し、それをuseClickInsideフックに渡します。
4. useClickOutside
useClickOutsideフックは、useClickInsideフックと非常に似ていますが、ラップされたコンポーネントの内側ではなく外側のクリックを処理します。ここでも、クリックイベントを処理するために参照とコールバックを受け取るカスタムフックを作成します。次に、useEffectを使用して、クリックイベントの追加とクリーンアップを行います。最後に、useRefを使用して、コンポーネントの 参照を作成し、それをuseClickOutsideフックに渡します。
5. useFetch
宣言型アプローチでfetchを実装できます。まず、useStateを使用して、応答／エラー状態変数を初期化します。次に、useEffectを使用してfetchを非同期に呼び出し、状態を更新します。最後に、応答／エラー変数を含むオブジェクトを返します。
これは、Star Wars APIからキャラクターをfetchし、その名前をレンダリングする方法の例です。
6. useInterval
宣言型アプローチでsetIntervalを実装できます。まず、コールバックと遅延を受け取るカスタムフックを作成します。次に、useRefを使用して、コールバック関数の参照を作成します。最後に、useEffectを使用して最後のコールバックを記憶し、間隔の設定とクリーンアップを行います。
これは、ブラウザゲームで使用できるカスタムResourceCounterの実装例です。
7. useComponentDidMount
コンポーネントがマウントされた直後にコールバックを実行します。2番目の引数に空の配列を指定してuseEffectを使用するだけで、コンポーネントがマウントされた直後に指定したコールバックを1回実行します。
8. useComponentWillUnmount
useComponentWillUnmountはuseComponentDidMountと似ていますが、コンポーネントがアンマウントされた直後にコールバックを実行します。2番目の引数に空の配列を指定してuseEffectを使用し、クリーンアップの直前に指定したコールバックを実行します。
おわりに
以上、アプリケーションで使用できるカスタムReactフックのお気に入りの一部でした。
記事を気に入ったらTwitterでフォローしてください。プログラミング、制作、執筆、キャリアについてもっと学べます🥰
翻訳協力
この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。
Original Author: Simon Holdorf (@simonholdorf)
Original Article: 8 Awesome React Hooks
Thank you for letting us share your knowledge!
選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen
ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。Twitterでもご意見を受け付けております。
皆様のメッセージをお待ちしております。