ReactのConcurrent Mode（並列モード）をTypeScriptで使う方法

現時点でまだ正式リリースされていない、ReactのConcurrent ModeをTypeScriptで試す方法のメモです。

型関連でエラーが出ることが多いので、その対処方法をメモ書きとして記載しました。

インストール

create-react-appでTypeScriptのテンプレートを作成し、それにConcurrent Modeを追加しました。

インストールは下記のような感じ。正確には公式ドキュメントを参照してください。

create-react-app my-app --template typescript
npm install react@experimental react-dom@experimental

型定義ファイルの読み込み

my-app/src/react-app-env.d.tsを下記に編集

/// <reference types="react-scripts" />
/// <reference types="react-dom/experimental" />
/// <reference types="react/experimental" />

利用

ハマりポイント

あくまで実験的ライブラリなので、公式ドキュメントの情報が古かったりします。

正確な型定義ファイルは下記にあるので、公式ドキュメントのコードをコピーして型エラーがでるようなら定義ファイルに合うよう都度編集します。

my-app/node_modules/@types/react/experimental.d.ts
my-app/node_modules/@types/react-dom/experimental.d.ts

とりあえず動いたファイルをサンプルとして記載しておきます。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.unstable_createRoot(
    document.getElementById('root') as Element
).render(<App />);

reportWebVitals();

App.tsx

import React, { unstable_useTransition } from 'react';

function App() {
    const [startTransition, isPending] = unstable_useTransition();
    return (
        <div>App</div>
    );
}

export default App;