Async loading and error state management hook for TypeScript and JavaScript React applications
npm install react-loading-hook
or
yarn add react-loading-hook
Please note that TypeScript type definition files are included.
import React from "react";
import { useLoadingCallback } from "react-loading-hook";
export default function App() {
const [person, setPerson] = React.useState();
const [fetchPerson, isLoading, error, reset] = useLoadingCallback(
async (id) => {
const response = await fetch(`https://swapi.dev/api/people/${id}/`);
const person = await response.json();
setPerson(person);
}
);
React.useEffect(() => {
const personId = 1;
fetchPerson(personId);
}, []);
if (error) {
return <span>{error.message}</span>;
}
if (isLoading || !person) {
return <span>Is loading...</span>;
}
return <span>{person.name}</span>;
}