How to use Concurrent Mode of React with TypeScript

This is a note on how to try React's Concurrent Mode in TypeScript, which is not yet officially released at this time.

Since type-related errors often occur, we have included a note on how to deal with them.

install

Create a TypeScript template with create-react-app and add Concurrent Mode to it.

Installation is as follows. Please refer to the official documentation for exact details.

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

Reading type definition files

Edit my-app/src/react-app-env.d.ts as follows

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

use

Hammer Point

Since this is only an experimental library, information in the official documentation may be out of date.

The exact type definition file is shown below, so copy the code from the official document and edit it each time to match the definition file if type errors occur.

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

For now, we will describe a file that worked as a sample.

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;

Welcome to new things

[Technical] [Electronic work] [Gadget] [Game] memo writing

How to use Concurrent Mode of React with TypeScript

install

Reading type definition files

use

Hammer Point

index.tsx

App.tsx

install

Reading type definition files

use

Hammer Point

index.tsx

App.tsx

Related Category Articles