@fpc/hooks NPM

@fpc/hooks

Collection of general purpose React Hooks.

API

useArrayState

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 receives fn the data in the next render will be fn(data).

useFetch

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 in usePromise'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>;
}

useJsonFetch

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 either undefined or the parsed response
err is undefined or contains an error
status is one of 'pending', 'resolved' or 'rejected'
refetch can be called to re-trigger the network request and re-render

useLazy

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

useLazyPromise

import { useLazyPromise } from '@fpc/hooks';

const [value, error, state, update] = useLazyPromise(fn, initialValue);

fn must be a function that returns a thenable
initialValue is optional and undefined by default, it's used as value for the first render
value is initialValue until update is called, then will be undefined until the promise is resolved
error is either undefined or contains the promise's error
state is 'idle' until update is called for the first time, then is 'pending' and finally 'resolved' or 'rejected'
update is a function that will trigger a call to fn and a re-render

useObjectState

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 receives fn the state in the next render will be fn(data).

usePollingPromise

import { usePollingPromise } from '@fpc/hooks';

const [value, error, status, update] = usePollingPromise(fn, initialValue);

fn must be a function that returns a thenable
initialValue is optional and undefined by default, it's used as value for the first render
value is initialValue until the promise is resolved
error is either undefined or contains the promise's error
status is one of 'pending', 'resolved' or 'rejected'
update will trigger a new call to fn, restart the promise resolving and re-render

usePollingValue

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.

usePromise

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 one
value is undefined or contains the value of the promise
error is either undefined or contains the promise's error
status is one of 'pending', 'resolved' or 'rejected'

useTextFetch

import React from 'react';
import { useTextFetch } from '@fpc/hooks';

function App() {
  const [text, err, status, refetch] = useTextFetch(myResource);

  return <p>{text}</p>;
}