Reactのデータ再取得、タイムスタンプで管理すると宣言的になる話【AI生成】

BRANK

皆さんこんにちは。最近、データ再取得の実装パターンについて考えていて、面白い気づきがあったので共有します。Reactでデータを再取得したいとき、普通はrefetch()みたいな関数を呼ぶ実装になります。ボタンを押したらサーバーからデータを取り直す、みたいなやつです。でも、これって結構命令的というか、Suspense時代のReactの思想とずれてる気がするんです。よくある実装の違和感典型的な実装、こんな感じで書いたことある人多いと思います。function UserProfile() { const { data, refetch } = useQuery('/api/user'); return ( <div> <UserInfo data={data} /> <button onClick={() => refetch()}>更新</button> </div> ); } これ、動くし問題ないです。でも、なんか気持ち悪さがあって。「ボタンを押す → 関数を呼ぶ → データが更新される」という流れが、すごく手続き的なんです。Reactの宣言的なUIという思想からすると、ちょっと違和感があります。特にSuspenseと組み合わせると、この違和感が際立ちます。Suspenseって、データ取得を宣言的に扱うための仕組みじゃないですか。「このコンポーネントはこのデータが必要」って宣言す…