fetch-react-hook
v1.0.4
Published
Performant, flexible and extensible fetch library for React Hooks
Downloads
23
Maintainers
Readme
fetch-react-hook
A simple, safe fetch custom hook for React. Why safe? There's a good chance you've seen this before:
Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
This hook helps you avoid mutating state on components that are unmounted
by providing you with the mounted
state of the hook, and aborts in-flight requests on unmount
.
Install
npm install fetch-react-hook
# or, if using yarn
yarn add fetch-react-hook
Usage
This example demonstrates how you might get some todos with useFetch
while being sure you don't mutate state after your component is unmounted
.
import React, { useEffect, useState } from "react";
import { FetchProvider } from "fetch-react-hook";
function TodoList() {
return (
<FetchProvider>
<TodoList />
</FetchProvider>
);
}
import React, { useEffect, useState } from "react";
import useFetch from "fetch-react-hook";
function TodoList() {
const {
reFetch,
isPending,
data: todos,
status,
setData,
} = useFetch(
() =>
fetch("https://jsonplaceholder.typicode.com/todos/").then((res) =>
res.json()
),
{
autoFetch: true,
onSuccess: (response) => {},
onFinish: () => {},
catchKey: "catch",
onDataSetter: (response) => response,
}
);
return (
<div>
{todos.map((todo) => {
return <span key={todo.id}>{todo.title}</span>;
})}
</div>
);
}