TextInput laggy because of my onscreen keyboard-CodePudding

I'm working on an app that has its own keyboard onscreen(don't ask me why, I think its a terrible idea), but every time I type a new letter, it has a one sec delay, I don't know if its rerendering because I'm new to react native, but can someone help me out?

The screen itself:

const [name, setName] = useState('');

<View style={styles.screen}>
  <View style={styles.container}>
    <Animated.View>
      <Text size={25} color="gray3">Your full name</Text>
    </Animated.View>

    <TextInput value={name} onChangeText={(text) => setName(text)} style={styles.name}></TextInput>

    <TextKeyboard state={(e) => setName(e)} delete={() => setName('')}></TextKeyboard>

  </View>
</View>

The TextKeyboard component


<View style={styles.container}>
        <View style={styles.line}>
            <TouchableOpacity onPress={() => props.state('Q')} style={styles.btn}><CustomText color="white" size={35}>{'Q'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('W')} style={styles.btn}><CustomText color="white" size={35}>{'W'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('E')} style={styles.btn}><CustomText color="white" size={35}>{'E'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('R')} style={styles.btn}><CustomText color="white" size={35}>{'R'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('T')} style={styles.btn}><CustomText color="white" size={35}>{'T'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('Y')} style={styles.btn}><CustomText color="white" size={35}>{'Y'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('U')} style={styles.btn}><CustomText color="white" size={35}>{'U'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('I')} style={styles.btn}><CustomText color="white" size={35}>{'I'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('O')} style={styles.btn}><CustomText color="white" size={35}>{'O'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('P')} style={styles.btn}><CustomText color="white" size={35}>{'P'}</CustomText></TouchableOpacity>
        </View>
        <View style={styles.line}>
            <TouchableOpacity onPress={() => props.state('A')} style={styles.btn}><CustomText color="white" size={35}>{'A'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('S')} style={styles.btn}><CustomText color="white" size={35}>{'S'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('D')} style={styles.btn}><CustomText color="white" size={35}>{'D'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('F')} style={styles.btn}><CustomText color="white" size={35}>{'F'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('G')} style={styles.btn}><CustomText color="white" size={35}>{'G'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('H')} style={styles.btn}><CustomText color="white" size={35}>{'H'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('J')} style={styles.btn}><CustomText color="white" size={35}>{'J'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('K')} style={styles.btn}><CustomText color="white" size={35}>{'K'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('L')} style={styles.btn}><CustomText color="white" size={35}>{'L'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('Ç')} style={styles.btn}><CustomText color="white" size={35}>{'Ç'}</CustomText></TouchableOpacity>
        </View>
        <View style={styles.line}>
            <TouchableOpacity onPress={() => props.state('Z')} style={styles.btn}><CustomText color="white" size={35}>{'Z'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('X')} style={styles.btn}><CustomText color="white" size={35}>{'X'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('C')} style={styles.btn}><CustomText color="white" size={35}>{'C'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('V')} style={styles.btn}><CustomText color="white" size={35}>{'V'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('B')} style={styles.btn}><CustomText color="white" size={35}>{'B'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('N')} style={styles.btn}><CustomText color="white" size={35}>{'N'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.state('M')} style={styles.btn}><CustomText color="white" size={35}>{'M'}</CustomText></TouchableOpacity>
            <TouchableOpacity onPress={() => props.delete()} style={[styles.btn, styles.btnDelete]}><CustomText color="white" size={35}>DELETE</CustomText></TouchableOpacity>
        </View>
        <View style={styles.line}>
            <TouchableOpacity onPress={() => props.state(' ')} style={[styles.btn, styles.btnSpace]}></TouchableOpacity>
        </View>
      </View>

I know I'm doing something wrong, I just don't know what...

CodePudding user response：

You should try something like this

Add this inn your main component

const addLetter = useCallback((letter)=> 
       {setName((previousName)=>previousName letter)},[setName])

Create a memoized component for your keys

const KeyboardLetter = React.memo(({addLetter, letter})=>{

    const onPress = useCallback(()=> 
       {addLetter(letter)},[addLetter, letter])
    
    return (
        <TouchableOpacity onPress={onPress} style={styles.btn}> 
            <CustomText color="white" size={35}>{props.letter}</CustomText>
        </TouchableOpacity>
    )
})

and then use this component like <KeyboardLetter addLetter={addLetter} letter={"SOME_LETTER"}/>

Let me know if this changes anything