Error with invariant violation: Maximum update depth exceeded - react-native

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()}