I'm getting this error Invariant Violation: Maximum update depth exceeded but can't find an infinite loop in my code

Question

I found online that this error is caused by a infinite loop being called but i couldn't figure out what in particular is causing the error it would be a huge help if a more experienced dev could help me out i spent a lot of time on it

also would like to know if i placed the javascript portion of the code in the wrong place

export default class App extends React.Component {

  constructor(props) {
     super(props);

     this.state = {
       soldPrice: 0,
       shippingCost: 0,
       shippingCharge: 0,
       itemCost: 0,
       profit: '',
       paypalFee: 0.30,
       paypalFeePercentage: 0.029,
       ebayFee: 0.1,
       profitMargin: '',
       paypalFeeTotal: '',
       ebayFeeTotal: '',
       profitColor: '',
       componentStyle: 'styles.inputStyleInactive',


     };
}


  render() {
     const { soldPrice, shippingCost, shippingCharge, itemCost,
       paypalFee, ebayFee, paypalFeePercentage,
      } = this.state;

     /*
       Define helper function that recovers a 0 as a default value
       if "non-a-number" results from parseFloat
       */
       const safeParseFloat = (str) => {
         const value = Number.parseFloat(str);

         return Number.isNaN(value) ? 0 : value;
       };

       let sp = safeParseFloat(soldPrice);
       const sc = safeParseFloat(shippingCost);
       const sCharge = safeParseFloat(shippingCharge);
       const ic = safeParseFloat(itemCost);
       const pf = safeParseFloat(paypalFee);
       const ef = safeParseFloat(ebayFee);
       const pfp = safeParseFloat(paypalFeePercentage);


      sp += sCharge;

      const calculation = sp - sp * pfp -
      pf
      - sp * ef - sc
      - ic;

      // if profit is more than 10 than the profit will be displayed as 00.00
      // otherwise it will be displayed as 0.00
      let i;

      if (calculation > 1000) {
        i = 6;
      } else if (calculation > 100) {
        i = 5;
      } else if (calculation > 100) {
        i = 3;
      } else if (calculation > 1) {
        i = 2;
      }

      const roundedNumber = calculation.toPrecision(i);
      this.setState({
       profit: roundedNumber
      });

      if (roundedNumber > 0) {
       this.setState({
         profitColor: '#26ae60'
       });
      } else if (roundedNumber < 0) {
       this.setState({
         profitColor: '#BA2F16'
       });
      }


      const ebayTotal = ef * sp;
      this.setState({
       ebayFeeTotal: ebayTotal
      });

      let p;

      if (ebayTotal > 1000) {
       p = 6;
      } else if (ebayTotal > 100) {
       p = 5;
      } else if (ebayTotal > 2.5) {
       p = 3;
      } else if (ebayTotal > 0) {
       p = 2;
      }

      const paypalTotal = pfp * sp + pf;
      this.setState({
       paypalFeeTotal: paypalTotal.toPrecision(p)
      });


      const profitPercentage = roundedNumber / ic * 100;
      this.setState({
      profitMargin: profitPercentage.toPrecision(i)
      });


   return (
     <View style={styles.container}>

     <View style={styles.header}>
     <Text style={styles.headerText}>Efees</Text>
     </View>

     <View style={styles.blocks}>

     <View style={styles.inputs} >
     <Text style={styles.inputText}>1. Sold Price</Text>

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>2. Shipping Charge</Text>

     {/*<NumberInput
     onchange={(shippingCharge) => this.setState({ shippingCharge })}
     />*/}
     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>3. Shipping Cost</Text>

     {/*<NumberInput
     onchange={(shippingCost) => this.setState({ shippingCost })}
     />*/}

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>4. Item Cost</Text>

     {/*<NumberInput
     onchange={(itemCost) => this.setState({ itemCost })}
     />*/}

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>5. Ebay Store?</Text>

     {/*<NumberInput
     onchange={(itemCost) => this.setState({ itemCost })}
     />*/}

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>6. Top Rated Seller?</Text>

     {/*<NumberInput
     onchange={(itemCost) => this.setState({ itemCost })}
     />*/}

     </View>
     </View>

     <View style={styles.results}>
      <Text style={styles.resultText}>eBay Fee:{this.state.ebayFeeTotal}</Text>
      <Text style={styles.resultText}>Paypal Fee:{this.state.paypalFeeTotal}</Text>
      <Text style={styles.resultText}>Profit %{this.state.profitMargin}</Text>
      <Text style={styles.profitResult}>
      TOTAL PROFIT:{this.state.profit}</Text>
      </View>

      <TouchableOpacity
      style={styles.calcButton}
      onPress={this.calculateProfit}
      >
         <Text style={styles.calcText}>Calculate </Text>
       </TouchableOpacity>

      </View>
 );
 }
}

Answer 1

you have put the setstate inside the render which ideally should be pure functiona. You could add some functions inside your class and on the component lifecycles you can trigger those all set state methods once which are now getting done inside the render method.

Calling setState methods inside the render method will lead you to infinite loop.

• Cross-check this StackOverflow answer once Calling setState in render is not avoidable and

• Check this github react discusison on the issue for more clarity

. https://github.com/facebook/react/issues/5591

Answer 2

You're setting state in render, which besides almost always being a bad idea, can lead to infinite re-renders.

You have a lot of things in state that don't appear to be stateful, rather simple local variables that may (or may not) need to be passed to child components--but not stateful, because there's nothing in your component other than state and render.