initial commit

src/components/header.js

@@ -21,7 +21,7 @@ const Header = ({ location }) => {
   const [state, dispatch] = useContext(CartContext)
   const [miscState, miscDispatch] = useContext(MiscContext)
 
-  console.log(location)
+  // console.log(location)
 
   const getActiveSidebar = () => location.state?.activeSidebar
 

src/components/product/productBase.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"
 
 import Button from "../button"
 import AsInputNumber from "../inputNumber"
+import useHasMountedAndHasValue from "../useHasMountedAndHasValue"
 import { round } from "../../utils"
 
 const AddButton = (props) => {
@@ -87,6 +88,11 @@ const ProductBase = (props) => {
   data.price = round(data.price)
   const [count, setCount] = useState(countInCart || 1)
 
+  // Two-pass rendering technique, see:
+  // https://github.com/gatsbyjs/gatsby/issues/17914
+  // https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const hasMountedAndHasValue = useHasMountedAndHasValue(countInCart)
+
   useEffect(() => {
     if (countInCart) setCount(countInCart)
   }, [countInCart])
@@ -99,6 +105,7 @@ const ProductBase = (props) => {
     countInCart,
     ToggleButton,
     InputNumber,
+    hasMountedAndHasValue,
   }
 
   return <View {...viewProps} />

src/components/product/productCard.js

@@ -3,7 +3,6 @@ import { Link } from "gatsby"
 import Img from "gatsby-image"
 
 import Image from "../image"
-import useHasMounted from "../useHasMounted"
 
 const ProductCard = (props) => {
   const {
@@ -14,6 +13,7 @@ const ProductCard = (props) => {
     countInCart,
     InputNumber,
     ToggleButton,
+    hasMountedAndHasValue
   } = props
 
   const image = data.images ? (
@@ -22,15 +22,8 @@ const ProductCard = (props) => {
     <Image />
   )
 
-  //see: https://github.com/gatsbyjs/gatsby/issues/17914
-  // https://joshwcomeau.com/react/the-perils-of-rehydration/
-  const hasMounted = useHasMounted()
-
   return (
-    <div
-      key={hasMounted}
-      className={`productCard ${countInCart ? "active" : ""}`}
-    >
+    <div key={hasMountedAndHasValue} className={`productCard ${countInCart ? "active" : ""}`}>
       <Link to={`/${data.slug}/`}>{image}</Link>
       <div className="subtitle row">
         <span className="price">

src/components/useHasMountedAndHasValue.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+const useHasMountedAndHasValue = (value) => {
+  const [hasMountedAndHasValue, setHasMountedAndHasValue] = React.useState(
+    false
+  )
+  React.useEffect(() => {
+    if (value) setHasMountedAndHasValue(true)
+  }, [])
+  return hasMountedAndHasValue
+}
+
+export default useHasMountedAndHasValue