A questão é a seguinte: eu tenho basicamente um código como esse (não posso mandar o código real nesse momento, estou enviando esse "Pseudo-Código" então ignorem erros de sintaxe e padronização):
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>
);
}
A cada letra digitada em cada input o componente se renderiza novamente inteiro, ou seja renderiza todos os inputs de novo. Já tentei usar useRef (como já fiz em ReactJS) mas não foi efetivo, dava problemas no onChangeText e no Value, dessa forma (considerando que camp1 era um useRef):
<TextInput
style={styles.input}
OnChangeText={(value) => {camp1.current = value}}
value={camp1.current}
/>
Também tentei o useMemo (separando os inputs e colocando cada um como um Memo). Não posso/quero utilizar bibliotecas como unform, formik entre outras, tanto pelo projeto quanto por conta de achar uma forma de resolver esse problema.
Há alguma forma de melhorar a performance desse componente para não depender de tantos states e de tantas renderizações ?
PS: Usar um state apenas que seja um objeto com 7 atributos também não adiantaria, uma vez que iria disparar frequentemente o mesmo Setter e iria renderizar tudo de novo).