useEffect causing component to re-render infinitely

user_12889691 0
Viewed 1549

I am adding items to the wishlist and once it is added I am trying to re-render the Heart icon to have a number on it to indicate that the Item has been added to the wishlist. What I want to achieve is similar to Twitter's like button, when someone likes the post the number of likes increases immediately. So, in my case when someone likes (wishlists) the product it will increase the number on top of Heart icon. I am using local storage to get the items that are added to the wishlist, and I can re-render the Wishlist component when a new Item is added inside the effect but it makes the component to re-render infinitely which is giving me a warning of Warning: Maximum update depth exceeded

Here is my effect;

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);
  }
}


}, [wishlist]);

If I remove the wishlist from dependancy array, I need to refresh the page to see the correct number of items. What am I doing wrong here and what would be the best way to approach this. Thank you!

react-hooks reactjs local-storage javascript
6 Answers

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.

user_157479660

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);
  }
}


}, []);
user_129021080

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);
     }
  }
}, []);
user_151691450

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.

user_87547820

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 [];
);
user_64635580

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);
  }
}


}, []);
user_78425390
Related