Hydrogen hooks overview
Hydrogen hooks are functions that allow you to use state and other methods inside Hydrogen components.
Framework hooksAnchor link to section titled "Framework hooks"
Framework hooks are hooks that are available in the Hydrogen framework.
|useNavigate||Imperatively navigates between routes.|
|useRouteParams||Retrieves the parameters of an active route.|
|useSession||Reads session data in server components.|
Primitive hooksAnchor link to section titled "Primitive hooks"
Primitive hooks are the building blocks for different component types, including products, variants, and cart.
|useLoadScript||Loads an external script tag on the client-side.|
|useMoney||Takes a MoneyV2 object and returns a default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by
Global hooksAnchor link to section titled "Global hooks"
Global hooks are used to fetch data from server components.
|fetchSync||Makes API requests and is the recommended way to make simple fetch calls on the server.|
|useQuery||Executes an asynchronous operation like
|useServerProps||Manages server props passed to your server components when using Hydrogen as a React Server Component framework.|
|useShop||Accesses values within the
|useShopQuery||Makes server-only GraphQL queries to the Storefront API.|
|useUrl||Retrieves the current URL in a server or client component.|
Product and variant hooksAnchor link to section titled "Product and variant hooks"
Product and variant hooks relate to the goods, digital downloads, services, and gift cards that a merchant sells. If a product has options, like size or color, then merchants can add a variant for each combination of options.
|useProduct||Returns the product object of the nearest
|useProductOptions||Returns an object that enables you to keep track of the selected variant and/or selling plan state, as well as callbacks for modifying the state.|
Cart hooks relate to the merchandise that a customer intends to purchase.
|useCart||Provides access to the Storefront API's Cart object and related callbacks to manipulate the cart.|
|useCartLine||Provides access to the Storefront API's CartLine object.|
Localization hooksAnchor link to section titled "Localization hooks"
Localization hooks relate to creating shopping experiences for a global audience in local languages and currencies.
|useCountry||Returns a tuple of the current localization country and a function for updating it.|
Metafield hooksAnchor link to section titled "Metafield hooks"
Metafield hooks relate to attaching specialized information to Shopify resources, such as part numbers or release dates.
|useParsedMetafields||Returns an array of parsed metafields.|