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

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

そんな時...

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>    )  } 

これまでと今の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>        ))} 

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

さいごに

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

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

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

kotaro takahashi

More Decks by kotaro takahashi

Other Decks in Programming

Featured

Transcript