@etheryte/react-hooks

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

Installation

yarn add @etheryte/react-hooks

Hooks

useUpdateEffect(effect, dependencies?)

Same as useEffect, but only when the dependencies change, not on the first render.
useEffect fires on the first render and then whenever dependencies change, useUpdateEffect fires only when the dependencies change.

useAsyncEffect(asyncEffect, dependencies?)

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?)

Combines useUpdateEffect and useAsyncEffect.

useAsyncState(getter, dependencies?)

A state variable similar to 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);