Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
これからの React の非同期処理について考える
Search
kotaro takahashi
December 19, 2019
Programming
1
660
これからの React の非同期処理について考える
スタートアップ×React LT大会 Coral Developers Nightにて、10分間のLTで登壇。
Reactと非同期処理から連想出来るトピックについて早口オタク喋りした。
kotaro takahashi
December 19, 2019
Tweet
Share
More Decks by kotaro takahashi
See All by kotaro takahashi
もしもエンジニアが Inspiredを読んだら ~PdMを兼任した半年間の奮闘記~
k4h4shi
0
56
Other Decks in Programming
See All in Programming
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Site Reliability Engineering for GMO
pyama86
7
1k
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
230
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
170
Ruby Pattern Matching
bkuhlmann
0
920
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
480
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
Nealle_Autify_LT_Slide202403
nealle
0
150
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Ruby GitHub Packages
bkuhlmann
0
630
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
360
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Writing Fast Ruby
sferik
621
60k
RailsConf 2023
tenderlove
3
540
WebSockets: Embracing the real-time Web
robhawkes
59
7k
BBQ
matthewcrist
80
8.8k
Typedesign – Prime Four
hannesfritz
36
2.1k
KATA
mclloyd
15
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Designing Experiences People Love
moore
136
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Transcript
これからの React の非同期処理について考える スタートアップ×React LT 大会 Coral Developers Night
kotaro.t ID: @k4h4shi 所属: 株式会社Handii ロール: フロントエンドエンジニ ア
はじめに
非同期処理はどこに書く?
非同期処理関数() { 非同期処理の開始アクションの発行; try { 非同期処理の呼び出し; 非同期処理の完了アクションの発行; } catch (e) {
非同期処理の失敗アクションの発行; } }
redux-saga
function* asyncTask() { yield put(asyncActions.start()); try { const result = yeild call(asyncFunction); yield put(asyncActions.done(result)); } catch (e) { yield put(asyncActions.failed(e)) } }
Saga の良い点
モック要らずで手続きのテストが容易 コンポーネントとタスクが疎に出来る API が豊富(delay, retry, cancel, throttle, debounce)
Saga の悪い点
TS の型推論があんま効かない 見慣れないジェネレータ記法でロックインされる 影響と副作用を一手に引き受けるのでカオスになりやすい
Saga は便利だが、扱いが難しい道具
None
そんな時...
React 16.8 で React Hooks がリリースされた
もう Hooks でいいのでは...?
Hooks での非同期処理について考えた
const useDoAsyncOperation = () => { const dispatch = useDispatch(); const doAsyncOperation = async () => { dispatch(asyncActions.start()); try { const result = await asyncFunction(); dispatch(asyncActions.done(result)); } catch (e) { dispatch(asyncActions.failed(e)) }
} return doAsyncOperation; }
const component = () => { const doAsyncOperations = useDoAsyncOperation(); return ( <button onClick={doAsyncOperations}>do asyncOperation</button> ) }
None
これまでと今のReact の非同期処理について考えた...
これからの React の非同期処理について考える
Suspense for Data Fetching (Experimental)
const ProfilePage = React.lazy(() => import('./ProfilePage')); // Lazy-loaded // Show a spinner while the profile is loading <Suspense fallback={<Spinner />}> <ProfilePage /> </Suspense>
const resource = fetchProfileData(); function ProfilePage() { return ( <Suspense fallback={<h1>Loading profile...</h1>}> <ProfileDetails /> <Suspense fallback={<h1>Loading posts...</h1>}> <ProfileTimeline /> </Suspense> </Suspense>
); } function ProfileDetails() { const user = resource.user.read(); return <h1>{user.name}</h1>; } function ProfileTimeline() { const posts = resource.posts.read(); return ( <ul> {posts.map(post => ( <li key={post.id}>{post.text}</li> ))}
None
宣言的に記述する事でReact による最適化の恩恵が受けら れる
さいごに
ご清聴ありがとうございました