新しいことにはウェルカム

技術 | 電子工作 | ガジェット | ゲーム のメモ書き

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;

関連カテゴリー記事

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com