Undemanding pending state handling in React

This content originally appeared on DEV Community and was authored by axtk

While managing loading state is very common to React apps, most ways to track an async action’s state are wired into complex libs either for data fetching (like TanStack React Query, RTK Query) or shared state management (like Redux Toolkit). But sometimes adding one of these libs might just feel like an overkill. So what could we wish for?

It would be nice to handle the pending and error states of an async action without rewriting the async action, without affecting the existing app’s state management, and yet with a clear way to share the action’s state with multiple components, when necessary.

To address this task I created @t8/react-pending. Here’s what it takes to set up an async action’s state handling with this package:

+ import {usePendingState} from '@t8/react-pending';

  const ItemList = () => {
      const [items, setItems] = useState([]);
+     const [state, withState] = usePendingState('item-list');

      useEffect(() => {
-         fetchItems().then(setItems);
+         withState(fetchItems()).then(setItems);
      }, [fetchItems, withState]);

+     if (!state.complete)
+         return <p>Loading...</p>;

+     if (state.error)
+         return <p>An error occurred</p>;

      return <ul>{items.map(/* ... */)}</ul>;
  };

  const Status = () => {
+     const [state] = usePendingState('item-list');
+
+     return state.complete ? 'Done' : 'Busy';
  };

Adding the code that handles the pending state doesn’t alter the original structure and the async action’s code. In our example, the data is stored in local state, but it could be stored elsewhere.

The string parameter of the usePendingState() hook assigns a unique key to the particular state that can be used inside other components to refer to that state (like in Status in the example above). When the pending state is only required within a single component, we can just omit the hook’s parameter.

So when introducing a complex data fetching lib feels redundant, this small single-purpose lib, can offer a neat, minimalist way to set up the async action state handling, either local or shared, without affecting the app’s state.

This content originally appeared on DEV Community and was authored by axtk