useEffectをやめて、Suspenseを使おう

Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹介します。 追記: Suspenseではウォーターフォール問題を解決できないとの指摘について 「Suspenseの実装」に記載のコードを見た限り、ウォーターフォール問題を解決できないとの指摘がありました。 実装の章では問題を解決することではなく、<Suspense>をどのように使うかに焦点を当てました。 具体的な実装方法に踏み込むとテーマから大きく外れてしまう可能性があったためです。 読みやすさを優先した結果、解決のための実装については割

[shingo-sasaki-0529]

useEffect を正しく使うのは難しいけど、もうほとんどのケースではフェッチライブラリ導入するから、useEffect 使うのはグローバルな DOM イベントまわりをハンドリングとかにちょっと使う程度になってきてるかな。

[onesplat]

全体的に意味不明だな

[nicht-sein]

Suspenseはまだ時期早々だとは思うけど、まあ、Hookが導入された当時もまだβの時代から普通に使っていたからそんなもんか

[yarumato]

“useEffect()は外部システムとの同期に使います。Suspense単体での実装方法を紹介しますが、公式でもドキュメント化されていない内容です。Suspenseを実際に使う場合、Next.jsなどのメタフレームワークを使用してください”