Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactのSuspenseを使った非同期処理のエラーハンドリング

taro
September 08, 2022

 ReactのSuspenseを使った非同期処理のエラーハンドリング

「フロントエンドLT会 - vol.8」で発表したスライドです。
https://rakus.connpass.com/event/255095/

taro

September 08, 2022
Tweet

More Decks by taro

Other Decks in Programming

Transcript

  1. Suspenseとは 宣言的UIフレームワーク・ライブラリのSuspenseの提供状況 • React→提供済 • Vue→実験的機能として提供 • Solid→提供済 • Svelte→未提供

    →Suspenseは宣言的UIの標準になっていくと考えられる機能 →React以外の使い手の方にも、参考になれば嬉しいです🙂
  2. Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary 宣言的にUIを構築するには、その対象を Reactの管理下に置く必要がある • state: 宣言的に書ける • ref:

    宣言的に書けない 宣言的に非同期処理扱うために、 PromiseをReactにthrowしている さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312
  3. Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary 宣言的にUIを構築するには、その対象を Reactの管理下に置く必要がある • state: 宣言的に書ける • ref:

    宣言的に書けない 宣言的に非同期処理扱うために、 PromiseをReactにthrowしている Promiseをthrowすることへの違和感が減る (?) さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312