mongolyyのブログ

開発(Javascript, Typescript, React, Next.js)や開発手法(スクラム, アジャイル)、勉強したことについて色々書ければと。

「Reactハンズオンラーニング」を読んだ

React 読書

はじめに

普段はReact、Next.jsを使っているmongolyyです。
最近同僚から薦められて「Reactハンズオンラーニング」という本を読みました。
すごく良かったのでその記録を残しておきたいと思います。

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

Amazon

タイトルを見たときは、Reactの入門書かなと思ったのですが、中身を読んでみると「関数型プログラミング」から始まり、「Suspense」「SSR」まで掲載されており、初級者が中級者にステップアップするため、中級者も読み応えのある本でした。

むしろ、完全な初心者の方はハードルが高い一冊かもしれません。

わかったこと

制御されたコンポーネントと非制御のコンポーネントの違い

今までは、「制御されたコンポーネントのほうがリアルタイムにバリデーションがされてユーザー体験がいいので、制御されたコンポーネントがおすすめだよ」くらいの薄い理解でした。
本書を読んで、理解が広がり、

  • 制御されたコンポーネントの場合、DOM操作はReactにより制御される
    • 私見ですが、これによりReactのルールに従ってコードを書くことになり、バグが減ったり、Reactによるパフォーマンス改善の恩恵を受けやすくなるのでは、と思っています
  • 制御されたコンポーネントは再描画されると思っていたが、propsやstateが変わっているかなどで、reconcilerがレンダーするかどうか判定するので、必ずしもパフォーマンスが悪くなるわけではない
    • ただし、関数コンポーネント自体は毎回呼ばれるので、関数コンポーネント内に重い処理を書かないほうがいい
      • useMemo, useCallbackを使うことである程度は回避可能だと思われる
  • 非制御のコンポーネントは xxx.current.value = 'hoge' のような代入が入ってきて、ミュータブルになってしまう（宣言型を重視するReactの意に反してしまう）

等ということがわかりました。

サスペンス

今まで、ローディングがよしなに処理されるやつでしょーくらいで思っていましたが、ErrorBoundaryと合わせて学んだことで、一気に理解が深まりました。

サーバーサイドReact

サンプルコード含めて丁寧に説明してありました。
自分はNext.jsのコードも少し眺めて、本書で書かれていることと似たようなことが実装されていることも確認しました。
Next.jsを使われる方は、この章読むといいと思います。

おわりに

トピック自体は、Reactの公式ドキュメントにも記載がある内容も多いですが、違う角度であったり、サンプルコードも豊富で理解が深まりました。
脱初級者を目指す方、中級者で理解を深めたい方におすすめしたい一冊でした。
みなさんも是非読んでみてください。