Collection of general purpose React Hooks.
import { useArrayState } from '@fpc/hooks';
const [data, updateData] = useArrayState(initialArg);
initialArg
must be an iterable
or a function that returns an iterable that is used to initialize data
for the initial render.
updateData
accepts an iterable iter
or a function fn
that returns an iterable.
- In the former case a re-render will be triggered and
the new data will be
[ ...data, ...iter ]
. - If
updateData
receivesfn
the data in the next render will befn(data)
.
Note
updateData
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.
import { useFetch } from '@fpc/hooks';
const [fetchResponsePromise, refetch] = useFetch(resource, init);
resource
, init
and fetchResponsePromise
have the same semantic of browser
fetch,
refetch
is a function that can be called to fetch again the given resource
and trigger a re-render.
⚠ Be careful about render loops ⚠
import React from 'react';
import { useFetch, usePromise } from '@fpc/hooks';
function App() {
const [responsePromise, refetch] = useFetch(myResource);
const [res, err, status] = usePromise(responsePromise.then(res => res.text()));
return <p>{res}</p>;
}
This will cause a render loop because responsePromise.then()
will produce a new
Promise
at each render that will trigger a re-render.
What you need to do is:
- Wrap the promise in a function
() => responsePromise.then(res => res.text())
- Pass the reference of the promise before
then
inusePromise
's dependency list
function App() {
const [response, refetch] = useFetch(myResource);
const [res, err, status] = usePromise(() =>
response.then(res => res.text())
, [response]);
return <p>{res}</p>;
}
Note
refetch
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.
As you see in useFetch deal with promises can be
non-trivial, but since most of the time you just want response.text()
or response.json()
these utilities make life a bit easier:
import React from 'react';
import { useJsonFetch } from '@fpc/hooks';
function App() {
const [json, err, status, refetch] = useJsonFetch(myResource);
return <p>{JSON.stringify(json)}</p>;
}
json
is eitherundefined
or the parsed responseerr
isundefined
or contains an errorstatus
is one of'pending'
,'resolved'
or'rejected'
refetch
can be called to re-trigger the network request and re-render
Note
refetch
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.
import { useLazy } from '@fpc/hooks';
const [value, update] = useLazy(fn, initialValue);
During the initial render value
will be initialValue
(undefined
if not passed).
Calling the update
function will trigger a re-render with value
setted to fn()
.
Note
update
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.
import { useLazyPromise } from '@fpc/hooks';
const [value, error, state, update] = useLazyPromise(fn, initialValue);
fn
must be a function that returns a thenableinitialValue
is optional andundefined
by default, it's used asvalue
for the first rendervalue
isinitialValue
untilupdate
is called, then will beundefined
until the promise is resolvederror
is eitherundefined
or contains the promise's errorstate
is'idle'
untilupdate
is called for the first time, then is'pending'
and finally'resolved'
or'rejected'
update
is a function that will trigger a call tofn
and a re-render
Note
update
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.
import { useObjectState } from '@fpc/hooks';
const [state, updateState] = useObjectState(initialArg);
initialArg
must be an object or a function that returns an object
that is used to initialize state
for the initial render.
updateState
accepts an object obj
or a function fn
that returns an object.
- In the former case a re-render will be triggered and
the new
state
will be{ ...state, ...obj }
. - If
updateState
receivesfn
thestate
in the next render will befn(data)
.
Note
updateState
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.
import { usePollingPromise } from '@fpc/hooks';
const [value, error, status, update] = usePollingPromise(fn, initialValue);
fn
must be a function that returns a thenableinitialValue
is optional andundefined
by default, it's used asvalue
for the first rendervalue
isinitialValue
until the promise is resolvederror
is eitherundefined
or contains the promise's errorstatus
is one of'pending'
,'resolved'
or'rejected'
update
will trigger a new call tofn
, restart the promise resolving and re-render
Note
update
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.
import { usePollingValue } from '@fpc/hooks';
const [value, update] = usePollingValue(fn);
During the first render value
is fn()
. The update
function can be called
to produce a new value
and trigger a re-render.
Note
update
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.
import { usePromise } from '@fpc/hooks';
const [value, error, status] = usePromise(task, deps);
task
can be a thenable or a function that returns a thenable.deps
is an optional dependency array, just like the useEffect's onevalue
isundefined
or contains the value of the promiseerror
is eitherundefined
or contains the promise's errorstatus
is one of'pending'
,'resolved'
or'rejected'
import React from 'react';
import { useTextFetch } from '@fpc/hooks';
function App() {
const [text, err, status, refetch] = useTextFetch(myResource);
return <p>{text}</p>;
}
text
is eitherundefined
or the response bodyerr
isundefined
or contains an errorstatus
is one of'pending'
,'resolved'
or'rejected'
refetch
can be called to re-trigger the network request and re-render
Note
refetch
function identity is stable and won't change on re-renders just like useReducer'sdispatch
.