🌟

React フックに入門してみたので所感を書く

2020/11/23に公開

React フックとは？

フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。

今までもクラスコンポーネントと関数コンポーネントという概念はありました。それらは今までどのように使い分けていたでしょうか？
おそらく、「関数コンポーネントで出来ないこと」があるからクラスコンポーネントを使って闇の深い this などと戦ってきたことと思います。

では、 「関数コンポーネントで出来ないこと」 とは何でしょう。
良く使うものでは以下の２つです。

これらを使うにはクラスコンポーネントを使うのが基本でした。

「関数コンポーネントで出来ないこと」を出来る限り無くそうということで生まれたのがフックという API です。
語源は、クラスコンポーネントの機能を関数コンポーネントに接続する(hook into)ということらしいです。

具体的にフックにすることで何が嬉しいのかは公式ドキュメントを参照するのが1番良いと思いますのでここではあまり述べません😅

見出しの通りです。
フックの公式ドキュメントをざっと読むと、「クラスコンポーネントじゃなくてよくね？」ということになります。
実際にフックを学習してからReact はボチボチ書いているのですが、クラスコンポーネントを1回も使っていません。

完全に使わなくて良いかというとそうでもないケースもごく一部あるようですが、誤解を恐れずに言えばもう クラスコンポーネントは使わない ぐらいに思っておいた方が変に迷わなくて良いのではないでしょうか。

React コードを書くのが簡単に、もっと楽しくなりました！！
それから、公式もハッキリ言及していますが、クラスコンポーネントを廃止するような予定は一切無いので安心して良いものの、これからのReactは基本的にフックを使ってコンポーネントを記述するのがデファクトスタンダードになりそうです。

長期的には、フックが React のコンポーネントを書く際の第一選択となることを期待しています。
https://ja.reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

フックは確かに便利だし、これからのスタンダードになろうとしていることも良く分かりました。

しかし既存のクラスコンポーネントが大量にあります。これらはフック（関数コンポーネント）に書き換えなくてはいけないのでしょうか？
あるいは、既にクラスコンポーネントを沢山使っているReact アプリケーションで、これから作成するコンポーネントから hook を利用するのは非推奨なのでしょうか？

いいえ。どちらもそんなことはありません。🙌

私がフックを学習していて良いなあと思ったのは、部分的にフックを導入できることをReact 公式が明言していることです。
一気に書き換える必要も無ければ、これから作るコンポーネントから試しに導入してみても良いのです。

クラスコンポーネントを全部書き換える必要があるのですか？
いいえ。React からクラスを削除する予定はありません — 我々はみなプロダクトを世に出し続ける必要があり、クラスを書き換えている余裕はありません。新しいコードでフックを試すことをお勧めします。

私もまだまだフックの使用には慣れていません。というよりReact 自体全くの初心者なので。。。😅
とはいえ、これからのスタンダードになろうとしているだけの理由はあるなと思いましたし、何よりコードを書くのが楽になります！

「フック使って見ようかな」と考えている方は是非学習してみることをお勧めします😁