React Native - UseEffect and other functions takes time to load - reactjs

Question

I am using React Native to create an app. My useEffect and other functions takes around a minute to call which caused delay and reduce user experience.
useEffect(() => {
const token = JWTToken('');
getAllChannels(token);
}, [navigation]);
// code to add channel
const clickSave = () => {
const token = JWTToken('');
addchannel(token);
};
// Render code
return (
<KeyboardAvoidingView
style={{
display: 'flex',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<SafeAreaView
style={{
flex: 1,
backgroundColor: !darkTheme
? Colors.light.f2Color
: Colors.dark.backgrounColor,
}}>
<TouchableOpacity onPress={goBack}>
<View
style={{
flexDirection: 'row',
marginHorizontal: width * 0.02,
marginVertical: height * 0.02,
alignItems: 'center',
}}>
<SvgLeftArrow
color={!darkTheme ? Colors.light.textColor : Colors.light.white}
/>
<Text
style={{
fontFamily: 'OpenSans-Bold',
fontSize: 20,
color: !darkTheme ? Colors.light.textColor : Colors.light.white,
marginLeft: width * 0.03,
fontWeight: 'bold',
}}>
Manage Channels
</Text>
</View>
</TouchableOpacity>
<View
style={{
width: width * 0.95,
height: Platform.OS === 'android' ? height * 0.06 : height * 0.05,
marginVertical: height * 0.01,
backgroundColor: !darkTheme
? Colors.light.white
: Colors.dark.changePwdText,
marginHorizontal: Platform.OS === 'android' && height * 0.01,
borderRadius: 13,
alignSelf: 'center',
flexDirection: 'row',
alignItems: 'center',
}}>
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.04,
color: !darkTheme
? Colors.light.textColor
: Colors.dark.textColor,
width: width * 0.86,
}}
value={searchChannel}
onChangeText={value => {
setSearchChannel(value);
}}
clearButtonMode="always"
secureTextEntry={false}
placeholder="Add a channel..."
placeholderTextColor={
!darkTheme ? Colors.light.placeholderColor : Colors.dark.textColor
}
/>
{!createLoader ? (
<TouchableOpacity onPress={clickSave}>
<Image
source={require('../assets/images/black-round-tick.png')}
resizeMode="contain"
/>
</TouchableOpacity>
) : (
<ActivityIndicator color={Colors.light.black} />
)}
</View>
{!loader ? (
<FlatList
data={channelList}
scrollEnabled={true}
renderItem={({item, index}) =>
channelList.length > 0 ? (
<ChannelComponent
item={item}
setCallGetChannel={setCallGetChannel}
/>
) : (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
}}>
<Text>No Channels Found!</Text>
</View>
)
}
numColumns={1}
keyExtractor={(item, index) => index}
contentContainerStyle={{
alignSelf: 'center',
flex: 1,
}}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
onEndReachedThreshold={0}
bounces={false}
style={{marginBottom: height * 0.05}}
/>
) : (
<View
style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<ActivityIndicator color={Colors.light.black} />
</View>
)}
</SafeAreaView>
</KeyboardAvoidingView>
);
I have created as above but each function takes time to call. Even Loader shows after a minute. This is happening in my complete code. Even TouchableOpacity is also taking multiple attempts to perform.
Please suggest if you have answer for my problem.

Answer 1

Probably you have infinity loop here:
useEffect(() => {
const token = JWTToken('');
getAllChannels(token);
}, [navigation]);
You need to control your effect more precisely. For example, you can add condition inside your effect like:
useEffect(() => {
if (!isLoading) {
const token = JWTToken('');
getAllChannels(token);
}
}, [isLoading]);
Another way is to check how many rerenders do you have with this plugin https://github.com/welldone-software/why-did-you-render or with Flipper