3

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

2
  • Esse componente TextInput é de alguma lib ou foi criado por você? Caso tenha sido criado por você, você pode usar o memo. Lembrando que o método memo só valida superficialmente as props, caso você queira ter mais controle sobre a verificação, você pode criar a função que fará a comparação seguindo as regras que você desejar, como mostra a documentação que eu mencionei. Commented 4/10/2021 às 22:30
  • É o do próprio React Native, apenas usando um state para gerenciar seu valor.
    – Ademar-SJ
    Commented 6/10/2021 às 0:10

1 Resposta 1

1

Sim há, você pode usar o conceito de uncontrolled-components.

Em um componente controlado, os dados de formulário são manipulados por um componente React. A alternativa são componentes não controlados, onde os dados de formulário são controlados pelo próprio DOM. referência

Irei demonstrar através do código abaixo:

function App() {
    const input = React.createRef();

    function handleSubmit(event) {
      event.preventDefault();
      alert('A name was submitted: ' + input.current.value);
    }
  
    return (
      <div className="App">
        <h1>Seu formulário</h1>
        <form onSubmit={handleSubmit}>
          <input type="text" ref={input} />
          <button>enviar</button>
        </form>
      </div>
    );
}

ReactDOM.render(<App />, document.querySelector("#app"))
.App {
  font-family: sans-serif;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Nesta solução seu component não irá ficar atualizando toda vez que há alteração nos valores do seu formulário. E quando você realmente for precisar desses valores, você pode pega-lo por referencia.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .