# react-concurrent

> A new Render-as-You-Fetch pattern for fetching data.

Latest version **2.2.2** (published 2020-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-concurrent
pnpm add react-concurrent
yarn add react-concurrent
bun add react-concurrent
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.2 |
| Published | 2020-12-20 |
| First published | 2020-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 46.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Hossein mohammadi |
| Maintainers | hosseinmdeveloper |
| Keywords | react, Render-as-You-Fetch, concurrent, fetch, async, hooks |

## Links

- npm: https://www.npmjs.com/package/react-concurrent
- Repository: https://github.com/hosseinmd/react-concurrent
- Homepage: https://github.com/hosseinmd/react-concurrent#readme
- Issues: https://github.com/hosseinmd/react-concurrent/issues
- npm.io page: https://npm.io/package/react-concurrent

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.2 (latest) — 2020-12-20
- 2.2.1 — 2020-12-01
- 2.2.0 — 2020-11-30
- 2.1.1 — 2020-11-26
- 2.1.0 — 2020-11-26
- 2.0.1 — 2020-11-12
- 2.0.0 — 2020-11-05
- 1.1.2 — 2020-10-20
- 1.1.1 — 2020-10-16
- 1.1.0 — 2020-10-14
- 1.0.0 — 2020-09-06
- 0.3.2 — 2020-09-03
- 0.3.1 — 2020-09-02
- 0.2.3 — 2020-08-26
- 0.3.0 — 2020-08-24
- … 18 more at https://npm.io/package/react-concurrent/versions

## README

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

[![NPM](https://nodei.co/npm/react-concurrent.png)](https://nodei.co/npm/react-concurrent/)

[![install size](https://packagephobia.now.sh/badge?p=react-concurrent)](https://packagephobia.now.sh/result?p=react-concurrent) [![dependencies](https://david-dm.org/poolkhord/react-concurrent.svg)](https://david-dm.org/poolkhord/react-concurrent.svg)

## react-concurrent

A collection of hooks for fetching data easily.

## TOC

- [install](#install)
- [useFetching](#useFetching)
- [useFetchingCallback](#useFetchingCallback)
- [useCreateResource](#useCreateResource)
- [createResource](#createResource)
- [React_Concurrent_Mode](#React_Concurrent_Mode)

### install

`$ yarn add react-concurrent`

### useFetching

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](useFetching.md).

### useFetchingCallback

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 (
    <>
      <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

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

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

### createResource

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

### React_Concurrent_Mode

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 (
    <Suspense fallback={"Is loading ...."}>
      <OtherComponent />
    </Suspense>
  );
};

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

  return "loaded";
};
```

### Stories

[How to fetch data with React-Concurrent](https://hosseinm-developer.medium.com/how-to-fetch-data-with-react-concurrent-54e1bac3797c?source=friends_link&sk=cb835f9c764e0d43acfdf57eed952b62)

---
_Source: https://npm.io/package/react-concurrent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._