このページ内容は2022年9月9日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
ライブラリ編
link
React18

ついにReact 18が正式リリースされました。自動バッチ処理、Transitions, Suspenseのサーバーレンダリング対応など面白い機能が多く追加されましたreact18

また、厳密には別ものだと思いますが、Vue.jsにおけるKeepAlive配下のv-ifのような、stateの状態を保持したままUIの一部を追加・削除できる <Offscreen>コンポーネントが追加される予定ですreact18_offscreen

この影響で、strictモードではコンポーネントをマウント -> アンマウント -> (同じstateを使い) マウントするようになりますreact18_strict_mode。このため、useEffectが2回実行 (発火 -> クリーンアップ関数実行 -> 発火) されたりと挙動が変わりました。この辺りの話はWEB+DB PRESS Vol.129の「Reactの深層」というコラムが非常に詳しいので、おすすめですwdpress

その他にも、React18になったことで、型定義の方も更新され、FCでの暗黙的な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" />

自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典13 (2022.9.10 - 2022.9.25) で本を出しました。
2022年の1月から8月ぐらいまでに登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2022part1
XMind8ファイルをMarkdownファイルに変換するツールを作りました。
公式のxmind-sdk-jsのバージョンを下げて作ってます (最新版だと一部メソッドが削除されてるため)。
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧