---
title: Async React  earlier than React 19
tags: 
author: [NishimuraWataru](https://docswell.com/user/_n13u_)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/47MY8Y9Q7W.jpg?width=480
description: このスライドは、個人的な見解に基づき、ReactにおけるTransitionとAsync Reactの全体像を説明します。UIは状態の関数として表現でき、awaitを用いた非同期的なUI計算やデータ取得の流れを示します。Transitionは UI 更新に優先度を付け、startTransitionやuseTransitionで非緊急の描画を後回しにする仕組みであり、Concurrent Mode が必要です。コード例を交えて、isPending で待機状態を取得する方法や、Transition が将来的にアニメーションを含む時間的変化全体を扱う概念になる意図を説明します。また、React Working Group の活動や React 18 の新機能、非同期レンダリングがもたらす応答性向上についても触れています。
published: April 09, 26
canonical: https://docswell.com/s/_n13u_/ZMQXGN-2026-04-09-012314
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/47MY8Y9Q7W.jpg)

Async React
earlier than React 19
@_n13u_ / 2026.04.08 / #hokkaido_ js
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/P7R959GKE9.jpg)

The contents of these slides are based on my own opinion.
このスライドの内容は、あくまで個⼈的な⾒解に基づきます
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJXQKQX57X.jpg)

Biography
●
●
●
●
●
●
n13u
Web Frontend Engineer
ちょっと株式会社プロダクト部エンジニア
Next.js / React enthusiast
4/20 フロントエンド・PHPカンファレンス北海道の勉強会があります
6/6 フロントエンド・PHPカンファレンス北海道
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/3JK959WRJD.jpg)

In React 19…
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LE3WKW1GE5.jpg)

Async React
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/8EDK3KXN7G.jpg)

6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/V7PK4KPNJ8.jpg)

Common React
ui = f(state)
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/2JVVXV2YJQ.jpg)

ui = f(state)
await ui = await f(await state)
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/5EGLVLRWJL.jpg)

9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JQY6YVQ7P.jpg)

10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/K74W4WMYE1.jpg)

Data Fetching
Interaction
Calculation
await ui = await f(await state)
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LJ1Y4Y8NEG.jpg)

12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/GJWGXGGM72.jpg)

13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/4EZL6LLM73.jpg)

14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/Y76W2WW57V.jpg)

15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/G75M2MMG74.jpg)

What’s Transition !?
●
UIの更新に優先度をつける
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/9J29499DER.jpg)

Today’s topic
Transition
tranˈziSH(ə)n
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/DEY4M44MJM.jpg)

import { startTransition } from 'react';
function TabContainer() {
const [tab, setTab] = useState('about');
遅延評価して、完了したら画面更新される
function selectTab(nextTab) {
startTransition(() .> {
setTab(nextTab);
});
}
// ...
}
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/VJNYWYY378.jpg)

isPendingで待機状態が取れる
function SubmitButton({ submitAction }) {
const [isPending, startTransition] = useTransition();
return (
<button
disabled={isPending}
遅延評価して、完了したら画面更新される
onClick={() => {
startTransition(async () => {
await submitAction();
});
}}
>
Submit
</button>
);
}
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/YE9PXPPPJ3.jpg)

Transition means…
●
遷移
○
○
○
●
１ 移り変わること。移り変わり。
２ ⼀定の地域の植物群落が、それ⾃⾝の作り出す環境の推移によって他の種類へと交代し、最終
的には安定した極相へと変化していくこと。岩などの裸地から始まるものを⼀次遷移、植⽣の⼀
部または全部が破壊されたところから始まるものを⼆次遷移という。サクセッション。植物遷
移。
３ 量⼦⼒学で、ある定常状態から、ある確率で他の定常状態へ移ること。その際にエネルギーの
授受が起こり、光⼦などの粒⼦を放出または吸収する。転移。
推移
○ １ 時がたつにつれて状態が変化すること。移り変わっていくこと。「情勢が推移する」
○ ２ 時が経過すること。「時間が推移する」
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/GE8D2DDXED.jpg)

Transition in our industry
● 状態遷移のTransition
● 遷移システムのTransition
● CSSの “transition”
etc...
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/LELM2MMN7R.jpg)

Transition “s” in React means…
react.devでは状態遷移や画⾯遷移をtransitionと呼ぶのに対してTが⼤⽂字の
Transition “s” は別の⾔葉として使われている.
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4JMY8YYQJW.jpg)

23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/PJR9599K79.jpg)

“as” Transitions..?
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PEXQKQQ5JX.jpg)

25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/3EK9599RED.jpg)

26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/L73WKWWG75.jpg)

This is the only reference… 😭
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/87DK3KKNJG.jpg)

Transition “s” in React means…
●
●
●
●
startTransitionかuseTransitionでマークした処理を急ぎじゃない（non
urgent）描画（更新）としてReactが後回しにする
もう⼀回最新の状況で割り込みしたかったら
UI描画計算を遅延処理させる（し、割り込みもさせられる）仕組み
このためにConcurrent Modeが必要
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/VJPK4KKNE8.jpg)

Transitions != 遷移 / 推移
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/2EVVXVVYEQ.jpg)

Why, “Transition”s
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/57GLVLLWEL.jpg)

To get to the bottom of the mystery, our team
headed deep into the Facebook jungle.
その謎を解明するため、我々調査隊はフェイスブックの奥地へと向かった――。
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/4EQY6YYQJP.jpg)

Facebook jungle…
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/KJ4W4WWY71.jpg)

33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/LE1Y4YYN7G.jpg)

React Working Group is…
●
●
Reactの将来的な機能仕様や、Reactチームからの提案をユーザーに対して
RFC形式で公開されDiscussionで議論ができる場
⼤体Reactチームの⾯々が出てくる
○
○
○
○
●
Dan Abramov（元Facebook
Rick Hanlon（Facebook
Sebastian Markbåge（Vercel
■ Next.jsの新機能のコンセプトに⼤きく関わっている
etc…
機能ヒントが書いている
Rickyさん
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/GEWGXG1MJ2.jpg)

Back to React 18 (2021)
35


# Page. 36

![Page Image](https://bcdn.docswell.com/page/47ZL6LPMJ3.jpg)

36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/YJ6W2WM5JV.jpg)

37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/GJ5M2MZGJ4.jpg)

38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/LE3WKW9PE5.jpg)

About discussion “New Feature: startTransition”
●
●
●
●
startTransitionというAPIの説明をしている
Transitionsは画⾯更新を急ぐ必要があるものと、そうでないものを分ける
In a typical React app, most updates are conceptually
transition updates. But for backwards compatibility reasons,
transitions are opt-in. By default, React 18 still handles updates
as urgent, and you can mark an update as a transition by
wrapping it into startTransition
わかったこと→Transitions APIが導⼊された意図、由来は未だわからず
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/8EDK3KG37G.jpg)

40


# Page. 41

![Page Image](https://bcdn.docswell.com/page/V7PK4K3PJ8.jpg)

41


# Page. 42

![Page Image](https://bcdn.docswell.com/page/2JVVXV4VJQ.jpg)

archived by wayback machine
42


# Page. 43

![Page Image](https://bcdn.docswell.com/page/5EGLVL11JL.jpg)

The thinking is that a first-class Animations API
would be integrated with startTransition. That’s part
of the reason for naming.
43


# Page. 44

![Page Image](https://bcdn.docswell.com/page/4JQY6YDN7P.jpg)

考え方としては、最高品質のアニメーションAPIを
startTransitionと統合させるということです。命名の理由
の一部もそこにあります。
translated by nani.now
44


# Page. 45

![Page Image](https://bcdn.docswell.com/page/K74W4WZ3E1.jpg)

🤔
45


# Page. 46

![Page Image](https://bcdn.docswell.com/page/LJ1Y4YRZEG.jpg)

ReactのTransitionは、単なる“低優先度更新”ではなく、将
来的にはアニメーションを含めたUIの時間的変化全体を扱
う概念になる。そのために startTransition という名前が付
いている。
described by ChatGPT
46


# Page. 47

![Page Image](https://bcdn.docswell.com/page/GJWGXG1672.jpg)

?
47


# Page. 48

![Page Image](https://bcdn.docswell.com/page/4EZL6LPR73.jpg)

48


# Page. 49

![Page Image](https://bcdn.docswell.com/page/Y76W2WM17V.jpg)

It's a broader concept of a change in the UI. So
we're kind of reclaiming the term for this broader
concept that we can anchor things on. With
Suspense we used a term that didn't have much
previous usage but in hindsight I kind of wish we
would've gone for Skeleton or some kind of
design/UX terminology to anchor the larger
concept on.
49


# Page. 50

![Page Image](https://bcdn.docswell.com/page/G75M2MZL74.jpg)

これはUIの変更という、より広範な概念を指しています。私たちはこの概念を確立するための土台と
して、この言葉を本来の意味で再定義しようとしているのです。
「Suspense」の時、私たちは以前あまり使われていなかった言葉を採用しましたが、今振り返ってみ
ると、「Skeleton（スケルトン） 」や、デザインや UXの専門用語といった、より大きな概念をしっかりと固
定できるような言葉を選んでおけばよかったな、と思っています。
translated by nani.now
50


# Page. 51

![Page Image](https://bcdn.docswell.com/page/9J2949R3ER.jpg)

!
51


# Page. 52

![Page Image](https://bcdn.docswell.com/page/DEY4M4D8JM.jpg)

Transitions =
React上の変化（描画だけでなく）を
時間変化に対応させる仕組みとその結果
52


# Page. 53

![Page Image](https://bcdn.docswell.com/page/VJNYWY6978.jpg)

Async React =
Reactの処理が時間変化に対応しているというコンセプト
53


# Page. 54

![Page Image](https://bcdn.docswell.com/page/YE9PXPL3J3.jpg)

Async React というコンセプトに対する
手段が Transitions
54


# Page. 55

![Page Image](https://bcdn.docswell.com/page/GE8D2DXLED.jpg)

そして、 Async Reactは明らかにそれよりも前の
時代のコンセプトに基づいていそう ...
55


# Page. 56

![Page Image](https://bcdn.docswell.com/page/LELM2M8Q7R.jpg)

Other concepts/features in React 18…
● Concurrent Mode
● Suspense
56


# Page. 57

![Page Image](https://bcdn.docswell.com/page/4JMY8YXKJW.jpg)

Back to React 16 (2017)
57


# Page. 58

![Page Image](https://bcdn.docswell.com/page/PJR959N679.jpg)

58


# Page. 59

![Page Image](https://bcdn.docswell.com/page/PEXQKQNDJX.jpg)

59


# Page. 60

![Page Image](https://bcdn.docswell.com/page/3EK959NDED.jpg)

60


# Page. 61

![Page Image](https://bcdn.docswell.com/page/L73WKWVP75.jpg)

61


# Page. 62

![Page Image](https://bcdn.docswell.com/page/87DK3K83JG.jpg)

私たちが現在取り組んでいる中で、最も刺激的な領域は「⾮同期レンダリング」かも
しれません。これは、レンダリング作業の実⾏を定期的にブラウザへ譲ることで、レン
ダリング処理を協調的にスケジュールする戦略です。
この⾮同期レンダリングを導⼊することで、Reactがメインスレッドをブロックしなく
なるため、アプリケーションの応答性が向上するというメリットがあります。
62


# Page. 63

![Page Image](https://bcdn.docswell.com/page/VJPK4K8PE8.jpg)

63


# Page. 64

![Page Image](https://bcdn.docswell.com/page/2EVVXVNVEQ.jpg)

私たちは、⾮同期レンダリングは⾮常に重要であり、Reactの未来を象徴するものだ
と考えています。v16.0への移⾏を可能な限りスムーズにするため、現時点では⾮同期
機能を有効にしていませんが、今後数ヶ⽉のうちに順次リリースを開始できることを楽
しみにしています。
64


# Page. 65

![Page Image](https://bcdn.docswell.com/page/57GLVLK1EL.jpg)

Async XXXX は React 16からのコンセプトだった(?)
65


# Page. 66

![Page Image](https://bcdn.docswell.com/page/4EQY6YNNJP.jpg)

Data Fetching
Interaction
Calculation
await ui = await f(await state)
Bundle size
66


# Page. 67

![Page Image](https://bcdn.docswell.com/page/KJ4W4WG371.jpg)

React’s performance exploration
●
Interaction（Main thread blocking）
➢
➢
●
Data Fetching
➢
➢
●
Suspense
React Server Component
Calculation ( Unnecessary re-rendering )
➢
➢
●
Async Rendering (React 16)
Concurrent React
■ <Offscreen /> → <Activity />
React Compiler
React Fir…?
Bundle size
➢
React Server Component
67


# Page. 68

![Page Image](https://bcdn.docswell.com/page/LE1Y4YDZ7G.jpg)

68