WEB+DB PRESS Vol.129「Reactの深層」の感想

第1章「フックが築いたReactの"常識"」

Reactの特徴（コンポーネントと宣言的UI）とクラスコンポーネントから関数コンポーネントへの時代の移り変わりについて書かれた章。

Reactの特徴について、コンポーネントと宣言的UIは公式でも一番最初に記載されているReactの基礎となる概念で、その中でも宣言的UIは言語化が難しいと思っていましたが、本特集では命令的UIとの対比でうまく言語化がされていて、今まで読んだ宣言的UIの言語化の中で一番わかりやすかったと思います。
ここではその詳細は省きますが、自分の理解では「それぞれの状態に対応するUIと状態変化の2点について記述するだけでよい」というのが宣言的UIの本質的価値なのかなと思いました。

クラスコンポーネントから関数コンポーネントへの時代の移り変わりについて、自分はクラスコンポーネントを保守や改修で触ったことはあったので、基本的な書き方については理解していましたが、最近Reactを始めた人はクラスコンポーネントを触る機会がないと思うので、どのように書き方が変わったかを対比しつつ読めるのでよいなと思いました。

Yutaro Adachi

第2章「ReactのAPIに込められた思想」

フックのAPIから読み解かれたReactの思想について書かれた章。

基本的にはクラスコンポーネントと関数コンポーネントの書き方を対比しつつ、Reactの思想が解説されています。
個人的に面白いなと思ったのは、useEffectの依存配列についての解説です。

これは「依存配列にしたがってよしなにやってくれ」という宣言であり、「マウント時にやってくれ」という具体的な指示に比べて宣言的度合いが増しています。

ここでいう「マウント時にやってくれ」というのはクラスコンポーネントのcomponentDidMountなどのAPIのことですが、この箇所の筆者の着眼点はすごいなと思うと同時にこういった細かい部分のAPIの設計で思想を表現しているReactのすごさも感じました。

Yutaro Adachi

第3章「React 18の新機能」

Concurrent RenderingとSuspenseを中心にReact 18の新機能について書かれた章。

Suspense（とErrorBoundary）について、従来でもSWRのようなライブラリを使用すれば一部宣言的に書けていた外部データ取得処理がより宣言的に書けるようになるのは嬉しい。
SWRのドキュメントを見るとまだ実験的な機能って書かれてるな…？

before

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

after

import { Suspense } from 'react'
import useSWR from 'swr'

function Profile () {
  const { data } = useSWR('/api/user', fetcher, { suspense: true })

  return <div>hello, {data.name}!</div>
}

function App () {
  return (
    <ErrorBoundary fallback={<div>failed to load</div>}>
      <Suspense fallback={<div>loading...</div>}>
        <Profile />
      </Suspense>
    </ErrorBoundary>
  )
}

引用元: https://swr.vercel.app/ja/docs/suspense

その他にもStreaming SSR、トランジション、React Server Componentsが紹介されています。
この辺りがどんどん使われるようになるのはまだ先だと思いますが、開発難易度の上昇とともによりフロントエンドの専門性が上がりそうだなと思いました。

Yutaro Adachi

第4章「React 18で起きた"常識の破壊的変更"」

React 18の新機能を使用する上で従来の書き方と相容れないものについて書かれた章。

React 18のStrictModeでのuseEffectの挙動について、Reactの将来のバージョンで追加される機能と併せて紹介されています。
useEffectをどう使用するかについての考え方をバージョンアップする必要があるなと思いました。

もう一つはレンダリングの最適化という目的で使用する場合のuseRefについて、トランジションの登場によって状況が変化したことが紹介されています。
こちらはそのような目的でuseRefを使用したことがなかったので、へぇ〜と思いながら読みました。

Yutaro Adachi

第5章「React 18になっても変わらない宣言的UIの思想」

特集のまとめとしてReactの根底にある思想とその思想を正しく理解する方法について書かれた章。

useEffectやESLintのルールから垣間見えるReactの思想について紹介されています。
そしてさらにその思想を踏まえた上でどういう実装・設計をするのが適切かという考えが提示されています。
筆者のReactの思想への深い理解に脱帽すると共に、強い思想を持ったライブラリと言われるReactだからこそ、使用者側もしっかりとその思想を理解した上で使用することが重要なんだなと思いました。

Yutaro Adachi

感想

React 18の新機能だけではなく、過去のReactと現状のReactの書き方の違いから今後のReactとの向き合い方までがコンパクトにまとまったよい特集だなと思いました。

なのでReact 18の新機能について知りたい人だけではなく、Reactを使用している人なら読んで損はないのではと思います。

個人的には第1章で宣言的UIとは何ぞやの部分の理解度が上がったのが一番の収穫でした。
React 18の新機能はまた読み返したいなー。

このスクラップは2022/12/29にクローズされました