CODEWITHSUNDEEP
javascriptiosreactjsreact-native
Prisonig
Prisonig

Reputation: 1

How can i fix my laggy textinput in react-native

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>

Upvotes: 0

Views: 1603

Answers (2)

Priyadarshni Sundararajan
Priyadarshni Sundararajan

Reputation: 1

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

Upvotes: 0

a_m_h_e_r_e
a_m_h_e_r_e

Reputation: 26

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

Upvotes: 1

Related Questions