Effective React Hooks を読んだ

Hooks を使うようになって3 ヶ月ぐらいが過ぎ、カスタム hook を作ったり、hook のテストを書いたりというのは無難にこなせるようになってきたが、どうしてもまだ雰囲気で書いているところが多いので、少し掘り下げたくて手にとった。

とてもコンパクトな本だったので、全体で 2 時間もかからず読めたと思う。1 日 30 分ぐらいで平日 5 日は使っていない。

関数コンポーネントと Hooks 関数

React 自体を仕事で書き始めたのが3 月ぐらいからなので、その時すでに Hooks は存在し、class 型のコンポーネントを使って書くということも最初から選択肢になかった。（新規だったので）

この辺、第一の雰囲気ポイントだが、class 型のコンポーネントと違って、関数コンポーネントは明確にライフサイクルというのが無いので、「何度でも呼び出される」ということを正しく認識できていなかったこと。

なので 2 章で「関数型コンポーネントでは、基本的には関数自体に直接コードを書くべきではありません。何かしらの Hooks 関数経由で処理を書く必要があります」と書かれていて「な、なんだってーーーーー」となりました。

もっと頭を柔らかくして作る

凝り固まっていたという訳ではないが、経験が浅いのもあいまって、どうしても「どこかで見た書き方」をなぞってしまう。

なので、本書で React.FC を引数に取るコードをみて、「そ、それでよかったのか。。」という、これまでなにか頭の悪い方法で対処していた箇所が出てきたりした。

React というのをお作法に則らないと動かない怖いものとどこかで思ってるから、こういう「関数なんだから当然渡せる」という考えがどこかで捨てられてしまっている。いかんなぁ。

useState とコンポーネント

直接にしろ、関節にしろステートに依存するコンポーネントは、ステート更新があると、そのコンポーネント関数自体も呼び出される。

この辺は Fiber の解説記事なんかも読んで、なんとなーーーく脳内では分かっていたつもりだったけど、「関数自体が呼び出される」という認識に至っていなかった気がする。

このあたりで useMemo や useCallback の役割や存在意義について、多少点と点がつながってきた感があり良かった。

全体的に Frontend Masters の Complete Intro to React から、いくばくか自分の理解が進んで学びが合った。Complete Intro to React だと、useMemo とか useCallback とかは説明はされたけど「まあ、普通に作る分には覚えなくてもいいよ」みたいな言い方をされていたので、ちょっと印象が変わった。

React に対して

個人の感想だが、React なり webpack なりに手慣れたメンバーが一人でもいないと、正直導入は難しいだろうなと思っている。実際、今結構苦しんでいる。

Create-React-App で作ればいいようなケースでも無い、でも Webpack に精通している訳でもない、にも関わらず IE11 に対応しなければいけない、表示データが多い、認証・認可基盤が整っている訳でもない。ともなると、よくある React の tutorial レベルではとても太刀打ちできない。

まあ、個人としては、React という訳ではなく、フロントを改善するための手札はそれを利用する条件がなにかも含め、手札として押さえておきたいので、引き続きちょろちょろ見ていこうかなと思う。

余談だが、TypeScript に苛つかされるケースはたまにあるけど、Jest が思いのほか気に入っている。