Error: Maximum update depth exceeded. React state

Question

I am getting this error I guess due to bursting up the react's state but I don't know what is wrong going on here.

So I have parent-child relationship components as you can see below:

PARENT Component

class App extends Component {
    constructor(props){
        super(props);
        this.state={
            parentTime: 0,
        }
    };
    
    
    changeTimeState(childTime){
        //this.setState({parentTime: childTime})
        console.log("Parent state time: ",childTime)
    }
    render() {
        return (
            <div className="box">
                <Child time={this.state.parentTime} changeTime={this.changeTimeState.bind(this)}/>
            </div>
        );
    }
}

CHILD Component

class Child extends Component {
    constructor(props){
        super(props)
        this.state = {
            childTime: props.time
        }
    }

    componentDidMount(){
            if (this.state){
                setInterval(()=>{
                    this.setState({childTime: this.state.childTime+1})
                },1000)
            }
        }
    
    render() {
        return (
            <div newTime={this.props.changeTime(this.state.childTime)}/>
        );
    }
}

I am passing data in between them and uncommenting this.setState({parentTime: childTime}) in parent component causes that error. This is where I need help to understand and fix it.

This is because you call a function that changes state directly when passing it as some kind of prop to the div: <div newTime={this.props.changeTime(this.state.childTime)}/> ... a function that changes state should nnot be called like that. It should only be called on user interaction or at certain intervals. What are you trying to do with this? — Talmacel Marian Silviu
– Talmacel Marian Silviu, Commented Mar 30, 2021 at 22:09
To better explain what is happening...when you call the function like that the state of the parent component will change so it will re-render...with it also re-rendering the child component, which will call the function again changing the state of the parent component...which will re-render---and so we have an infinite loop — Talmacel Marian Silviu
– Talmacel Marian Silviu, Commented Mar 30, 2021 at 22:12
Hello @OliverRadini I want my timer to run in background and I am using child component for this because if I set componentDidMount() in parent component then it rerenders all the other components too which is why I tried to make seperate component to overcome that. (I dont know if there is any other way to do it) — punit-doc
– punit-doc, Commented Mar 31, 2021 at 9:00
Hi @TalmacelMarianSilviu thanks for taking your time. My timer is running in background so there can be no user interaction. How can I do it at certain intervals? — punit-doc
– punit-doc, Commented Mar 31, 2021 at 9:01

Bogdan Pryvalov · Accepted Answer · 2021-03-30 22:25:29Z

1

i don't know is it what you wanted 

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childTime: props.time,
    };
  }

  componentDidMount() {
    if (this.state) {
      setInterval(() => {
        this.setState({ childTime: this.state.childTime + 1 });
        this.props.changeTime(this.state.childTime);
      }, 1000);
    }
  }

  render() {
    return <div />;
  }
}

answered Mar 30, 2021 at 22:25

Bogdan Pryvalov

1561 silver badge8 bronze badges

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

4 Comments

punit-doc Over a year ago

Hello @BogdanPryvalov, yes this is exactly what I wanted. But it is giving me undefined when I set it to parent state with the the function changeTime().

punit-doc Over a year ago

And is there any way by which I do not have to re-render all other components when state is updated but my timer should always be running in the background?

Bogdan Pryvalov Over a year ago

i just don't understand why do you need state in child comp what it should count and what the difference between childTime and parentTime in the end?

punit-doc Over a year ago

yes you are right. I actually forgot to change that while taking out the specific piece of code from my complete long code

Collectives™ on Stack Overflow

Error: Maximum update depth exceeded. React state

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related