ProductProvider provides incorrect selectedVariant when data prop is changed

[tiwac100]

What is the location of your example repository?

No response

Which package or tool is having this issue?

hydrogen-react

What version of that package or tool are you using?

^2024.1.1

What version of Remix are you using?

No response

Steps to Reproduce

Update data and initialVariantId to a different product and variant.

export default function Product({ data, initialVariantId }) {
  return (
    <ProductProvider data={data} initialVariantId={initialVariantId}>
      <ProductTest />
    </ProductProvider>
  );
}

function ProductTest() {
  const { product, selectedVariant } = useProduct();

  console.log(product.title, selectedVariant.title);

  return (
    <div>
      {product.title} {selectedVariant.title}
    </div>
  );
}

Expected Behavior

Using an apparel store as example I would expect the following behaviour:

1. Render with "t-shirt" product data and black / XL initialVariantId
2. console.log outputs T-Shirt Black / XL
3. Change data prop to "sweatshirt" product data and red / XS initialVariantId
4. console.log outputs Sweatshirt Red / XS

Actual Behavior

The actual behaviour carries over the selectedOptions to the new product data like this:

1. Render with "t-shirt" product data and black / XL initialVariantId
2. console.log outputs T-Shirt Black / XL
3. Change data prop to "sweatshirt" product data and red / XS initialVariantId
4. console.log outputs Sweatshirt Black / XL (provided the product has options with the same name and value available)
5. console.log outputs Sweatshirt Red / XS

[michenly]

I think this will depends on how you are changing the data and initialVariantId
Can you provide more information about that?