Maximum update depth exceeded. React

Question

I have a little problem with my code. When I render my component I've got this error on console console

Maximumupdate depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Below is part of my sample code:

MainComponent:

const saveData = (data) => {
    setDataArray(prevState => [...prevState, data]);
  }

return (
    <Fragment>
      {dataArray.map((element, index) => {
        return (<MyComponent data={element} index={index} save={saveData}/>)
      })}
    </Fragment>
)

dataArray is an array of objects

MyComponent:

const MyComponent = (props) => {
  const [data, setData] = useState(props.data);

  useEffect(() => {
    props.save(data);
  }, [data]);

}

Is the problem in updating the state up to main component? Or I can't render my child component using map()?

Could you try setting a unique keyprop to MyComponent in MainComponent ? I think it is because your MyComponent is getting unmounted & re-mounted on every render of MainComponent. To verify this, you can do console.log from an useEffect with empty dependency in MyComponent — Avinash Thakur
– Avinash Thakur, Commented Oct 6, 2021 at 16:42
I tried to add a unique key but still have same problem. I solved my problem by adding to each array id (create temporary now by Math.random() ) and change saveData method in parent component to that: const saveData = (data) => { let array = _.cloneDeep(dataArray); const index = _.findIndex(array, {id: data.id}); array.splice(index, 1, data); setDataArray(array); } I don't know if it correct/elegant way, but it works now — BitTree
– BitTree, Commented Oct 6, 2021 at 19:06

smac89 · Accepted Answer · 2021-10-06 16:59:12Z

2

Notice what happens when a child component updates its data:

It calls parent.saveData
This triggers a state change in the parent because the data array has changed
Because you didn't pass a key prop to children, React has no choice but to re-render all children with the updated data
Each child notices that its data prop has changed. This triggers the useEffect, so it also calls parent.saveData
The process repeats while the original render is still taking replace, etc, etc

Solution

Pass a key prop to each child. Do not use the index as key, instead use something that reflects the data being passed to the components

edited Oct 6, 2021 at 16:59

answered Oct 6, 2021 at 16:53

smac89

43.8k15 gold badges150 silver badges202 bronze badges

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

Collectives™ on Stack Overflow

Maximum update depth exceeded. React

1 Answer 1

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related