useEffect で API を叩くのを卒業しよう

はじめに 「useEffectでデータ取得するのはやめた方がいい」— こんな話を聞いたことはないだろうか。 でも自分はずっと、useEffect + fetch でAPIを叩いていた。中でtry-catchして、useStateにセットして、ローディングもエラーも自分で管理して。チュートリアルで覚えたそのパターンを、特に疑うこともなく使い続けていた。 「やめた方がいいのは分かった。じゃあ何を使えばいいの？」— この記事は、その疑問に対する自分なりの答えを、実際にTanStack Queryに置き換えてみた過程から書いている。 useEffect + fetch で書くとこうなる 例として、APIから投稿一覧を取得して表示するコンポーネントを考える。 const [posts, setPosts] = useState<Post[]>([]); const [isLoading, setIs

[neos21]

例外を検知したあとのハンドリングと、結局エンドユーザに何を見せるかの設計や実装がないようじゃ、コード行数が短くなって喜んでるだけなのと変わらないのでは…

[tohokuaiki]

「React18のSuspenseを使え」 https://qiita.com/uhyo/items/dec319ced85fc1b83f86 という問題だと思ったら、全然違った…。ちなみに私はなぜSuspenseを使うべきかを先ほど教えてもらった。 https://chatgpt.com/share/699283da-d4a0-8000-9905-9c5fe17df5ee

[mkusaka]

useEffect + fetchの冗長さ（useStateが3つ）をTanStack QueryのuseQuery（queryKeyとqueryFn）で簡潔化する記事。

[y_hirano]

最近React触り出したのだけれど、この仕組み人類には難しいのでは？と思うことがある。

[hkdn]

時間置いて学び直すたびに最適解が変わるのってシンプルにめんどくさいよな。早く大人になってほしい。

[matarillo]

RFC 5861のキャッシュ戦略をReactフックにしたSWRのほうがsimpleなのかと思ったが、そうでもないようだ

[ultimatebreak]

正直最近Reactしんどいなと思ってきてる、なんか色々めんどいねん

[tsukaby]

言い回しが凄くGPTくさくて気になってしまう。内容はよいと思いますし勉強になりました。

[soxandcity]

OpenAPIの定義があればOrvalでTanstackQueryのコードを型込みで自動生成してくれるのでとても楽。昔はいろいろ面倒だったのが懐かしい。

[gamecome]

jQueryというライブラリを落としてきて、ajax()とかやると良いよ。オヌヌメ。

[retore]

react router v7もいいぞ！

[xanaduuu]

react好きなように作られるとカオスになるのこの辺か

[nguyen-oi]

useState3連発にuseEffect、あの「おまじない」の煩わしさは異常。TanStack Queryに慣れるともう手書きには戻れんな