React18リリース
Reactの型定義更新!
Rome Formatterリリース
AWS LambdaでURLの発行が可能に
自動バッチ処理は、複数のstateの更新を、1回の再レンダリングでグルーピングする機能です。
React18以前はsetTimeoutやイベントハンドラでのstate更新は、stateを更新するたびに再レンダリングが起きていた。
1// 以前はsetCountとsetFlagで2回レンダリングしていた2setTimeout(() => {3setCount(c => c + 1);4setFlag(f => !f);5}, 1000);67// React18ではsetCountとsetFlagの更新を、1回のレンダリングでまとめるようになった8setTimeout(() => {9setCount(c => c + 1);10setFlag(f => !f);11}, 1000);
すぐに反映する必要があるものと、そうでないものを区別できるようになった。 キー入力やクリックでstateが更新されるときに、すぐに反映する必要がないものはstartTransitionで囲んで使うことで、中断できるようになった。
1import {startTransition} from 'react';23// 入力された値を表示 (すぐに反映される)4setInputValue(input);56// 入力した値で検索 (すぐに反映されない)7startTransition(() => {8setSearchQuery(input);9});
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が削除された。
1import * as React from 'react';23const Input: React.FC = ({ children }) => <div>{children}</div>;4// ^^^^^^^^ will error with "Property 'children'5// does not exist on type '{}'.6<Input>children</Input>;
以下のように明示的に書く必要がある。
1import * as React from 'react';23interface InputProps {4type: string;5}67const Input: React.FC<InputProps> = ({ type }) => <input type={type} />;89<Input type="search" />;
RomeはBabel, ESLint, Webpack, Prettier, Jestの代替を目指しているオールインワンツールで、TypeScript, HTML, CSSなどのフォーマッターかつ、リンターかつ、バンドラーの役割を目指しているツールです。
Rustでの再実装を進めており、今回フォーマッターとしての機能が使えるようになりました。 VSCodeのプラグインも配布されています。
Rome Formatterでは、エラーリカバリーを強化しています。
例えば、4行目に構文エラーがあっても、6行目のフォーマットが効きます。 Prettierの場合は4行目の構文エラーが原因で、6行目のフォーマットが効きません。
フォーマットを当てる前
フォーマットを当てた後
規模の大きなOSSに対してフォーマットをかけた時の速度を測定しているそうです。
規模の大きなOSSとして、ESLint, Webpack, TypeScriptを選らんで実施したそうです。 Rome FormatterはPrettierと比較して、9-12倍高速だそうです。
認証タイプは2通りあり、「認証されたIAMユーザーのみアクセス許可」「全ユーザーにアクセス許可」を選べるようになった。
また、オプションでCORSヘッダーも設定できる URLの形式はこのような感じ
1https://xxxxx.lambda-url.ap-northeast-1.on.aws/