React Hooks

When building custom UI components for the WebbiOS Storefront, you will often need to fetch dynamic data such as products, categories, or the user’s cart.

To make this seamless, we provide a suite of React Hooks via @webbios/storefront-ui.

Using the Hooks

Our hooks use SWR under the hood for data fetching, caching, and revalidation.

useProducts

Fetch a list of products with optional filtering.

import { useProducts } from '@webbios/storefront-ui';

export function ProductList({ categoryId }) {
  const { data: products, error, isLoading } = useProducts({ categoryId });

  if (isLoading) return <div>Loading products...</div>;
  if (error) return <div>Error loading products.</div>;

  return (
    <div className="grid grid-cols-4 gap-4">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

useCart

Manage the customer’s shopping cart.

import { useCart } from '@webbios/storefront-ui';

export function CartWidget() {
  const { cart, addToCart, isAdding } = useCart();

  return (
    <div>
      <span>Items in cart: {cart?.items?.length || 0}</span>
      <button
        onClick={() => addToCart({ productId: '123', quantity: 1 })}
        disabled={isAdding}
      >
        Add Special Item
      </button>
    </div>
  );
}

Best Practices

• Edge Rendering: Remember that the first pass of the storefront is rendered on the edge using React Server components. Use client-side hooks only for dynamic data that depends on user interaction (like the cart) or data that isn’t critical for SEO.
• Prefetching: You can prefetch data during the edge rendering phase and pass it as initial data to the hooks to provide an instant loading experience.