Updating state from prop update will cause loop error

Question

I want to update state with value I'm getting from child component but for some strange reason I will get loop error if I'm using setstate in my method. Here is my code snippet:

class ParentTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayVal : '0',
    };
  }

  totalRec = value => {
    console.log('value', value); // will show the value '2' after getting it from ChildTab component 
    if (value) {
      // will cause infinite loop error
      this.setState({
        displayVal: value.toString(),
      });
    }
}

  render() {
    console.log('totalRec', this.totalRec()); // will show undefined because there is delay in getting the value.
    return (
      <div>
        <ChildTab totalRow={this.totalRec} {...this.props} />
        />
        Value: {this.state.displayVal} // will show undefined
      </div>
    );
  }
}

ChildTab component will be getting value from database so there will be delay. Whole page will be render first and so this.totalRec() is undefined. That's why I want to use state to rerender it.

However if totalRec() method is triggered, I will be getting react loop error when I try to use this.setState in totalRec() method.

How do I solve this problem? Thanks in advance.

If you have loaded data from child component `ChildTab`,then why u doing state lifting to `ParentTab` updating state which causing loop error?Why u dont want to load data from parent then passed to Child? — RIYAJ KHAN, Mar 04 '18 at 06:40
thats what ,you can load value from Parent instead Child.Isn't it. please see my 2nd quetition in above comment — RIYAJ KHAN, Mar 04 '18 at 06:44
Check this answer https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state/47349693#47349693 to understand better about structuring your code — Shubham Khatri, Mar 04 '18 at 07:04
you're correct. Instead of querying db in child component, I now did the query at parent and pass the result to child. Thank you for all your input. Problem solved. — sg552, Mar 04 '18 at 13:32

score 0 · Answer 1 · answered Mar 04 '18 at 08:27

To break the loop, you can simple return false in shouldComponentUpdate(nextProps, nextState) when this.state.displayVal === nextState.displayVal or more appropriate condition based on your problem. Refer to: https://reactjs.org/docs/react-component.html#shouldcomponentupdate
Another problem could be setState will not fire immediately, so any code depends on state might use the old value if you call it after setState. The solution is to write async function and await this.setState({...});. Refer to: https://reactjs.org/docs/react-component.html#setstate
The props passed into child component should be read-only. Do not change them in child component.

Updating state from prop update will cause loop error

1 Answers1