React-Concurrent A collection of hooks for fetching data easily.


 

react-concurrent

A collection of hooks for fetching data easily.

TOC

- install
- useFetching
- useFetchingCallback
- useCreateResource
- createResource
- React_Concurrent_Mode

$3

$ yarn add react-concurrent

$3

Get your api data easily by useFetching

``js
import { useFetching } from "react-concurrent";

const app = () => {
const { data, isLoading, error, refetch } = useFetching(() =>
fetch("http://example.com").then((res) => res.json()),
);
};

//////// Axios
// If you are using axios
const { data, isLoading, error, refetch } = useFetching(async () => {
const response = await axios.get("http://example.com");
return response.data;
});
`

useFetching.md.

$3

useFetchingCallback doesn't fetching until call refetch

`js
import { useFetchingCallback } from "react-concurrent";

const app = () => {
const { data, isLoading, error, refetch } = useFetchingCallback((body) =>
fetch("http://example.com/setting", { method: "post", body }),
);

return (
<>
refetch({ language: "en" })} title="English" />
{isLoading ? "Is loading ..." : data}

);
};
`

$3

useFetch give us a resource, we need to pass that to useResource for get data

`js
import { useCreateResource, useResource } from "react-concurrent";

const fetchApi = (id) => fetch(http://example.com/${id});

const app = () => {
const [id, setId] = useState(1); // fetch is calling again if this state changed
const { resource } = useCreateResource(() => fetchApi(id), [id]);

return ;
};

const OtherComponent = ({ resource }) => {
const { data, isLoading, error } = useResource(resource);
};
`

$3

`js
import { createResource, useResource } from "react-concurrent";

const resource = createResource(() => fetch("http://example.com"));
// resource.preload(); // fetching before render component

const app = () => {
const { data, isLoading, error } = useResource(resource);
};
`

$3

As mentioned on react document you could use this

`js
import { createResource } from "react-concurrent";

const resource = createResource(() => fetch("http://example.com"));

const App = () => {
return (



);
};

const OtherComponent = () => {
const data = resource.read();

return "loaded";
};
``

$3

How to fetch data with React-Concurrent