Get an error when passing parameters to a function

Question

I'm trying to send a request to the function onGridRowsUpdated with my parameters but it is throwing me the error of

Error: Maximum update 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.

I wonder what is the issue because I'm calling the parameters correctly.

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        console.log(fromRow, toRow, updated)
        rows[i] = { ...rows[i], ...updated };
      }
      this.definedColumn();
      return { rows };
    });
  };

render() {
    this.onGridRowsUpdated(1, 1, {D: '26'});
}

Answer 1

As you should know that whenever component state changes re-rendering happens.

As I can see in your code, you are calling a function to render some table and in that, you are calling setState() method which is asynchronous in nature. That's the reason re-rendering happening and causing Maximum update depth exceeded

render should always remain pure. It's a very bad practice to do side-effects things in there, and calling setState is a big red flag;

For more reference check this out - setState() method

Calling setState() inside render - Calling setState() in React from render method