Estoy usando el shopify-buy , que me permite recuperar el carrito actual del usuario. Estoy tratando de almacenar ese carrito en mi CartProvider que luego se usa en mi componente Cart . El problema es que cuando recupero información del carrito, actúa un poco lento, por lo que mi componente debe actualizarse cuando cambia el estado, actualmente tengo lo siguiente en mi función getShopifyCart que se encuentra en mi CartProvider .
const [cartItems, setCartItems] = useState([]) const getShopifyCart = () => { return client.checkout .fetch(currentVendor.cartId) .then((res) => { const lineItemsData = res.lineItems.map((item) => { return { title: item.title, quantity: item.quantity, } }) setCartItems(lineItemsData) setLoading(false) }) .catch((err) => console.log(err)) } En mi componente Cart tengo el siguiente useEffect .
useEffect(() => { getShopifyCart() }, [cartItems]) Pero esto provoca un bucle infinito, aunque el estado de cartItems no cambia.
Está configurando el estado cartItems dentro getShopifyCart que está llamando dentro de un useEffect que tiene cartItems como una dependencia. Aunque el contenido de los datos no ha cambiado, está creando un nuevo objeto, por lo tanto, su hash también ha cambiado, lo que hace que useEffect se vuelva a llamar.
Si desea obtener inicialmente los datos y establecer el estado, debe pasar una matriz de dependencia vacía.
useEffect(() => { getShopifyCart() }, [])