import { useEffect, useState } from "react";
export type Result<T> =
| ["loading", undefined?]
| ["error", Error]
| ["success", T];
export const useData = <T,>(url: string): Result<T> => {
const [result, setResult] = useState<Result<T>>(["loading", undefined]);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((data) => setResult(["success", data]))
.catch((error) => setResult(["error", error]));
}, [url]);
return result;
};
const Component = () => {
const [status, value] = useData<{ title: string }>(
"https://jsonplaceholder.typicode.com/todos/1"
);
if (status === "loading") {
return <div>Loading...</div>;
}
if (status === "error") {
return <div>Error: {value.message}</div>;
}
return <div>{value.title}</div>;
};
- Discriminated Typescript Custom Tuples Reactdiscriminated typescript custom tuples extracting components typescript custom typescript workspace monorepo react typescript component strongly react react typescript inference fixing typescript component generics react typescript strongly render react react typescript examples useful react typescript namespace react typescript function overload