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