React18からはレンダリングにcreateRootを使おう
Reactで開発をしようと思って、なんの気なしにcreate-react-appでプロジェクトを開始したらなにやら警告が。
どうやらReact18からはレンダリングの関数が変わったみたい。
初学者泣かせのこの警告ですが、親切に解決のためのURLを提示してくれています。
ありがとうReactを開発してくれている皆様…！
ということで、今回はこの警告を回避してv18以降の開発に順応していくため、公式ページを参考にしながらレンダリングの新しい書き方を共有します。
英語が苦でないかたはぜひ以下の公式ページをご覧ください。
React18からはReactDOM.render()の代わりに"createRoot()"を使おう
v17までの書き方は以下。
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App />, container);
そして、v18からは以下の書き方が推奨されるそうです。
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);
ちなみに、create-react-appのバージョン5.0.1でcreateRoot()に対応していました。
今後は思考停止create-react-appでもひとまずよさそうで初心者（ぼく）も安心。
createRoot()を使用する意味
公式ページには次のようにありました。
The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.
↓意訳
新しいrootAPIは新しい並行レンダラを有効にします。それにより、並行処理機能が使用可能になります。
ざっくりとした理解ですが、v18から追加された新機能である並行処理の機能群にアクセス可能になる、ということみたいです。
で、 並行処理の機能群が何かというのは…すみません公式ドキュメントの紹介に留めさせてください。
大事なのは並行処理機能が使えることで何が嬉しいのかです。
並行処理を導入することで、レンダリングの途中でもユーザが操作できるようになり、ユーザ体験が向上するなどのメリットがあるようです。
もちろん、この新しいcreateRoot()を使わなくても今までのコードも正しく動作します。あくまでオプトイン（選択肢が増えた！）ということで、「並行処理を使いたい人はこっち！（というか今後はこっち使えば間違いない）」と理解しました。
メンテナンスコストとの兼ね合いではありますが、折を見て段階的に導入していきたい…というタイプの機能だと思います。
Discussion