データフェッチはuseEffectの出番じゃないなら、結局何を使えばいいんだ

ショートアンサー React 18 からのフックである、useSyncExternalStore を使えばいいようです。 ※ useEffect がまったくだめだというわけではありません。 ※ クライアントサイドレンダリングのみを考えています。サーバーサイドレンダリングを考慮すると違った答えになるかもしれません。 サンプルコード 次のような useData フックを作ってみます。 JSON API の GET レスポンスを返すシンプルなものです。 実験をしやすいように、リクエスト URL を変えるボタンを置いてあります。 import { useEffect, useState } from "react" export function SearchResults() { const [id, setID] = useState(1) const todo = useData(`http

[rikuba]

useSyncExternalStoreについて

[uehaj]

fetchは命令ではなくキャッシュを伴うリアクティブストリームなもんでstateやpropと非同期にシンクロさせるモデル。そんなこと自前でするぐらいなら"結局はSWRやReact Queryを足したりもしくは Next.js などのFWに従ったりすべき

[mas-higa]

react hooks パズル難しすぎる