新機能 - 自動バッチ処理の更新

自動バッチ処理は、複数のstateの更新を、1回の再レンダリングでグルーピングする機能です。

React18以前はsetTimeoutやイベントハンドラでのstate更新は、stateを更新するたびに再レンダリングが起きていた。

1
// 以前はsetCountとsetFlagで2回レンダリングしていた
2
setTimeout(() => {
3
  setCount(c => c + 1);
4
  setFlag(f => !f);
5
}, 1000);
6

7
// React18ではsetCountとsetFlagの更新を、1回のレンダリングでまとめるようになった
8
setTimeout(() => {
9
  setCount(c => c + 1);
10
  setFlag(f => !f);
11
}, 1000);

新機能 - Transitions

すぐに反映する必要があるものと、そうでないものを区別できるようになった。 キー入力やクリックでstateが更新されるときに、すぐに反映する必要がないものはstartTransitionで囲んで使うことで、中断できるようになった。

1
import {startTransition} from 'react';
2

3
// 入力された値を表示 (すぐに反映される)
4
setInputValue(input);
5

6
// 入力した値で検索 (すぐに反映されない)
7
startTransition(() => {
8
  setSearchQuery(input);
9
});

新機能 - Suspenseのサーバーレンダリング対応

Suspenseはデータの取得中状態を宣言的に記述するためのコンポーネントです。 Suspenseはpromiseをthrowされたときに、fallbackで指定した要素を返し、データが取得できると、Suspenseで囲んだ要素を返すことができる。 生のReactではpromiseをthrowさせるには追加のコードが必要で、RelayやSWRなどのライブラリを併用することが推奨されている。

1
<Suspense fallback={<Spinner />}>
2
  <Comments />
3
</Suspense>

Strictモードの挙動変更 開発時はコンポーネントがマウントされるたびに、全てのコンポーネントを自動的にアンマウント、再マウントし、2回目のマウントで表示するようになった。 将来的に、ステートを維持した状態でUIのセクションを追加・削除する機能を追加する予定で、複数回のマウント・アンマウントに強いコンポーネントが必要なためだそうです。

Functional Componentで暗黙的なchildrenが削除された。

1
import * as React from 'react';
2

3
const Input: React.FC = ({ children }) => <div>{children}</div>;
4
//                         ^^^^^^^^ will error with "Property 'children'
5
//                                  does not exist on type '{}'.
6
<Input>children</Input>;

以下のように明示的に書く必要がある。

1
import * as React from 'react';
2

3
interface InputProps {
4
    type: string;
5
}
6

7
const Input: React.FC<InputProps> = ({ type }) => <input type={type} />;
8

9
<Input type="search" />;

RomeはBabel, ESLint, Webpack, Prettier, Jestの代替を目指しているオールインワンツールで、TypeScript, HTML, CSSなどのフォーマッターかつ、リンターかつ、バンドラーの役割を目指しているツールです。

Rustでの再実装を進めており、今回フォーマッターとしての機能が使えるようになりました。 VSCodeのプラグインも配布されています。

Rome Formatterとprettierの挙動の違い

Rome Formatterでは、エラーリカバリーを強化しています。

例えば、4行目に構文エラーがあっても、6行目のフォーマットが効きます。 Prettierの場合は4行目の構文エラーが原因で、6行目のフォーマットが効きません。

フォーマットを当てる前

フォーマットを当てた後

Rome Formatterとprettierの処理速度の違い

規模の大きなOSSに対してフォーマットをかけた時の速度を測定しているそうです。

規模の大きなOSSとして、ESLint, Webpack, TypeScriptを選らんで実施したそうです。 Rome FormatterはPrettierと比較して、9-12倍高速だそうです。

認証タイプは2通りあり、「認証されたIAMユーザーのみアクセス許可」「全ユーザーにアクセス許可」を選べるようになった。

また、オプションでCORSヘッダーも設定できる URLの形式はこのような感じ

1
https://xxxxx.lambda-url.ap-northeast-1.on.aws/