これからの
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
 は便利だが、扱いが難しい道具

No content

そんな時...

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
(
 



do
asyncOperation
 

)
 }


No content

これまでと今のReact の非同期処理について考えた...


これからの
React
 の非同期処理について考える

Suspense
for
Data
Fetching
(Experimental)

const
ProfilePage
=
React.lazy(()
=>
import('./ProfilePage'));
//
Lazy-loaded
 
 //
Show
a
spinner
while
the
profile
is
loading
 }>
 


 


const
resource
=
fetchProfileData();
 
 function
ProfilePage()
{
 

return
(
 



Loading
profile...}>
 






 





Loading
posts...}>
 








 






 




 

);
 }
 
 function
ProfileDetails()
{
 

const
user
=
resource.user.read();
 

return


{user.name}

;
 }
 
 function
ProfileTimeline()
{
 

const
posts
=
resource.posts.read();
 

return
(
 






 





{posts.map(post
=>
(
 








• {post.text}

 





))}


No content

宣言的に記述する事でReact による最適化の恩恵が受けら れる

さいごに

ご清聴ありがとうございました