Shopify + React: how Hydrogen makes it easier to improve UX

It’s been a few years since I worked with Shopify. Last time I did, I was working on a headless Shopify store written in Vue.js and GraphQL - when "headless" was still a new buzzword (and everyone was figuring out what that even meant).

At the time, I loved the flexibility of quitting Liquid, but the ecosystem was a bit like the Wild West. You had to manually wire everything up, optimise for performance, and hope nothing broke in production… (spoiler: it did, often).

Fast forward to today, and Shopify now has: Hydrogen. As someone returning to full-time development, Hydrogen feels like a breath of fresh air.

Headless Shopify, the early days

In 2020, I worked on a headless Shopify build with Vue.js as the frontend and GraphQL powering the data layer. It was cutting-edge (at the time). But as with any new tech, it came with its own set of headaches…

I remember spending hours trying to manage states, handle routing, and write custom GraphQL queries to get everything working (and this was with a team of 5 other developers).

So why did we bother? Simple: performance.

Shopify is a reliable checkout, but let’s be real - Shopify itself is usually the #1 blocker to good site performance and speed.

In fact, I once spent 12 hours trying to bump a non-headless Shopify store’s performance score from a dismal 50/100 to a respectable 90/100. This meant minifying code, rewriting functions, and ripping out half a dozen marketing plugins that were doing more harm than good. I got the score up, but it took a ton of effort and left me wishing for an easier way.

Enter Hydrogen: Shopify's secret weapon

This is where Hydrogen comes in. Shopify finally gave us a framework for headless development - built for React developers who don’t want to reinvent the wheel each time they build a custom storefront.

Hydrogen gives you built-in components, hooks, and even SSR out of the box, which means less time wrestling with setup and more time focusing on the UX.

Plus, with Hydrogen’s tight integration with Shopify, we’re no longer stuck with the performance pitfalls of traditional Shopify themes. Hydrogen lets us build fast and flexible storefronts without the bloat that comes with Shopify.

How I use Hydrogen to improve UX

One thing Hydrogen is great for is quickly improving UX. A common example could be using skeleton loaders to keep users engaged (something that’s quite annoying to set up in vanilla JS and Liquid).

Even on the fastest Shopify stores, there’ll be lag time as data loads. By using skeleton loaders, we can reassure users that content is on the way.

Hydrogen makes it much, much easier to build features like this. React's component structure lets you efficiently manage loading states, making it simple to implement something like a skeleton loader that updates smoothly as data loads.

Here's an example of how I set up a simple skeleton loader:

import React, { useState } from 'react';
import { useShopQuery, gql } from '@shopify/hydrogen';
import SkeletonLoader from './SkeletonLoader;

export default function Product() {
  const [loading, setLoading] = useState(true);
  const { data } = useShopQuery({
    query: gql`
      query ProductDetails {
        product(handle: "some-neat-product") {
          id
          title
          description
          images(first: 5) {
            edges {
              node {
                url
                altText
              }
            }
          }
        }
      }
    `,
    onCompleted: () => setLoading(false),
  });
  const product = data?.product;

  return (
    <div>
      {loading ? <SkeletonLoader /> : <ProductDetails product={product} />}
    </div>
  );
}

Hydrogen’s useShopQuery hook also makes fetching product data a breeze, and the simple state management lets me toggle between a skeleton loader and the real content. No more blank pages or clunky loading spinners - just a smooth, modern experience.

The future: how I plan to use Hydrogen

Hydrogen has made returning to Shopify development exciting. It’s refreshing to see a framework built specifically for the platform, reducing the friction that came with building custom storefronts in the past.

Whether you’re new to headless development or, like me, you’re coming back after a break, Hydrogen is definitely worth checking out.

Looking back, the 12-hour performance optimisation marathons and the early days of headless experimentation were valuable learning experiences. But I’m excited to leave those struggles behind and embrace a more performant future.