React warning Maximum update depth exceeded

Question

This is a follow up question to this question which is the nearest to my issue:

Infinite loop in useEffect

I am creating a small React.js app to study the library. I'm getting this warning:

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.

I got a functional component, in which there is this code:

const propertiesMap2 = new Map([  //There is also propertiesMap1 which has the same structure ["TITLE4",     {         propertyValues: {             myProperty10 : "myVal1",             myProperty11 : "myVal2",             myProperty12 : "myVal3",                                                                     },         isOpen: true     } ], ["TITLE5",     {         propertyValues: {             myProperty13 : "myVal4",             myProperty14 : "myVal5",             myProperty15 : "myVal6",                                                                      },         isOpen: true     } ], ["TITLE6",     {         propertyValues:{             myProperty16 : "myVal7",             myProperty17 : "myVal8",             myProperty18 : "myVal9",         },         isOpen: true     }                                                         ] ]);  const [properties, setPropertiesMapFunc] = useState(new Map()); useEffect(()=> {     let mapNum = Number(props.match.params.id);     setPropertiesMapFunc(mapNum === 1 ?propertiesMap1 : propertiesMap2); }, [properties]); 

The correct properties map is chosen each time, but like I said I get this error. Why do I get it, if the propertiesMap is constant without anything changing, and properties was passed as a parameter to setEffect, so I thought it would only re render when something there changes..

Answer 1

Because you are creating the map objects inside of your component function they will be recreated on every render. Because of that your effect will set a new map as the new state which will in turn trigger another re-render and your effect being called again which leads to an infinite update loop.

You can move the definition of your map objects outside of your component to fix this.