ReactDOMの最新バージョンで更新されていること

はじめに
ReactDOM
将来的にサポートされなくなる
最新バージョン - React 18
- パッケージが２種類
- render()ではなくcreateRoot()を使用する
続く…
- コメント

はじめに

Reactのアップデートに伴いReactDOMも知らぬ間に変更があったようなので見ていました。

ReactDOM

react-dom パッケージではアプリのトップレベルで使うための DOM 特有のメソッドを提供しています。

React要素をDOMにレンダリングしたりすることでReact要素を使用して、コンポーネントベースのアーキテクチャを活用して、柔軟で再利用可能なUI構築できます。

ReactDOMという名前でインポートする例です。

import ReactDOM from 'react-dom';

上記のようにReactDOMのメソッドを呼び出すことが出来ます。

アップデートに伴い今後サポートされなくなるメソッドについてみています。

以下の react-dom メソッドもエクスポートされていますが、これらはレガシーです：

[render()](https://ja.legacy.reactjs.org/docs/react-dom.html#render)

[hydrate()](https://ja.legacy.reactjs.org/docs/react-dom.html#hydrate)

[findDOMNode()](https://ja.legacy.reactjs.org/docs/react-dom.html#finddomnode)

[unmountComponentAtNode()](https://ja.legacy.reactjs.org/docs/react-dom.html#unmountcomponentatnode)

将来的にサポートされなくなる

findDOMNode - 非推奨

指定されたReactコンポーネントのDOMノードを取得するために使用されます。

findDOMNodeはReactのパフォーマンス最適化やコンポーネントの再利用性を妨げる可能性があるため、可能な限り使用を避けることが推奨されています。

代わりに、ref属性を使用してDOMノードへの参照を取得し、必要な場合に直接操作することが推奨されています。

hydrate

サーバーレンダリングされたHTMLをクライアント側で再度レンダリングするために使用されます。

通常、サーバーサイドで生成されたHTMLをクライアント側でReactによる動的な振る舞いを追加する場合に利用されます。

hydrateRootが推奨されるようになりました。

render

React要素を指定したDOMノードにレンダリングするためのメソッドです。

[createRoot](https://react.dev/reference/react-dom/client/createRoot)が推奨されるようになりました。

unmountComponentAtNode

指定されたDOMノードからReactコンポーネントツリーをアンマウント（削除）するためのメソッドです。

最新バージョン - React 18

パッケージが２種類

react-dom パッケージはクライアント専用モジュールとサーバ専用モジュールも提供しています。

[react-dom/client](https://ja.legacy.reactjs.org/docs/react-dom-client.html)

[react-dom/server](https://ja.legacy.reactjs.org/docs/react-dom-server.html)

render()ではなくcreateRoot()を使用する

createRoot()を使用してルートを作成し、それに対してrenderメソッドを呼び出すことでコンポーネントをレンダリングします。

従来のルートAPIでは、更新時に親要素を毎回渡す必要がありましたが、それがなくなります。

React 17までの書き方は以下。

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";import App from "./App";const rootElement = document.getElementById("root");
const root = createRoot(rootElement);root.render(
  <StrictMode><App /></StrictMode>
);

React 18からは以下のような書き方が推奨されます。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

アプリがサーバーレンダリングされている場合、createRoot()はサポートされていないため、代わりに[hydrateRoot()](https://react.dev/reference/react-dom/client/hydrateRoot)を使用する必要があります。

参考: https://react.dev/reference/react-dom/client/createRoot

続く…

本記事の内容は以上になります！

書籍の続きのアウトプットも随時更新したいと思います。

プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky

Yanonoblog!

こつこつと