How to update a ReactJS component based on changing values

Question

How to update a ReactJS component based on changing values

As a user, I have a wishlist feature on my website. Whenever I add items to my wishlist, they are stored in the localStorage. I also want to display the total number of items in my wishlist automatically without having to refresh the page.

Although the items are successfully added to the wishlist and displayed in the span tag, I encounter an issue in the console: Warning - Maximum update depth exceeded.

If anyone can provide assistance with this issue, it would be greatly appreciated. The code for this functionality is located in the Header component of the page.

/* Code for the Header component */

import React, { useContext, useState, useEffect } from 'react';
import { Container, Navbar, Nav } from 'react-bootstrap';
import { ThemeContext } from '../GlobalComponents/ThemeProvider';
import { BiSun, BiMoon, BiCart } from 'react-icons/bi';
// Other imports...

// Component definition...

In addition to the Header component, there is also a ProductCard page included below:

/* Code for the ProductCard component */

import React, { useState } from 'react';
import { Button, Card } from 'react-bootstrap';
import { useThemeHook } from '../GlobalComponents/ThemeProvider';
import { useCart } from 'react-use-cart';
import { BsCartPlus } from 'react-icons/bs';
// Other imports...

// Component definition...

javascript html jquery css reactjs

Answer 1

Answer №1

It seems like the warning you're encountering is due to an infinite loop caused by listening to and updating the same state.

To resolve this, consider updating your count state only when the "Add to wishlist" button is clicked. After adding a new item to the existing wishlist stored in the count state, the useEffect function will automatically sync the updated wishlist with the local storage.

export default function App() {
  // Pull wishlist items from localstorage and set them in state as initial state
  const [count, setCount] = useState(JSON.parse(localStorage.getItem("liked")) || []);

  // Function to add an item to the wishlist
  const addToWishlist = (item) => {
    setCount(prev => [...prev, item]);
  };

  // Update localstorage whenever the state changes
  useEffect(() => {
    localStorage.setItem("liked", JSON.stringify(count));
  }, [count]);

  return (
    <div>
      <h1>Wishlist</h1>
      <h2>{count.length}</h2>
      <button onClick={() => addToWishlist({id: 1, name: 'test'})}>Add to Wishlist</button>
    </div>
  );
}

Answer 2

It seems like the warning you're encountering is due to an infinite loop caused by listening to and updating the same state.

To resolve this, consider updating your count state only when the "Add to wishlist" button is clicked. After adding a new item to the existing wishlist stored in the count state, the useEffect function will automatically sync the updated wishlist with the local storage.

export default function App() {
  // Pull wishlist items from localstorage and set them in state as initial state
  const [count, setCount] = useState(JSON.parse(localStorage.getItem("liked")) || []);

  // Function to add an item to the wishlist
  const addToWishlist = (item) => {
    setCount(prev => [...prev, item]);
  };

  // Update localstorage whenever the state changes
  useEffect(() => {
    localStorage.setItem("liked", JSON.stringify(count));
  }, [count]);

  return (
    <div>
      <h1>Wishlist</h1>
      <h2>{count.length}</h2>
      <button onClick={() => addToWishlist({id: 1, name: 'test'})}>Add to Wishlist</button>
    </div>
  );
}

How to update a ReactJS component based on changing values

Answer №1

Similar questions

Determine the character count of the text within an *ngFor loop

Having trouble with React Testing Library throwing an error every time I try to use fireEvent on an input text?

Looking to include an if/then statement for an item that has been generated within a div?

Discover the white circle search bar display

Troubleshooting: Issue with XMLHTTPrequest functionality

Guide to customizing margins at specific breakpoints in Bootstrap 4 without using javascript

Form validation in AngularJS for controllers with multiple instances

What is the best way to handle multiple requests to the same URL in Cypress while waiting?

Obtain the file path and store it in a variable right after using fs.writefile

The scatterplot dots in d3 do not appear to be displaying

Exploring ways to programmatically include questions in the meta.js file of a Vue Webpack template

What is the reason for the 'admin' page not being displayed?

Steps for positioning an element to the left and center of a div

What is the best way to declare variables in an HTML document that can be accessed by an external JavaScript file when including the JavaScript code in the HTML?

Upgrade the arrow accordion in bootstrap by incorporating images instead

Menu: animated opening/closingIs this convenient, or

Managing the position of the caret within a content-editable div

What could be causing this error with creating an order on Paypal?

Improving the functionality of dynamically updating server-side rendered props

The package.json dependency is failing to update from ^0.0.130 to ^0.0.145 despite 1.0.145 being the most recent version available