@etheryte/react-hooks

@etheryte/react-hooks

Common React hooks for worry-free state and control flow management.

Installation

yarn add @etheryte/react-hooks

Hooks

useUpdateEffect(effect, dependencies?)

Use effect on every update except the initial render. Accepts the same parameters as React.useEffect().

useAsyncEffect(asyncEffect, dependencies?)

React.useEffect() with async helpers. The effect is passed a function isStale() which returns a boolean value indicating whether the dependencies have changed between the start of the async effect and the moment you call it.

useAsyncEffect(async (isStale) => {
  const result = await longAsyncRequest();
  // If the dependencies changed between the request start and now, discard the result
  if (isStale()) {
    return;
  }
  setFoo(result);
}, dependencies);

useAsyncUpdateEffect(asyncEffect, dependencies?)

Use async effect on every update except the initial render. Accepts the same parameters as useAsyncEffect(). The effect is passed a function isStale() which returns a boolean value indicating whether the dependencies have changed between the start of the async effect and the moment you call it.

useAsyncState(getter, dependencies?)

A state variable like React.useState() that fetches its value from an async source whenever the dependencies change. Stale values are handled automatically.

const value = useAsyncState(async () => {
  if (condition) {
    return undefined;
  }
  return longAsyncRequest();
}, dependencies);