Why React in Shopify Themes? Benefits and Trade-offs

/*
 * Traditional approach: Vanilla JS for a quantity selector
 * Problems with this pattern:
 * - No loading states while cart updates
 * - No error handling if API fails
 * - No optimistic updates (UI waits for server)
 * - Hard to coordinate with other components (cart icon, totals)
 * - Difficult to test in isolation
 */
document.querySelectorAll('.quantity-selector').forEach(selector => {
  const input = selector.querySelector('input');
  const plus = selector.querySelector('.plus');
  const minus = selector.querySelector('.minus');

  // Each element needs manual event binding
  plus.addEventListener('click', () => {
    input.value = parseInt(input.value) + 1;
    // No way to show loading state or handle errors gracefully
    updateCart(input.dataset.lineId, input.value);
  });

  minus.addEventListener('click', () => {
    if (parseInt(input.value) > 1) {
      input.value = parseInt(input.value) - 1;
      updateCart(input.dataset.lineId, input.value);
    }
  });
});

/*
 * React approach: Declarative, state-driven UI
 * Benefits visible here:
 * - State is explicit (quantity, isUpdating)
 * - Loading states are trivial to add
 * - Error handling with automatic rollback
 * - UI automatically syncs with state changes
 */
function QuantitySelector({ lineId, initialQuantity }) {
  // All UI state is declared upfront - easy to understand at a glance
  const [quantity, setQuantity] = useState(initialQuantity);
  const [isUpdating, setIsUpdating] = useState(false);
  const { updateLineItem } = useCart(); // Shared cart state via custom hook

  const handleChange = async (newQuantity: number) => {
    if (newQuantity < 1) return;

    // Optimistic update: show new value immediately for snappy UX
    setQuantity(newQuantity);
    setIsUpdating(true);

    try {
      await updateLineItem(lineId, newQuantity);
    } catch (error) {
      // Rollback: restore previous value if server request fails
      setQuantity(initialQuantity);
    } finally {
      setIsUpdating(false);
    }
  };

  // UI is a pure function of state - React handles DOM updates
  return (
    <div className={`quantity-selector ${isUpdating ? 'updating' : ''}`}>
      <button onClick={() => handleChange(quantity - 1)} disabled={quantity <= 1}>
        −
      </button>
      <span>{quantity}</span>
      <button onClick={() => handleChange(quantity + 1)}>
        +
      </button>
    </div>
  );
}

/*
 * Component composition: Build complex UIs from simple, focused pieces
 * Each component is self-contained with its own state and logic
 * Parent components orchestrate layout, children handle their own behavior
 */
<ProductPage>
  {/* MediaGallery manages its own zoom, lightbox, and thumbnail state */}
  <MediaGallery images={product.images} />
  <ProductInfo>
    <ProductTitle>{product.title}</ProductTitle>
    {/* VariantSelector handles option selection and availability checking */}
    <VariantSelector variants={product.variants} />
    {/* AddToCartButton manages loading states and cart API calls */}
    <AddToCartButton productId={product.id} />
  </ProductInfo>
  {/* RelatedProducts fetches its own data from Shopify Recommendations API */}
  <RelatedProducts productId={product.id} />
</ProductPage>

/*
 * Declarative state: You describe WHAT the UI should look like,
 * not HOW to update the DOM. React figures out the DOM changes.
 */

// All possible states are visible at the top of the component
const [selectedVariant, setSelectedVariant] = useState(defaultVariant);
const [isInCart, setIsInCart] = useState(false);
const [showQuickView, setShowQuickView] = useState(false);

// UI is a direct function of state - when state changes, UI updates automatically
return (
  <div>
    {/* Conditional rendering: modal only exists in DOM when showQuickView is true */}
    {showQuickView && <QuickViewModal variant={selectedVariant} />}
    {/* Props flow down: child components receive data and callbacks */}
    <VariantPicker
      selected={selectedVariant}
      onChange={setSelectedVariant}
    />
    {/* Disabled state is derived from isInCart - no manual DOM manipulation */}
    <AddButton disabled={isInCart} />
  </div>
);

/*
 * TypeScript: Catch errors at build time, not in production
 * Define interfaces once, get autocomplete and error checking everywhere
 */
interface Product {
  id: number;
  title: string;
  variants: Variant[];
  available: boolean;
}

// Props are typed - IDE shows available properties and catches typos
function ProductCard({ product }: { product: Product }) {
  // TypeScript catches this error at build time, before deployment
  return <h2>{product.titel}</h2>; // Error: 'titel' doesn't exist on type 'Product'
}

Request → Shopify Server → Liquid Renders → HTML
                                              ↓
                                    React Hydrates → Interactive UI

{%- comment -%}
  Liquid provides the SEO content that search engines see
{%- endcomment -%}
<div id="product-info" data-product="{{ product | json | escape }}">
  <h1>{{ product.title }}</h1>
  <p>{{ product.description }}</p>
  {%- comment -%} React enhances this with interactivity {%- endcomment -%}
</div>