When I set State in function component I getting too many render error - react-native

Question

UserAttemp.js
const setModal = ({ item }) => {
const perc = (item.score * 100) / item.total;
console.log("perc", perc);
if (perc >= 70) {
setImagePath(smile);
} else if (perc >= 40 && perc < 70) {
setImagePath(dis);
} else {
setImagePath(sad);
}
setTotal(item.total);
console.log("item_id",item.attempt_id);
console.log("item_total",item.total)
// setAttemp(item.attempted_question);
setScore(item.score);
setWrong(item.wrong);
setSkip(item.skip);
setModalVisible(true);
// setboolThree(false);
// setboolTwo(true);
};
const renderItem = ({ item }) => {
return (
<TouchableOpacity
style={styles.userAttemptItemContainer}
onPress={() => setModal({ item })}
>
<View>
<Text style={{alignSelf:'center',color:'black',textTransform:'uppercase'}}>{item.attempt_id}</Text>
<View
style={{ flexDirection: "row", justifyContent: "space-around" }}
>
<Text style={styles.userAttempRenderText}>Score</Text>
<Text style={styles.userAttempRenderText}>{item.score}</Text>
</View>
<Date_time
item={item}/>
</View>
</TouchableOpacity>
);
};
return (
<View>
<Loader bool={bool} />
{!bool && (
<View>
<View style={{ alignSelf: "center" }}>
<Text style={{ color: "black", fontSize: 20 }}>{title}</Text>
</View>
<FlatList
data={attempt}
renderItem={renderItem}
ListFooterComponent={<View style={{ height: 0, marginBottom: 90 }}></View>}
ListEmptyComponent={() => <EmptyListMessage />}
></FlatList>
</View>
)}
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={styles.ResultModalCenterView}>
<View style={styles.ResultModalView}>
<View style={styles.ResultModalClosebuttonCon}>
<Pressable
style={[styles.ResultModalButton, styles.ResultButtonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Icon name="close" size={20} color="black" />
</Pressable>
</View>
<ModalView
score={score}
total={total}
wrong={wrong}
title={title}
skip={skipp}
attempted={attempted}
imagePath={imagePath}
/>
</View>
</View>
</Modal>
</View>
);
};
export default UserAttemps;
Date_time.js
import React, { useState } from 'react'
import { View,Text } from 'react-native';
const Date_time=(props)=> {
const [dateBool,setDateBool]=useState(props.item?false:true);
const [timeBool,setTimeBool]=useState(props.item?false:true);
if(props.item.start_date==props.item.end_date){
setDateBool(true);
}
if(props.item.start_time==props.item.end_time){
setTimeBool(true);
}
return (
<View>
{dateBool&&<View style={{flexDirection:'row',justifyContent:'center',}}>
<Text style={{color:'black',}}>Date:</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.start_date}</Text>
</View>}
{!dateBool&&<View style={{flexDirection:'row',justifyContent:'center',}}>
<Text style={{color:'black',}}>Date:</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.start_date}</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.end_date}</Text>
</View>}
{/* <View style={{flexDirection:'row',justifyContent:'center'}}>
<Text style={{color:'black'}}>Date</Text>
<Text style={{color:'black'}}>{Date}</Text>
</View> */}
{ timeBool&& <View style={{flexDirection:'row',justifyContent:'center',}}>
<Text style={{color:'black',}}>Time:</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.start_time}</Text>
</View>}
{timeBool&&<View style={{flexDirection:'row',justifyContent:'center',}}>
<Text style={{color:'black',}}>Time:</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.start_time}</Text>
<Text style={{color:'black',marginLeft:5}}>{props.item.end_time}</Text>
</View>}
</View>
)
}
export default Date_time;
I am calling component in UserAttemp.js
I have made a component of Date_time in that I am trying to set state in the body of function component but i am getting too manay render error due to the useState hook
I want to set State in the body of function Date_time.jjs component how to set?

Answer 1

Updating state outside the return function, makes it go in infinite loop. It will check the condition and update the state which will cause re-render then if will again check the condition and so on... it keeps re-rendering.
Remove the if statements and handle them in initial value of useState hook. Like-
const [dateBool,setDateBool]=useState(props.item?.start_date==props.item?.end_date ? true : props.item? false :true);
const [timeBool,setTimeBool]=useState(props.item?.start_time==props.item?.end_time ? true : props.item ? false:true);