現時点でまだ正式リリースされていない、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;