score:0

Accepted answer

you can remove the wishlist variable from the dependency array.

when you call setwishlist, it'll update the state, the dependency array will check that it has changed and will call the useeffect once more, thus the infinite cycle.

with an empty dependency array, it'll only run when your component mounts, fetching the data from your local storage and initializing your app. from there on, all you need is to handle the state locally and updating the localstorage with any new wishlist items, but that useeffect seems to be for initialization only.

update #1

the core issue here was that op was using localstorage to transfer data between components, which is not the correct way of doing things. if you happen to stumble upon op's problem and you're doing that, make sure to study a little bit about sharing data between components. the most common ways are context api, redux and passing data down as props.

you can read more about context here.

score:0

here you have add wishlist in dependency array of useeffect and in that you have added condition if (wishliststorage.length > 0) { setwishlist(wishliststorage); } , because setting again the wishlist it will cause re-render and again useeffect will be triggered.

score:0

if i understand correctly, and you need this only for the initial render, then you can simply remove wishlist from the dependency array.

const [wishlist, setwishlist] = react.usestate([]);

react.useeffect(() => {
   if (typeof window !== "undefined") {
     const wishliststorage =
     localstorage.getitem("wishlist") === null
     ? []
     : [...json.parse(localstorage.getitem("wishlist"))];

     if (wishliststorage.length > 0) {
       setwishlist(wishliststorage);
     }
  }
}, []);

score:0

you use wishlist as the deps of useeffect hooks, when the wishlist cache exists, wishliststorage is an object parsed from the local storage json string. then, you call setwishlist(wishliststorage), cause the hook re-render, the wishlist will have a new reference. the useeffect will execute again when its dependencies changes. that's why re-render infinitely.

you could use lazy initial state

the initialstate argument is the state used during the initial render. in subsequent renders, it is disregarded. if the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render

use the cache from the local storage to initial your state if it exists, otherwise, returns a default value.

e.g:

const [wishlist, setwishlist] = react.usestate(() => {
 if (typeof window !== "undefined") {
    const wishliststorage =
       localstorage.getitem("wishlist") === null
       ? []
       : [...json.parse(localstorage.getitem("wishlist"))];
    return wishliststorage;
  }
  return [];
);

score:0

you are using setwishlist in useeffect that's observe wishlist, that's why it's lead you to infinity loop cuz when wishlist value changed it will execute the code in useeffect again and again so for my solution i saw localstorage in useeffect i would think it's would be only checked in first render, so you can simply remove [wishlist] -> []

  const [wishlist, setwishlist] = react.usestate([]);

  react.useeffect(() => {
     if (typeof window !== "undefined") {
       const wishliststorage =
       localstorage.getitem("wishlist") === null
       ? []
       : [...json.parse(localstorage.getitem("wishlist"))];

     if (wishliststorage.length > 0) {
       setwishlist(wishliststorage);
  }
}


}, []);

score:1

just remove the wishlist from the dependencies

     react.useeffect(() => {
     if (typeof window !== "undefined") {
       const wishliststorage =
       localstorage.getitem("wishlist") === null
       ? []
       : [...json.parse(localstorage.getitem("wishlist"))];

     if (wishliststorage.length > 0) {
       setwishlist(wishliststorage);
  }
}


}, []);

Related Query

More Query from same tag