工事中

Scraps一覧
Open TOC
2022年4月9日
ハイライト

React18リリース

Reactの型定義更新!

Rome Formatterリリース

AWS LambdaでURLの発行が可能に

React18リリース
2022年5月8日
tagReact
詳細を開く
link

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

自動バッチ処理は、複数の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);
link

新機能 - Transitions

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

1
import {startTransition} from 'react';
2
3
// 入力された値を表示 (すぐに反映される)
4
setInputValue(input);
5
6
// 入力した値で検索 (すぐに反映されない)
7
startTransition(() => {
8
setSearchQuery(input);
9
});
link

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

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

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

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

React 型定義更新
2022年4月19日
tagReact
詳細を開く

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 Formatterリリース
2022年4月19日
詳細を開く

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

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

vscode-rome

link

Rome Formatterとprettierの挙動の違い

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

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

フォーマットを当てる前

before-rome-format

フォーマットを当てた後

after-rome-format

link

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

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

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

format-speed
AWS LambdaでURLを発行できるようになった
2022年4月19日
詳細を開く

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

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

1
https://xxxxx.lambda-url.ap-northeast-1.on.aws/
lambda-url-setting
自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
TailwindCSSv3やRailway, Partytown, Nextjs12なんかの紹介やChrome DevToolsやChrome Extensions Manifest V3などの話を書いてます。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識