Error with invariant violation: Maximum update depth exceeded

Question

I am a beginner in react native and I am trying to make a quiz app by using states and functions to check if the button pressed is the correct option based on the word given. However, I have received this error about invariant violation: Maximum update depth exceeded, could this be due to the way I use onPress?

import React, {Component} from 'react';
import {
  View,
  Text,
  SafeAreaView,
  TouchableOpacity,
  Image,
  ScrollView,
  StyleSheet,
} from 'react-native';
import {color} from 'react-native-reanimated';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';

const styles = StyleSheet.create({
  progressbar: {
    width: 218,
    height: 24,
    borderRadius: 12,
    borderColor: 'grey',
    borderWidth: 1,
    marginTop: 70,
    paddingRight: 79,
    paddingLeft: 79,
  },
  words: {
    fontFamily: 'Arial',
    fontSize: 85,
    fontWeight: 'bold',
  },
  image: {width: 345, height: 391, borderRadius: 50, marginTop: 31},
  button: {width: 100, height: 80, borderRadius: 29, marginHorizontal: 5},
});

export default class quizC extends React.Component {
  state = {
    progress: 0,
    progressbar: 0,
    progressbarwidth: 0,
    words: '',
    imagesource: '',
    option: 0,
    option1: '',
    option2: '',
    option3: '',
    correctoption: 0,
    score: 0,
  };
  _updateProgress() {
    switch (this.state.imagesource) {
      case 1:
        this.setState({words: 'c_t'});
        this.setState({progressbarwidth: 109});
        this.setState({correctoption: 2});
        this.setState({option1: 'c'});
        this.setState({option2: 'a'});
        this.setState({option3: 't'});
        //return cat
        break;

      case 2:
        this.setState({words: 'do_'});
        this.setState({progressbarwidth: 218});
        this.setState({correctoption: 3});
        this.setState({option1: 'd'});
        this.setState({option2: 'o'});
        this.setState({option3: 'g'});
        //return dog
        break;
    }
  }

  _checkcorrectans() {
    if (this.state.option == this.state.correctoption) {
      this.setState(prevState => ({progress: prevState.progress + 1}));
      this.setState(prevState => ({score: prevState.score + 1}));
      this.setState({imagesource: this.state.progress});
    } else {
      this.setState(prevState => ({progress: prevState.progress + 1}));
      this.setState({imagesource: this.state.progress});
    }
  }
  option1() {
    this.setState({option: 1});
    this._checkcorrectans();
    this._updateProgress();
  }

  option2() {
    this.setState({option: 2});
    this._checkcorrectans();
    this._updateProgress();
  }

  option3() {
    this.setState({option: 3});
    this._checkcorrectans();
    this._updateProgress();
  }

  render() {
    return (
      <SafeAreaView>
        <View style={styles.progressbar}>
          <View
            style={{
              height: 24,
              borderRadius: 12,
              backgroundColor: 'green',
              width: this.state.progressbarwidth,
            }}
          />
        </View>
        <View style={{alignItems: 'center', marginTop: 12}}>
          <Text style={styles.words}>{this.state.words}</Text>
        </View>
        <View style={styles.image}>
          <Image src={this._updateProgress()} />
        </View>
        <View style={{paddingLeft: 23, paddingRight: 23, flexDirection: 'row'}}>
          <TouchableOpacity onPress={this.option1()}>
            <View style={styles.button}>
              <Text>{this.state.option1}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.option2()}>
            <View style={styles.button}>
              <Text>{this.state.option2}</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.option3()}>
            <View style={styles.button}>
              <Text>{this.state.option3}</Text>
            </View>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

Answer 1

Try using

onPress={() => this.option1()} which is an anonymous function first and the calls option1 or onPress={ this.option1} . These will prevent re-rendering.

This error is due to when you call onPress={this.option1()} , it calls the function and causes the app to re-render which again causes function to be invoked, and hence an infinite loop. The best way would be calling it directly without parentheses onPress={this.option1} or create an anonymous function onPress={() => this.option1()}, which gets executed only once

hope it helps. feel free for doubts

Answer 2

Replace all of onPress method

from:

onPress={this.option1()}

To :

onPress={() => this.option1()}