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 altog…
It'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 Loading...
;
if (error) return Error
;
return {JSON.stringify(data, null, 2)};
}