I am using the EXPO App to test my react-native project. When I type things in the TextInput the app begins to lag. Anyone know why and how to fix it?
<View style={styles.logincontainercontainer}>
<View style={styles.logincontainer}>
<Icon name="email" size={25} color={COLORS.grey} />
<TextInput
style={{paddingLeft:3, flex:1}}
placeholderTextColor={COLORS.grey} placeholder="Email"
value={email}
blurOnSubmit={false}
onSubmitEditing={() => secondTextInput.focus() }
onChangeText={text=> setemail(text)}
/>
</View>
I don't know if you have a useEffect() that have a dependency on your text. But if this keeps persisting, I recommend you to use debounce function to wrap the setemail function.
function debounce(func, timeout = 300){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
const processEmailChange = debounce((t) => setemail(t));
And use processEmailChange inside onChangeText like onChangeText={(text)=>processEmailChange(text)}
Check and see if it re-renders a lot for each key stroke by adding a console log in your use effect. Then,Try removing all the console logs in the component and this email dependency from the dependency array of useEffect