react-progressive-callback
A React hook for tracking the state of an async action or a polling
Example
import {useState, useEffect} from 'react';
import {useProgressiveCallback} from 'react-progressive-callback';
export const UserList = () => {
let [users, setUsers] = useState();
// the `state` value reflects the state of the async callback
let [state, fetchUsers] = useProgressiveCallback(async () => {
let response = await fetch('/users');
return await response.json();
});
useEffect(() => {
fetchUsers().then(users => {
// in this example, the result is stored in a local state,
// but it could as well be stored in an external store
setUsers(users);
});
}, [fetchUsers]);
if (state === 'rejected')
return <Error/>;
if (state !== 'fulfilled') // 'pending' or undefined
return <Loader/>;
return (
<ul>
{users.map(({id, name}) => <li key={id}>{name}</li>)}
</ul>
);
};
Apart from tracking regular async actions, this hook can also be used for tracking the state of a polling based on an async action.
import {useEffect} from 'react';
import {useProgressiveCallback} from 'react-progressive-callback';
const pollingOptions = {
// can be a single number for a constant polling,
// or a function for a non-constant polling
delay: (value, iteration) => {
return iteration < 5 ? 1000 : 5000;
},
// can be a fixed number setting the maximum iteration count,
// or a function telling whether to proceed or not
repeat: (value, iteration) => {
if (iteration > 10)
throw new Error('too many iterations');
return value !== 'completed';
}
};
export const Status = () => {
let [state, pollStatus] = useProgressiveCallback(async () => {
let response = await fetch('/status');
return await response.json();
}, pollingOptions);
useEffect(() => {
pollStatus()
.catch(error => console.warn(error.message));
}, [pollStatus]);
if (state === 'rejected')
return <span>❌</span>;
return <span>{state === 'fulfilled' ? '✔️' : '⌛'}</span>;
};
As an additional parameter, the hook accepts an array of dependencies (defaulting to []
) serving the same purpose as with the React's useCallback()
hook.