Sync と Async ─ useSyncExternalStore を使う者の岐路

Sync と Async useSyncExternalStore を使う者の岐路 2026/06/06 Musubi AI在庫管理チーム江藤
優汰フロントエンド・PHPカンファレンス北海道2026 © KAKEHASHI Inc.

名前：江藤優汰担当プロダクト: Musubi AI在庫管理役職：ソフトウェアエンジニア普段はPythonでバックエンドを書いていることが多い
フロントエンド開発をもっとやりたい！自己紹介 © KAKEHASHI Inc. 2

カケハシは薬局・医療の現場を支えるプロダクトを開発しています。日本の医療体験を、しなやかに。 © KAKEHASHI Inc. 3

薬局向けの在庫管理プロダクト欠品・過剰在庫による治療遅延・業務負荷増加、保管スペースの圧迫と管理の手間という課題がある AI による需要予測で発注を最適化 Musubi AI在庫管理 © KAKEHASHI
Inc. 4

業務時間で技術トピックを深掘りするコミュニティフロントエンド研究会もそのひとつ毎週話題を持ち寄って集まったり、Slackで気軽にレビューなど依頼できるカケハシには「研究会」文化がある © KAKEHASHI Inc. 5

1 Async React と出会う © KAKEHASHI Inc.

ある日、研究会のSlackに通知が来た © KAKEHASHI Inc. 7

AI在庫もReact使っているけど、フロントエンドに詳しいメンバーいないから調べてみようかな 🤔 © KAKEHASHI Inc.

UIの更新は、状態の取得もレンダリングも全てが非同期プロセスである。そもそも Async React とは？ © KAKEHASHI Inc. 9

AI在庫管理でも Async React の考え方を取り入れて開発していきたい！どんな API があるんだろう…？自分のプロダクトでも使いたい！ © KAKEHASHI
Inc. 10

useTransition / startTransition Suspense useDeferredValue useOptimistic ViewTransition 主要な API ©
KAKEHASHI Inc. 11

2 試してみる © KAKEHASHI Inc.

トランジションを試してみる const [isPending, startTransition] = useTransition(); const handlePageChange = (next:
number) => { startTransition(() => { setPage(next); }); }; const MedicineStockPage = () => { const { page, setPage } = usePage(); return ( <PaginationContainer page={page} isPending={isPending} onPageChange={handlePageChange} > <Suspense fallback={<SkeletonTable />}> <MedicineStockTable page={page} isPending={isPending} /> </Suspense> </PaginationContainer> ); }; © KAKEHASHI Inc. 13

Suspenseフォールバックは最初の一回のみで、以降は useTransition の isPending でローディングされるはず（デモであり実際のAI在庫管理の画面ではありません） 0:00 / 0:05 試してみよう！
© KAKEHASHI Inc. 14

なぜかページ移動でSuspenseフォールバックが表示されてしまう、、、（デモであり実際のAI在庫管理の画面ではありません） 0:00 / 0:07 何かがおかしい、、、 © KAKEHASHI Inc. 15

AI在庫では状態管理に Zustand を使っています Zustand は内部的に useSyncExternalStore を使用していますここが怪しいのでは、、、？実は… ©
KAKEHASHI Inc. 16

3 原因を探る © KAKEHASHI Inc.

useSyncExternalStore から返される値に基づいてレンダーをサスペンドさせることは推奨されていません。外部ストアで起きた変更はノンブロッキング型のトランジション更新としてマークできないため、直近の Suspense フォールバックが起動してしまいます。
既に画面上に表示されているコンテンツがローディングスピナで隠れてしまうため、通常は望ましくないユーザ体験につながります。 https://ja.react.dev/reference/react/useSyncExternalStore useSyncExternalStore のドキュメントを確認してみる © KAKEHASHI Inc. 18

So, in this proposal: Updates triggered by a store change
will always be synchronous, even when wrapped in startTransition https://github.com/reactjs/rfcs/blob/main/text/0214-use-sync-external-store.md#detailed-design 訳）この提案では、ストア変更による更新は startTransitionで包んでも常に同期的。 useSyncExternalStore の同期レンダリングは仕様であることがわかる RFC にも © KAKEHASHI Inc. 19

useState / useReducer は複数バージョンの状態を持てる「画面に表示されている状態」と「裏で組み立てられている状態」を持てる React 組み込み API なのでトランジション前提で設計されているなんでトランジションとしてマークされないの？
© KAKEHASHI Inc. 20

外部ストアは１つの状態しか持てない外部のストアは React の世界の外にあるので、複数バージョンを持てない（実装次第で持てはするが、React側がどのバージョンを参照するか決める仕様がない）もしトランジションに対応させると、レンダリングの途中でストアが変わってティアリング(コンポーネント間で見える値が食い違う) が起きる useSyncExternalStore
は状態の同期を優先し、トランジションは仕様として非対応なんでトランジションとしてマークされないの？ © KAKEHASHI Inc. 21

そもそも外部ストアである必要があるか考える useState に置き換えてもいいなら置き換えるライブラリを変える jotai は意図的に useSyncExternalStore を採用していないトレードオフとしてティアリングを受け入れる設計になっている zustand
ベースの別解として use-zustand というのもある jotai と同じく useSyncExternalStore を使わない設計になっているじゃあ、どうしよう？ © KAKEHASHI Inc. 24

React チームは useSyncExternalStore の課題を解決する別 API を開発中待っていれば、この「岐路」自体が消える可能性もある。（が現時点で進展はなさそうに見える） https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#concurrent-stores ちなみに：Concurrent
Stores © KAKEHASHI Inc. 25

Async React の考え方をチームで理解 useSyncExternalStore の仕様を理解した上でトランジションで更新しないようにする（とはいえ気にし続けるのも難しい気がする）全てをトランジションにする前提で考えるなら、 use-zustand を使うのもあり
https://speakerdeck.com/uhyo/react-19shi-dai-nokonponentoshe-ji-besutopurakuteisu?slide=22 AI在庫管理は、まず何から始めよう？ © KAKEHASHI Inc. 26

useSyncExternalStore の "Sync" は仕様。トランジション / Suspense とは本質的に相性が悪い部分があるしかしこれはバグではなく設計通りの挙動 AI在庫管理の今後
Async React の考え方を取り入れていきたい状態管理ライブラリ zustand の置き換えは重いので、ひとまずは use- zustand を採用してみるまとめ © KAKEHASHI Inc. 27

Sync と Async ─ useSyncExternalStore を使う者の岐路

Sync と Async ─ useSyncExternalStore を使う者の岐路

KAKEHASHI PRO

More Decks by KAKEHASHI

Other Decks in Technology

Featured

Transcript