React v18への更新を試みる

React v18が正式リリース！

React v18がnpmで更新できるようになったようです。

reactjs.org

手元でv17の環境を持っていたので、こちらを最新のものに更新してみました。

何も考えずに更新してみる

普段、パッケージ更新に関しては npm-check-updates という更新確認ライブラリを用いています。

今回も慣例に従ってこちらを実施してみました。

% ncu -u // 最新パッケージの確認
Using yarn
Upgrading /Users/ttaniguchi/product/package.json
[====================] 48/48 100%

 react        ^17.0.2  →  ^18.0.0     
 react-dom    ^17.0.2  →  ^18.0.0     

Run yarn install to install new versions.

% yarn install

   :

success Saved lockfile.
✨  Done in 2.79s.

そのままビルドしたところ問題なく動きました。

v17への更新時、いくつかのライフサイクルが廃止となりましたが、v16からの更新過程にwarningで通知してくれていました。おそらく今回も、日頃から警告に準じた対応をしていれば極小の修正で済むようになっていたのではないかと思います。

（そういえば、いつの間にかライフサイクルなんて使わなくなってました…）

一点、更新後に以下の警告が表示されていました。

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more https://reactjs.org/link/switch-to-createroot

ReactDOM.renderはReact18では推奨されなくなり、代わりに createRoot を使用するようになったようです。 とはいえ、新しいAPIに切り替えるまではReact17と同様に振る舞います。

廃位互換も素晴らしいです。

警告箇所の対応

こちらを修正しないと更新の恩恵にはあずかれないようなので対応します。警告に出たとおり、こちらに書かれている内容を取り込めば大丈夫です。

reactjs.org

修正前

import { render } from 'react-dom'; // 廃止になりました

  :

render(
  <Component />
  document.getElementById('app'),
);

修正後

import { createRoot } from 'react-dom/client'; // 今後はこちらを使う

  :

const container = document.getElementById('app') as HTMLElement; // tsの場合は型を断言しておく
const root = createRoot(container);
root.render(
  <Component />
);

以上の対処で警告は消えました。

GitHubの記述にもありますが、こちらは平行モード実装のためのリプレイスであるとのこと。 rootという概念でDOMを掴み続け、改めて呼び出すことなく再描画等の処理が実施できるようです。

今回の更新では createRoot と併せて hydrateRoot が描画コンテナを再利用するために提供されています。

Software Design (ソフトウェアデザイン) 2022年02月号 [雑誌]

総括

今回はアップデートまでやってみましたが、また別で新しい機能を調べてみたいと思います。

v18では平行モードにレンダリングや、SSRを視野に入れた更新が含まれるそうです。（サーバーコンポーネントは開発中とありますが） html上はSPAとしてはエントリーのrenderを書いたらおおよそ更新しない〜というのがザラでしたが、描画要素の分散やMPAによる構成管理など視野に入り、今後はhtmlが主戦場になっていくかもしれませんね。（原点回帰感ある）

いずれにしてもv18の敷居は低いので、早々に更新しておくと良さそうです！