Uncaught RangeError: Maximum call stack size exceeded in React application

Question

Please help me. I am new in React and try to build an application to add contact in Local storage and delete contact. Following are the code of my App.js

import React, {useState, useEffect} from 'react'
import {uuid} from 'uuidv4'
import AddContact from './AddContact'
import ContactList from './ContactList'
import Header from './Header'

function App() {
  //useState Hooks in React
  const LOCAL_STORAGE_KEY = 'contacts'
  const [contacts, setContacts] = useState([])

  const addContactHandler = (contact) => {
    console.log(contacts)
    setContacts([...contacts, {id: uuid(), ...contact}])
  }

  const removeContactHandler = (id) => {
    const newContactList = contacts.filter((contact) => {
      return contact.id !== id
    })
    setContacts(newContactList)
  }
  useEffect(() => {
    const retrieve_contact = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
    if (retrieve_contact) {
      setContacts(retrieve_contact)
    }
  }, [])

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts))
  }, [contacts])

  return (
    <div className="ui container">
      <Header />
      <AddContact addContactHandler={addContactHandler} />
      <ContactList contacts={contacts} getContactId={removeContactHandler} />
    </div>
  )
}

export default App

I got the error Uncaught RangeError: Maximum call stack size exceeded.

Please help me how can i remove this error. Thank you!

Please log retrieve_contact. I;d willing to bet that retrieve_contact is always true value — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Feb 11, 2022 at 11:25
@captain-yossarian even if that is true, there is no reason why it should result in an infinite loop. That useEffect hook is only going to execute once. — Ben Wainwright
– Ben Wainwright, Commented Feb 11, 2022 at 11:55
The problem i am facing in this line ` setContacts([...contacts, { id: uuid(), ...contact }]);` id:uuid() when i remove id: uuid() then i got the same key for each element — heena shafique
– heena shafique, Commented Feb 11, 2022 at 12:35
when exactly does it say it? after you click something or right away? it looks like more code and explanation will help to understand the problem more easily — GiL Itzhaky
– GiL Itzhaky, Commented Feb 12, 2022 at 19:11

Kraken · Accepted Answer · 2023-07-18 16:16:33Z

1

You are updating react state inside useEffect, which triggers an infinite loop.

useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts))
  }, [contacts])

In short, you told useEffect to run when there are changes to contacts (by passing them into the dependency array as the second param to useEffect), causing it to run every time contacts changes, which triggers a state change to contacts, which triggers the useEffect loop again, infinitely. If the array was empty, it would run once on start.

For what you are trying to do here, it makes more sense to update your store when you add or remove contacts, i.e. call the storage functions from within your event handlers.

Here's a working code sandbox with the code you provided.

edited Jul 18, 2023 at 16:16

answered Jan 22, 2023 at 11:05

Kraken

5,9603 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MarkM Over a year ago

I dont quite follow your solution. Everytime contacts changes, the useEffect will fire. Shouldn't that only result in storing an item in local Storage? Why would the call to localStorage trigger a state change for contacts?

Kraken Over a year ago

@MarkM I think you're right! I tried to get the sandbox to reproduce the error again, and was not able to sort it out. However, that maximum call exceeded is usually a result of updating state from inside useEffect. It could be happening elsewhere in the stack

Collectives™ on Stack Overflow

Uncaught RangeError: Maximum call stack size exceeded in React application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related