ライブラリ編

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" />