Dead simple async and sync hooks for react
npm install @tutanck/resync_@tutanck/resync_ offers only 2 hooks :
- useAsync: set one or many async functions and allows you to follow their execution status.
- useSync: execute a callback whenever at least one of the one or many async functions set as paremeters is 'done'.
``JavaScript
import { fetch, add, update, remove } from 'src/api/products';
import { useAsync, useSync, isLoading } from '@tutanck/resync';
export default function App({ onError }) {
const [products, setProducts] = useState([]);
const [[fetchProducts, fetchStatus, fetchProcessId]] = useAsync(fetch);
const fetchAndSet = () => fetchProducts().then(setProducts).catch(onError);
// Will run 'fetchAndSet' whenever
// addStatus, updateStatus or removeStatus
// is equal to 'done'.
const [
[onAddProduct, addStatus, addProcessId],
[onUpdateProduct, updateStatus, updateProcessId],
[onRemoveProduct, removeStatus, removehProcessId]
] = useSync(fetchAndSet, add, update, remove);
const addProduct = onAddProduct(); // no custom id is set => resync will provide an unique id to identify each different call to 'addProduct'
useEffect(fetchAndSet, []); // first fetch
return isLoading(fetchStatus) ? (
) : (
disabled={isLoading(removeStatus)}
onClick={(id) => removeProduct(id)()} // with a custom id set to 'id', 'removehProcessId' will be equal to the passed 'id' for each call to removeProduct
>
Delete
API
> ## useAsync
$3
`JavaScript
useAsync(...asynFns);
`$3
1. asynFns: Whatever async functions you want. Note that the order matters.
$3
An array of arrays of 3 elements for each async function passed as parameters in this order:
1. An async function handle (asyncFn).
- asyncFn(id)(...args) accepts an optional custom id as first parameter.
* if you don't want to customize the id just set it to _undefined_.
2. An execution status between:
- _undefined_
- _'loading'_
- _'error'_
- _'done'_
3. An unique call id that changes each time the handle is called.
> ## useSync
$3
`JavaScript
useSync(callbackFn, ...asynFns);
``1. callbackFn: Whatever callback function you want (async or not).
2. asynFns: An array of whatever async functions you want. Note that the order matters.
An array of arrays of 3 elements for each async function passed as parameters in this order :
1. An async function handle (asyncFn).
- asyncFn(id)(...args) accepts an optional custom id as first parameter.
* if you don't want to customize the id just set it to _undefined_.
2. An execution status between:
- _undefined_
- _'loading'_
- _'error'_
- _'done'_
3. An unique call id that changes each time the handle is called.