React 18 調査

フロントエンドえんじにゃー 2023/06/21に更新

やりたいこと

以下の調査

Suspense
Lazy loading
その他18の追加機能
React 17との差分

フロントエンドえんじにゃー 2023/06/21に更新

上記によると、React18の具体的な新機能は以下

レンダリングのバッチ化
- 複数の状態更新による再レンダリングをまとめて実行
- パフォーマンス向上
トランジションの導入
- 再レンダリングを非同期で処理が可能になった
- ユーザーの操作を阻害せずに重いレンダリングを裏側で実行可能になった
- startTransition
- useTransitionでisPendingを取得可能
- isPendingを利用することで、ローディング表示を切り替えることができる
<Suspense/>のサーバサイドレンダリング対応

フロントエンドえんじにゃー 2023/06/21

import {startTransition} from 'react';

// 同期
setInputValue(input);

// 非同期
startTransition(() => {
  setSearchQuery(input);
});

フロントエンドえんじにゃー 2023/06/21

メモ
Suspense, lazyloadが使えていないだけでなく、useMemoを雰囲気で使ってしまっている為、
Reactのパフォーマンスについての解像度が低い。

フロントエンドえんじにゃー 2023/06/21に更新

React17とReact18の差分

React18へのバージョンアップについて

react-domのrender　→　react-dom/clientのcreateRoot()に変更

React 17

import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

React 18

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

React周辺パッケージのアップグレード

framer-motion	4 → 6
react-dnd	15 → 16
@testing-library/react	12 → 13

型の変更

React.FC の props に暗黙的に children が含まれなくなったので、該当箇所で children を明示。

型の固定

@types/react、@types/react-dom のバージョンを固定する。

フロントエンドえんじにゃー 2023/06/21

実際にReact18の環境を作って触ってみる

フロントエンドえんじにゃー 2023/06/21に更新

React.lazy？Lazy Import？lazy loading？

React.lazy、lazy import、lazy loadingなどのキーワードが出てくる

React.lazyとlazy importとlazy loadingがごっちゃになっていたけど、
React.lazyをつかったdynamic importをlazy importと呼んでいて、結果的にloadingがlazyになっているということで落とし込めた。