title: problem in sending or loading data to localstorage, when I do refresh- cart data is not there to show. I am loading data from firebase
body: <p>I am loading data from firebase, so when I refresh, it takes time to load it. And added data are not present in the cart that,s why I am not getting any product in the cart. But I did follow the same process to store user data, and it,s working fine, which means I am getting a registered profile in console. Can anyone suggest me a solution for getting data in the cart?</p>
  <p>sending data:</p>
  <pre><code>import { motion } from &quot;framer-motion&quot;;
  import React, { useEffect, useRef, useState } from &quot;react&quot;;
  import { MdShoppingBasket } from &quot;react-icons/md&quot;;
  import { actionType } from &quot;../context/reducer&quot;;
  import { useGlobalState } from &quot;../context/stateProvider&quot;;
  import NotFound from &quot;../img/NotFound.svg&quot;;
  const RowContainer = ({ flag, data, scrollValue }) =&gt; {
    const [{ cartItems }, dispatch] = useGlobalState();
    const [items, setItems] = useState([]);
  
    const rowContainer = useRef();
    const addToCart = () =&gt; {
      dispatch({
        type: actionType.SET_CARTITEMS,
        cartItems: items,
      });
      localStorage.setItem(&quot;cartItems&quot;, JSON.stringify(items));
    };
    useEffect(() =&gt; {
      addToCart();
    }, [items]);
    useEffect(() =&gt; {
      rowContainer.current.scrollLeft += scrollValue;
    }, [scrollValue]);
    return (
      &lt;div
        ref={rowContainer}
        className={`w-full my-12 flex items-center ${
          flag
            ? &quot;overflow-x-scroll scrollbar-none scroll-smooth&quot;
            : &quot;overflow-x-hidden flex-wrap justify-center&quot;
        }`}
      &gt;
        {data &amp;&amp; data.length &gt; 0 ? (
          data.map((item) =&gt; {
            const { id, price, imageURL, calories, title } = item;
            return (
              &lt;div
                key={id}
                className=&quot;w-350 min-w-[300px] md:min-w-[380px] md:my-10  backdrop-blur-lg mx-1 my-2 lg:mx-2  &quot;
              &gt;
                &lt;div className=&quot;w-full flex flex-row items-center justify-between bg-white rounded-lg drop-shadow-lg py-2 px-4 hover:bg-whiteAlpha min-h-[150px]&quot;&gt;
                  &lt;motion.img
                    whileHover={{ scale: 1.2 }}
                    src={imageURL}
                    alt=&quot;img&quot;
                    className=&quot;w-30 max-h-40 -mt-8 duration-100  drop-shadow-2xl&quot;
                  /&gt;
                  &lt;div className=&quot;flex flex-col items-end justify-end gap-4&quot;&gt;
                    &lt;motion.div
                      whileTap={{ scale: 0.75 }}
                      className=&quot;w-8 h-8 rounded-md bg-orange-500 hover:bg-orange-600 &quot;
                      onClick={() =&gt; setItems([...new Set(cartItems), item])}
                    &gt;
                      &lt;MdShoppingBasket className=&quot;text-white text-2xl m-1&quot; /&gt;
                    &lt;/motion.div&gt;
                    &lt;div className=&quot; w-full&quot;&gt;
                      &lt;p className=&quot;text-gray-800 md:text-lg text-base text-right&quot;&gt;
                        {title}
                      &lt;/p&gt;
                      &lt;p className=&quot;text-sm text-gray-500 text-right&quot;&gt;
                        &lt;span className=&quot;text-orange-600&quot;&gt;$&lt;/span&gt; {price}
                      &lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            );
          })
        ) : (
          &lt;div className=&quot;w-full flex flex-col items-center justify-center&quot;&gt;
            &lt;img src={NotFound} className=&quot;h-340&quot; alt=&quot;&quot; /&gt;
            &lt;p className=&quot;text-center my-2 text-xl text-red-500&quot;&gt;No data found&lt;/p&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  };
  export default RowContainer;
  </code></pre>
  <p><strong>fetching data</strong></p>
  <pre><code>    export const fetchCart = () =&gt; {
      const cartInfo =
        localStorage.getItem(&quot;cartItems&quot;) !== &quot;undefined&quot;
          ? JSON.parse(localStorage.getItem(&quot;cartItems&quot;))
          : localStorage.clear();
      return cartInfo ? cartInfo : [];
    };
  </code></pre>