Skip to content
Advertisement

Maximum update depth exceeded with useEffect & map

I am facing this when I am trying to set form error object. Basically, I want to show the errors below each input field. In response, I am getting an array of objects how do I set to my error object?

Error – Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render.

JavaScript

Advertisement

Answer

your effect depends on userRegistrationError which is an object, reference based. Each time useEffect runs,setUserRegistrationError creates a new object reference, which leads to an infinite loop since references won’t be the same as the previous one.

One approach to avoid this issue and keep the right references, is to pass a callback function to setUserRegistrationError instead than a value. This way userRegistrationError is no longer a dependency, it will be an argument to your function instead:

JavaScript
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement