Estoy tratando de crear un carrito de compras, en 1 componente, los artículos se agregan al carrito de compras que coloca estos datos en el almacenamiento local.

El componente del carrito de compras se ve así, primero con este código:

 useEffect(()=>{ SaveToShoppingbag(); },[])

SaveToShoppingBag() , se ve así:

 let SaveToShoppingbag = () =>{ if(JSON.parse(localStorage.getItem('Shoppingbag')) != null){ SetShoppingbag(JSON.parse(localStorage.getItem('Shoppingbag'))) } }

En base a eso, se activa el siguiente useEffect:

 useEffect(()=>{ SetTotalPrice(0) TotalPrices= [] CalculatePrice() },[Shoppingbag])

Los cálculos de precios son correctos. Si una cantidad del producto cambia en el componente, esto también se resuelve perfectamente. Solo cuando agrego un producto al carrito de compras desde el otro componente ( localstorage.getItem('shoppingbag') ) no se agrega, lo que probablemente se deba a ,[] en useEffect. Sin embargo, si omito esto, el precio sigue contando porque responde a un cambio en la bolsa de la compra ( ,[Shoppingbag] )

Entonces, ¿alguien tiene una solución? ¿Qué sucede si se agrega un elemento al almacenamiento local al que reacciona useEffect?

Lo que ya intenté es agregar un eventlistner('storage') pero el navegador no responde porque probablemente tenga que ver con SSR porque estoy usando NextJS.