React-concurrent NPM

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

react-concurrent

A collection of hooks for fetching data easily.

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.

useFetchingCallback

useFetchingCallback doesn't fetching until call refetch

import { useFetchingCallback } from "react-concurrent";

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

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

useCreateResource

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

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 <OtherComponent {...{ resource }} />;
};

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

createResource

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);
};

React_Concurrent_Mode

As mentioned on react document you could use this

import { createResource } from "react-concurrent";

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

const App = () => {
  return (
    <Suspense fallback={"Is loading ...."}>
      <OtherComponent />
    </Suspense>
  );
};

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

  return "loaded";
};