use-concurrent-state

Asynchronous, observable actions for React Hooks made easy. Heavily inspired by Ember Concurrency and the Folktale Task API.

Put Side Effects in your React application where they belong (hint: not useEffect).

Documentation

Work in progress. For now: API Docs

In a nutshell

import { useConcurrentState, getDependencies } from 'use-concurrent-state';

function ItemPicker({ items, fetchItemData }) {
  const [state, call, useTaskState] = useConcurrentState({}, { fetchItemData });
  const itemDataTask = useTaskState(loadItem);
  
  return (
    <SplitView>
      <ItemList items={items} onSelect={selectItem} />
      {itemDataTask.isRunning ? <Loader /> : <Item data={itemDataTask.result} />}
    </SplitView>
  );
  
  function selectItem(item) {
    // Note: there is a better way to do this.
    // This example just shows cancelation is possible ;)
    if (itemDataTask.isRunning) {
      itemDataTask.cancel();
    }
    call(loadItem, item);
  }
}

function* loadItem(item) {
  const { fetchItemData } = yield getDependencies();
  const data = yield fetchItemData(item);
  return data;
}

The above example transparently handles:

Cancelling the task if the component is unmounted
Observing the task state as it is started, restarted, resolved, cancelled, etc.
Always making the correct version of a dependency available to the task without spreading useCallback through your code

Features

Tasks can spawn subtasks
Tasks can collaboratively produce state
State production is handled through immer.js
Tasks can be cancelled
Resource cleanup with try-finally is possible
Tasks are cancelled automatically on component unmount
Task strategies allow for a declarative setup of tasks (limit concurrency, run sequentially, cancel on new, etc.)

pago/use-concurrent-state

use-concurrent-state

Documentation

In a nutshell

Features