Avoid unnecessary rendering in React Native with multiple Textinput

Asked

Viewed 28 times

2

The question is this: I have basically a code like this (I can’t send the real code right now, I’m sending this "Pseudo-Code" so ignore syntax and standardization errors):

const Componente = () => {
    const [campo1, setCamp1] = useState('');
    const [campo2, setCamp2] = useState('');
    const [campo3, setCamp3] = useState('');
    const [campo4, setCamp4] = useState('');
    const [campo5, setCamp5] = useState('');
    const [campo6, setCamp6] = useState('');
    const [campo7, setCamp7] = useState('');

    return (
        <View>
            <TextInput
                style={styles.input}
                onChangeText={setCamp1}
                value={campo1}
            />
            <TextInput
                style={styles.input}
                onChangeText={setCamp2}
                value={campo2}
            />
            <TextInput
                style={styles.input}
                onChangeText={setCamp3}
                value={campo3}
            />
            <TextInput
                style={styles.input}
                onChangeText={setCamp4}
                value={campo4}
            />
            <TextInput
                style={styles.input}
                onChangeText={setCamp5}
                value={campo5}
            />
            <TextInput
                style={styles.input}
                onChangeText={setCamp6}
                value={campo6}
            />
            <TextInput
                style={styles.input}
                onChangeText={setCamp7}
                value={campo7}
            />
        </View>
    );
}

With each letter typed in each input the component is rendered whole again, ie renders all inputs again. I tried using useRef (as I did in Reactjs) but it was not effective, it caused problems in onChangeText and Value, thus (considering that camp1 was a useRef):

            <TextInput
                style={styles.input}
                OnChangeText={(value) => {camp1.current = value}}
                value={camp1.current}
            />

I also tried useMemo (separating inputs and placing each one as a Memo). I cannot/do I want to use libraries like unform, formik and others, both for the project and on account of finding a way to solve this problem.

Is there any way to improve the performance of this component to not depend on so many States and so many renderings ?

PS: Using a state only that is an object with 7 attributes also would not help, since it would often fire the same Setter and would render all over again).

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.