From 79f55451a9f35a187cacc7b52b514f7f95c27257 Mon Sep 17 00:00:00 2001
From: Kara Daviduik <kara.daviduik@shopify.com>
Date: Thu, 29 Jan 2026 01:10:19 -0500
Subject: [PATCH] fix(skeleton): remove dead gift card client-side state
 tracking

The CartGiftCard component maintained a useRef that accumulated gift card
codes client-side, but this ref was never read - only written to. This
created potential for "zombie" bugs where the client and server state
could diverge (the ref only grew, never shrunk when cards were removed).

Since the GiftCardCodesAdd action handles everything server-side and the
UI displays gift cards directly from the GraphQL response (cart.appliedGiftCards),
this client-side tracking was redundant and potentially problematic.

Removed:
- appliedGiftCardCodes useRef (dead code - write-only)
- saveAppliedCode function (populated unused ref)
- Render-prop pattern with side effects in AddGiftCardForm
- Unused FetcherWithComponents import
---
 package-lock.json                             | 14 +++++-----
 .../skeleton/app/components/CartSummary.tsx   | 27 ++-----------------
 2 files changed, 9 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 568f7bfe55..ae6a94764d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32009,7 +32009,7 @@
     },
     "packages/cli": {
       "name": "@shopify/cli-hydrogen",
-      "version": "11.1.6",
+      "version": "11.1.7",
       "license": "MIT",
       "dependencies": {
         "@ast-grep/napi": "0.34.1",
@@ -32393,7 +32393,7 @@
     },
     "packages/create-hydrogen": {
       "name": "@shopify/create-hydrogen",
-      "version": "5.0.26",
+      "version": "5.0.27",
       "license": "MIT",
       "dependencies": {
         "@ast-grep/napi": "0.34.1"
@@ -32968,11 +32968,11 @@
     },
     "packages/hydrogen": {
       "name": "@shopify/hydrogen",
-      "version": "2025.7.2",
+      "version": "2025.7.3",
       "license": "MIT",
       "dependencies": {
         "@shopify/graphql-client": "1.4.1",
-        "@shopify/hydrogen-react": "2025.7.1",
+        "@shopify/hydrogen-react": "2025.7.2",
         "content-security-policy-builder": "^2.2.0",
         "flame-chart-js": "2.3.1",
         "isbot": "^5.1.21",
@@ -33537,7 +33537,7 @@
     },
     "packages/hydrogen-react": {
       "name": "@shopify/hydrogen-react",
-      "version": "2025.7.1",
+      "version": "2025.7.2",
       "license": "MIT",
       "dependencies": {
         "@google/model-viewer": "^4.0.0",
@@ -35374,9 +35374,9 @@
       }
     },
     "templates/skeleton": {
-      "version": "2025.7.2",
+      "version": "2025.7.3",
       "dependencies": {
-        "@shopify/hydrogen": "2025.7.2",
+        "@shopify/hydrogen": "2025.7.3",
         "graphql": "^16.10.0",
         "graphql-tag": "^2.12.6",
         "isbot": "^5.1.22",
diff --git a/templates/skeleton/app/components/CartSummary.tsx b/templates/skeleton/app/components/CartSummary.tsx
index cd0dad0eff..1f5eeca95c 100644
--- a/templates/skeleton/app/components/CartSummary.tsx
+++ b/templates/skeleton/app/components/CartSummary.tsx
@@ -3,7 +3,6 @@ import type {CartLayout} from '~/components/CartMain';
 import {CartForm, Money, type OptimisticCart} from '@shopify/hydrogen';
 import {useEffect, useRef} from 'react';
 import {useFetcher} from 'react-router';
-import type {FetcherWithComponents} from 'react-router';
 
 type CartSummaryProps = {
   cart: OptimisticCart<CartApiQueryFragment | null>;
@@ -122,27 +121,17 @@ function CartGiftCard({
 }: {
   giftCardCodes: CartApiQueryFragment['appliedGiftCards'] | undefined;
 }) {
-  const appliedGiftCardCodes = useRef<string[]>([]);
   const giftCardCodeInput = useRef<HTMLInputElement>(null);
   const giftCardAddFetcher = useFetcher({key: 'gift-card-add'});
 
-  // Clear the gift card code input after the gift card is added
   useEffect(() => {
     if (giftCardAddFetcher.data) {
       giftCardCodeInput.current!.value = '';
     }
   }, [giftCardAddFetcher.data]);
 
-  function saveAppliedCode(code: string) {
-    const formattedCode = code.replace(/\s/g, ''); // Remove spaces
-    if (!appliedGiftCardCodes.current.includes(formattedCode)) {
-      appliedGiftCardCodes.current.push(formattedCode);
-    }
-  }
-
   return (
     <div>
-      {/* Display applied gift cards with individual remove buttons */}
       {giftCardCodes && giftCardCodes.length > 0 && (
         <dl>
           <dt>Applied Gift Card(s)</dt>
@@ -160,11 +149,7 @@ function CartGiftCard({
         </dl>
       )}
 
-      {/* Show an input to apply a gift card */}
-      <AddGiftCardForm
-        saveAppliedCode={saveAppliedCode}
-        fetcherKey="gift-card-add"
-      >
+      <AddGiftCardForm fetcherKey="gift-card-add">
         <div>
           <input
             type="text"
@@ -183,11 +168,9 @@ function CartGiftCard({
 }
 
 function AddGiftCardForm({
-  saveAppliedCode,
   fetcherKey,
   children,
 }: {
-  saveAppliedCode?: (code: string) => void;
   fetcherKey?: string;
   children: React.ReactNode;
 }) {
@@ -197,13 +180,7 @@ function AddGiftCardForm({
       route="/cart"
       action={CartForm.ACTIONS.GiftCardCodesAdd}
     >
-      {(fetcher: FetcherWithComponents<any>) => {
-        const code = fetcher.formData?.get('giftCardCode');
-        if (code && saveAppliedCode) {
-          saveAppliedCode(code as string);
-        }
-        return children;
-      }}
+      {children}
     </CartForm>
   );
 }