Shopping with Hooks

What might an e-commerce UI library might look like if rewritten with hooks? This shop app is an experiment using some of the patterns that might be helpful in the design of such a library. As the hooks ecosystem evolves over the coming months I plan to expand and refactor it slowly overtime to use as a reference.

The Goal

Build a general purpose shop UI library that can be imported into any react app, connected to an API, and provide pluggable shop functionality with minimal declarative setup. The excellent Algolia InstantSearch react library is an inspiration for this.

The Architecture

  1. <ShopProvider /> is a component exported by shop.js. It provides any global shop state for the shop app in the form of a useReducer. It can be used by the other hooks by providing an action dispatcher, and state.

  2. <CollectionProvider /> is another provider for connecting state between a list of products, and any number of search widgets. It should let the user have more than one collections with different filter state, and results.

  3. Functionality is exported from shop.js in the form of custom hooks like useCart. Each of these reducers can compose functionality both from the core React reducers and the other shop.js custom reducers. The goal is for the user to need only one custom hook import to perform a set of commonly related shop actions in their components. For example importing useCart should give a user all of the functionality required to manipulate or display the shopping cart.

Next Steps

  1. The provider pattern is causing unnecessary re-renders when adding an item to the cart because every component is consuming the global shop state which contains the cart state. I am experimenting with the new useMemo and rearranging the provider components and reducers to find the best way to do this.
  2. Should connect this to GRAPHQL and replace the static mock API, but it is still uncertain what the hooks API from Apollo will look like. I will probably evolve this slowly over time as things in the community solidify.
  3. The filtering functionality is currently a simplistic placeholder with only one possible filter type. I would like to flesh it out with server side filtering and sorting sorting. I would also like to render a complete filter and sort UI auto-generated by introspecting the GRAPHQL API.
  4. I would like to see what using Suspense with the useEffect hook would look like.