4 ms·
All the examples are fetching data from a server, and in such cases I think tanstack query already does all the hard part. I feel like people under-use react qu
by igor47 6mo ago
All the examples are fetching data from a server, and in such cases I think tanstack query already does all the hard part. I feel like people under-use react query and put too much state in their FE. This might be relevant if your app has some really complicated interactions, but for most apps they should really be a function of server, not client, state. Of course this exact reasoning is why I moved off react altogether and now use htmx in most of my projects
- dsego 6mo agoIt's not just react query, you can make a quick useFetch and useMutation hooks (or claude can), it's not that complex. If you don't need more advanced features (eg caching), you can easily cut down on 3rd party dependencies. import { useState, useEffect } from "react"; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }) .then((res) => res.json()) .then((json) => { console.log("Data:", json); setData(json); }) .catch((err) => { if (err.name !== "AbortError") { console.error("Fetch error:", err); setError(err); } }) .finally(() => setLoading(false)); return () => controller.abort(); }, [url]); return { data, loading, error }; } function App() { const { data, loading, error } = useFetch("https://jsonplaceholder.typicode.com/todos/1"); if (loading) return <p>Loading...</p>; if (error) return <p>Error</p>; return <pre>{JSON.stringify(data, null, 2)}</pre>; }
- chrisweekly 6mo agoYeah, fetching data from a server in useEffect is a widely acknowledged and documented antipattern.
- xboxnolifes 6mo agoIt's a widely documented anti-pattern, while also not giving a convenient alternative.
- confidantlake 6mo agoIs it? I have never had any issues doing it this way.
- chrisweekly 6mo agoThis post explains it pretty well: https://dev.to/deveshsangwan/stop-using-useeffect-for-data-fetching-5hcl https://dev.to/deveshsangwan/stop-using-useeffect-for-data-f...
- confidantlake 6mo agoI am not convinced. Have been using this pattern for years without issue.
- chrisweekly 6mo agoYou can lead a horse to water...
- confidantlake 6mo agoI have been drinking water for years. You are trying to tell me water is an antipattern and I should drink gatorade instead. No thanks.
- chrisweekly 6mo agoI'm doing no such thing. I'm alerting you to the fact that the owner of the well where you've been drinking has warned that it's not potable and suggested drinking the pure, filtered water instead. Did you even read the article I linked? If not, please do. If you did read it, and still believe it makes no difference, I can't do anything more to help and will simply wish you good luck and have a nice day.
- confidantlake 6mo agoIt wasn't the owner that suggested it. It was some random blogplost that insisted the normal town well that everyone used was no good and you have to use his super special well instead. He points to an incident 6 months ago where someone got drunk and decided to jump into the well. The dude who jumped into the well didn't even say it was the well's fault. I did read the article linked. I am remain unconvinced. Use effect for data fetching is not "risky", "fragile", and does not cause "subtle, hard to debug problems". This is baseless fear mongering. Claiming Tanstack is the "right" way is incredibly arrogant.