EY-Office ブログ

React Hooksの生態系(エコシステム)

Reactの教育で Hooks の説明をしていて、awesome-react-hooks というGitHubページを見て React Hooks が Reactの新しい機能を超えて、新しい生態系を生み出しているのではと感じたので書きます。

awesome-react-hooks

以前 Reactの変化(最近のReactの動向) に書いたように HooksReact.Component を継承した クラス型のコンポーネント でないと実現出来なかった state(状態)を持つことやライフサイクルメソッド等を、容易に書ける 関数型のコンポーネント で実現出来る機能だと思っていました。

Hooks は カスタムフックの作成 する事ができます、これを使って Redux を使い易くする Redux Hooks など 有用で有名なカスタムフックが提供されています。このようにカスタムフックはReduxのようなフレームワーク制作者達が提供するものだろうと思っていました。

しかし、awesome-react-hooks ページの Packages に膨大なカスタムフックのリストを眺めてみると Hooks の新たな使い方が理解出来ました。

例えば、

などのように、Reactアプリを作ると必用になる便利機能(関数)が多数あります。Reactはコンポーネント思考でUI要素はコンポーネントととして再利用できますが、上のような便利関数を共有する為の場所(生態系) がありませんでした。もちろん npm というパッケージを公開・共有する場所はありますが汎用すぎて Reactの上で効率的に動くものを探すのは難しい状況だったと思います。

このようなカスタムフックは、内部ではstateやライフサイクルメソッド等のReactの機能を使って実装されている Reactにふさわしい便利機能(関数)です。
このようにカスタムフック(Hooks)の生態系(エコシステム)が育っているこに驚いています。

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ