Async React earlier than React 19

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

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

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

In React 19… 4

Async React 5

6

Common React ui = f(state) 7

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

9

10

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

12

13

14

15

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

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

import { startTransition } from 'react';
function TabContainer() {
const [tab, setTab] = useState('about');

遅延評価して、完了したら画面更新される
function selectTab(nextTab) {
startTransition(() .> {
setTab(nextTab);
});
}
// ...
}
18

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

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

• https://kotobank.jp/word/植物群落-534319
• https://kotobank.jp/word/極相-53260#E3.83.87.E3.82.B8.E3.82.BF.E3.83.AB.E5.A4.A7.E8.BE.9E.E6.B3.89
• https://kotobank.jp/word/1次遷移-2781743
• https://kotobank.jp/word/2次遷移-2781744
• https://kotobank.jp/word/さくせつしよん-509652
• https://kotobank.jp/word/定常状態-100106#E3.83.87.E3.82.B8.E3.82.BF.E3.83.AB.E5.A4.A7.E8.BE.9E.E6.B3.89
• https://kotobank.jp/word/えねるぎー-3145236
• https://kotobank.jp/word/光子-62136#E3.83.87.E3.82.B8.E3.82.BF.E3.83.AB.E5.A4.A7.E8.BE.9E.E6.B3.89
• https://kotobank.jp/word/状態-532446
• https://kotobank.jp/word/変化-131068
• https://kotobank.jp/word/情勢-532264
• https://kotobank.jp/word/時間-72507

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

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

23

“as” Transitions..? 24

25

26

This is the only reference… 😭 27

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

Transitions != 遷移 / 推移 29

Why, “Transition”s 30

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

Facebook jungle… 32

33

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

Back to React 18 (2021) 35

36

37

38

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

40

41

archived by wayback machine 42

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

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

🤔 45

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

? 47

48

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

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

! 51

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

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

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

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

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

Back to React 16 (2017) 57

58

59

60

61

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

63

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

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

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

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

68