React Hooks は最初は何が嬉しくてこんな書き方をしないといけないのか訳がわからなかったけど、しばらく使ってみた実感として大きなメリットは2つで

• クラスを使わなくて良くなる
• コンポーネントのステートやライフサイクルに結合していた処理を Hooks 関数の形で切り出して、複数のコンポーネントで使い回せるようになる

と理解した。

クラスを使うのがなんで辛いかは下の動画でも言われているけど、端的に言うと Hard for humans であること。this がむずいし bind が大変。

後者の話は Custom Hooks を使ったり書いたりしてみると分かりやすいけど、例えば次のようなコンポーネントの State を操作するようなロジックが関数としてコンポーネントと切り離して定義できるのが嬉しいということ。

クラスで定義されたコンポーネントだとどうしても this.state や this.setState を使って書くことになるため、コンポーネントクラスと密結合な実装になり、ポータブルに他のコンポーネントでも使い回せる処理として切り出すことが難しい。

逆に Hooks のデメリットというか入門のハードルとして、インターフェイスを見ただけだと内部実装のブラックボックス感が強くて挙動がよく分からないのがしんどかった。

このあたりの記事を読むと Hooks の気持ちになれて、モヤモヤせずに書けるようになったのでおすすめ。

個人的にファンである Netlify のブログ。Hooks 自体のミニ再現実装をしながら丁寧に解説してくれている。

こちらもそんな感じで丁寧な図解をしてくれている。

躓きがちな useEffect にフォーカスを当てた長編記事。これは読まなくてもいい気がするけど面白い。

クラスコンポーネントでも機能的には困らないけど、これからエコシステムも Hooks 中心になっていくだろうから、自分で書く実装も Hooks を使っていくのが良さそう。

あと Hooks には依存配列ってやつがあるけど僕はあれの書き漏らしを無限にやって無限にハマってたので React Hooks のルールをチェックしてくれる Linter は必須だった。すぐに入れるべき。