Reactの教育で Hooks の説明をしていて、awesome-react-hooks というGitHubページを見て React Hooks が Reactの新しい機能を超えて、新しい生態系を生み出しているのではと感じたので書きます。
以前 Reactの変化(最近のReactの動向) に書いたように Hooks は React.Component を継承した クラス型のコンポーネント でないと実現出来なかった state(状態)を持つことやライフサイクルメソッド等を、容易に書ける 関数型のコンポーネント で実現出来る機能だと思っていました。
Hooks は カスタムフックの作成 する事ができます、これを使って Redux を使い易くする Redux Hooks など 有用で有名なカスタムフックが提供されています。このようにカスタムフックはReduxのようなフレームワーク制作者達が提供するものだろうと思っていました。
しかし、awesome-react-hooks ページの Packages に膨大なカスタムフックのリストを眺めてみると Hooks の新たな使い方が理解出来ました。
例えば、
- @rehooks/window-size ブラウザーの画面サイズを取得出来るHooks
- react-hooks-image-size 画像の大きさを取得出来るHooks
などのように、Reactアプリを作ると必用になる便利機能(関数)が多数あります。Reactはコンポーネント思考でUI要素はコンポーネントととして再利用できますが、上のような便利関数を共有する為の場所(生態系) がありませんでした。もちろん npm というパッケージを公開・共有する場所はありますが汎用すぎて Reactの上で効率的に動くものを探すのは難しい状況だったと思います。
このようなカスタムフックは、内部ではstateやライフサイクルメソッド等のReactの機能を使って実装されている Reactにふさわしい便利機能(関数)です。
このようにカスタムフック(Hooks)の生態系(エコシステム)が育っているこに驚いています。
