Hook, simplifying dealing with Promises inside of React components
npm install promise-hookInstall it with yarn:
```
yarn add promise-hook
Or with npm:
``
npm i promise-hook --save
The simplest way to start playing around with react-promisify is with this CodeSandbox snippet:
https://codesandbox.io/s/ykmklm6m21
In order to fetch the data, you need to pass a Promise returning function as a first argument to usePromise hook. It will return you back response related payload such as resolved data, request status or the error if it exists.
resolve option is used to initiate data fetching when component mounts.
`javascript
import React from "react";
import { usePromise } from "promise-hook";
const Movies = () => {
const { isFetching, data } = usePromise(fetchMovies, { resolve: true });
return isFetching ? (
const fetchMovies = () =>
fetch(http://your-amazing-api.com/movies).then(res => res.json());`
In order to pass some arguments to the Promise function, you need to use arrow function wrapper and pass needed argument from a closure.
By default, when resolve option is enabled, data fetching is initiated only on the first render. But you can control it with resolveCondition setting. If an array of variables passed will be changed - data fetching will be initiated again.
`javascript
import React from "react";
import { usePromise } from "promise-hook";
const Movies = ({ category }) => {
const { isFetching, data } = usePromise(() => fetchMovies(category), {
resolve: true,
resolveCondition: [category]
});
return isFetching ? (
const fetchMovies = category =>
fetch(http://your-amazing-api.com/movies/${category}).then(res =>`
res.json()
);
When you need to send any request on demand instead of component mount, you can use request function returned from the usePromise hook.
After that function is called, data fetching will be started and payload variables such as isFetching etc will be updated accordingly.
`javascript
import React from "react";
import { usePromise } from "promise-hook";
import { Form, Input, Button } from "./Form";
const SignUp = () => {
const { isFetching, request } = usePromise(signUp);
return (
const signUp = data =>
fetch(http://your-amazing-api.com/users, {`
method: "POST",
body: data
}).then(res => res.json());
Once the error was happened during the request, an error variable will be populated with the corresponding error object. You can use it afterwards for displaying apropriate error message in the UI.
`javascript
import React from "react";
import { usePromise } from "promise-hook";
const Movies = () => {
const { isFetching, data, error } = usePromise(fetchMovies, {
resolve: true
});
return isFetching ? (
const fetchMovies = () =>
fetch(http://your-amazing-api.com/movies).then(res => res.json());``
- Promise cancelling.
- Caching.
- Resetting / Updating response state.
- Middleware support.