import React.Suspense into Jetpack Compose

https://docs.google.com/presentation/d/1noJFmb-rgik3BTx-6q8yqISSr8VzvNgwiUBnPm-cIW0/edit?usp=sharing

Transcript

1. @mrtry Jetpack Composeに React.Suspenseを取り入れる 2025/10/18 - DroidKaigi 2025・iOSDC Japan 2025おつかれさまパーティー
2. @mrtry (とらい) • JMDC, Inc / ventus, Inc ◦ Mobile Engineer ◦ Scrum Master • ◦ Organizer • 放送大学生 ◦ もうすぐ認定心理士
4. ▪ プロダクト ORICALは、ファンが「電子トレカ®」をコレクションしながら、 自らの「応援」や「推し」を可視化・発信できる、 「デジタルグッズ×ファンエンゲージメント」サービスです。
5. ▪ プロダクトは16個のチーム・団体に展開中。プロ野球は8球団に導入中。それぞれの「公式」トレカサービスとしてご好評いただいています。
6. React.Suspenseの概要と Jetpack Composeへの導入実例を紹介します • Composeは、Reactなどの宣言的UIの思想を多く引き継いでる • Reactでは、Suspenseを使うのが主流になってきてる • Composeでも、Suspenseを使ったアーキテクチャが出てくるはず
7. React.Suspense とは？
8. React.Suspenseとは？ • Renderingがまだ表示できない状態をReactに伝え、代替UIを表示する仕組み • Error / Loading の状態管理に関するコードが減り、バグの予防になる ◦ View Treeの構造でUIの状態パターンを理解できる ◦ 分岐処理の手続き的な処理を、自分で書かなくなる
9. Before: 手続き的な状態管理
10. After: 宣言的な状態管理
11. React.Supenseのアーキテクチャ概略 • Error / Loading の状態管理に関するコードが減り、バグの予防になる ◦ View Treeの構造でUIの状態パターンを理解できる ◦ 分岐処理の手続き的な処理を、自分で書かなくなる
12. Suspenseの概略 「Promise を throw する」 • データ取得関数は、初回呼び出し時にPromiseをthrow • SuspenseがそのPromiseをcatchして、fallbackを表示 • データ取得完了後、再レンダリングでデータを返す
13. React.Suspenseを Composeに取り入れてみる
14. React.SuspenseをComposeに取り入れてみる soil-kt/soil • Supenseに相当するComposableを提供 • fetch/cache/非同期処理の状態管理を提供
15. soil/soil-ktを使ったSuspenseの例
16. 実践例: DroidKaigi 2025アプリ TimetableScreenRoot
17. まとめ • React.Suspenseを導入することで、UIの状態管理がわかりやすくなる • DroidKaigi Appでも取り入れられており、実用的なレベルになってる • Composeのアーキテクチャとしてデファクトスタンダードになる、かも？