-1

I am working on an ecommerce website. I create a global state using the library in the react-hooks-global-state (the link below). I want the array to save when I refresh or redirect the page. However, when I store it in local storage I get an infinite loop.

library: https://github.com/dai-shi/react-hooks-global-state

____

I tried this method with use effect, now putting the array in local storage works, but getting it out causes the infinite loop:

state:

import { createGlobalState } from "react-hooks-global-state";

const { setGlobalState, useGlobalState } = createGlobalState({
  cartItems: [],
});
export { useGlobalState, setGlobalState };

code:


const [cartItemslit] = useGlobalState("cartItems");

useEffect(() => {
    const data = window.localStorage.getItem("literalcartting");
    if (data !== null) {
      setGlobalState("cartItems", JSON.parse(data));
    }
  });
  useEffect(() => {
    window.localStorage.setItem(
      "literalcartting",
      JSON.stringify(cartItemslit)
    );
  }, cartItemslit);
user21159731
  • 13
  • 3

2 Answers2

2

Your code have the problem of infinite rendering, there is no dependency array in both of the useEffect hooks,

Try this code,

const [list, setCartItems] = useGlobalState("cartItems");

useEffect(() => {
  const data = window.localStorage.getItem("literalcartting");
  if (data !== null) {
    setCartItems(JSON.parse(data));
  }
}, []);

useEffect(() => {
  window.localStorage.setItem(
    "literalcartting",
    JSON.stringify(list)
  );
}, [list]);

In the first useEffect I have added an empty dependency array [] so that this useEffect hook is renderd only one time.

In the second one I have added [list] as a dependency array so the this useEffect hook only works only when there is some change in the list.

Edit - Persisting data in localStorage

Add this useEffect hook after the two hooks,

 useEffect(() => {
    return () => {
      window.localStorage.setItem("literalcartting", JSON.stringify(list));
    };
  }, []);
Ankit
  • 1,359
  • 1
  • 2
  • 15
0

this is everything so far:

const [list, setCartItems] = useGlobalState("cartItems");

  useEffect(() => {
    const data = window.localStorage.getItem("literalcartting");
    if (data !== null) {
      setCartItems(JSON.parse(data));
    }
  }, []);

  useEffect(() => {
    window.localStorage.setItem("literalcartting", JSON.stringify(list));
  }, [list]);
 

  const onAdd = (product) => {
    document.getElementById("sidebar").style.width = "420px";
    document.getElementById("main").style.filter = "blur(10px)";
    const exist = list.find((x) => x.id === product.id);
    if (exist) {
      setGlobalState(
        "cartItems",
        list.map((x) =>
          x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
        )
      );
    
    } else {
      setGlobalState("cartItems", [...list, { ...product, qty: 1 }]);
    }
  };
  const onRemove = (product) => {
    const exist = list.find((x) => x.id === product.id);
    if (exist.qty === 1) {
      setGlobalState(
        "cartItems",
        list.filter((x) => x.id !== product.id)
      );
    } else {
      setGlobalState(
        "cartItems",
        list.map((x) =>
          x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x
        )
      );

the infinite loop is gone, but still state is not saved when I refresh. I checked the local storage and indeed the array saved gets wiped out the moment I refresh the page. Any fix?
And thank you a lot for the help + thought I might add the functions where I alter the array.

user21159731
  • 13
  • 3