0

Bom dia galera. Estou desenvolvendo uma aplicação onde o registro do usuário é de acordo com a opção que o mesmo seleciona " Fisica ou Juridica ". De acordo com a opção que ele escolhe um form é renderizado através de functions / component, o problema é que renderizando dessa forma sempre que altero o valor de algum input, ou seja, algum Estado a pagina da um refresh. Como eu poderia tirar esse problema ?

registro.js:

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { toast, ToastContainer } from 'react-toastify';
import './register-style.css';
import 'react-toastify/dist/ReactToastify.min.css'; 
import api from '../../services/api';

export default function Registro() {
  const [tipo, setTipo] = useState('');
  const [nomerazao, setNomeRazao] = useState('');
  const [cpfcnpj, setCpfCnpj] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');
  const [sexo, setSexo] = useState('');
  const [status, setStatus] = useState('A');
  const [endereco, setEndereco] = useState('');
  const [nroendereco, setNroEndereco] = useState('');
  const [bairro, setBairro] = useState('');
  const [cidade, setCidade] = useState('');
  const [uf, setUf] = useState('');
  const [cep, setCep] = useState('');
  const [ddd, setDdd] = useState('');
  const [telefone, setTelefone] = useState('');

  function CNPJ() {
    return (
        <form onSubmit={handleRegister}>

          <input 
            placeholder="Insira sua Razão Social"
            value={nomerazao}
            onChange={e => setNomeRazao(e.target.value)}
          />

          <input 
            placeholder="Insira seu CNPJ"
            value={cpfcnpj}
            onChange={e => setCpfCnpj(e.target.value)}
          />

          <input 
            type="email" 
            placeholder="Insira seu email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />

          <button type="submit">Cadastrar</button>
        </form>
    );
  };

  function CPF() {
    return (
        <form onSubmit={handleRegister}>

          <input 
            placeholder="Insira seu Nome"
            value={nomerazao}
            onChange={e => setNomeRazao(e.target.value)}
          />

          <input 
            placeholder="Insira seu CPF"
            value={cpfcnpj}
            onChange={e => setCpfCnpj(e.target.value)}
          />

          <input
            type="password"
            placeholder="Insira sua senha"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
          

          <input 
            type="email" 
            placeholder="Insira seu email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />

          <button type="submit">Cadastrar</button>
        </form>
    );
  };

  function Form (){

    if(tipo === '') {
      return (
        <div>
          <span>Selecione um tipo de cadastro...</span>
        </div>
      )
    }else if(tipo === 'F') {
      return (
        <div>
          <CPF />
        </div>
      )
    } else {
      return (
        <div>
          <CNPJ />
        </div>
      )
    }
  }

  return (
    <div className="formulario">

    <h1>Registro</h1>

    <div className="botoes">
      <span>Tipo de cadastro: </span>
      <select value={tipo} onChange={e => setTipo(e.target.value)}>
        <option disabled value="">Selecione</option>
        <option value="F">Usuário</option>
        <option value="J">Empresa</option>
      </select>
    </div>

    <Form />

    <Link to="/">Voltar ao Login</Link>
    </div>
  );
}

Função handleRegister:

async function handleRegister(e) {
    e.preventDefault();

    const data = ({
      
    });

    try{
      await api.post('/pessoa/register', data)
          .then(function(response){
              if(response.status === 200){
                  toast.success(`${response.data.name} Seu cadastro foi realizado com sucesso !`);
                  // setTimeout(() =>{
                  //     history.push('/')
                  // }, 3250);
              }
          });
    } catch (err) {
      if(err.response.status === 400) {
          toast.error(err.response.data.error);
      }
    }
  }
8
  • " a pagina da um refresh " -> a página atualiza ou o componente Registro renderiza novamente? Commented 2/10/2020 às 11:50
  • Exato Rafael, o componente renderiza novamente. Vou alterar até o titulo, peço perdão pelo equivoco.
    – leozera
    Commented 2/10/2020 às 11:52
  • Esse é o comportamento esperado. Um componente renderiza quando há mudança de estado. Se todos inputs são controlados (com useState) no mesmo componente, a mudança de estado do input A causará a renderização do componente inteiro. Commented 2/10/2020 às 12:14
  • O que acontece é que seu <Form /> poderia ser um componente diferente, visto que a sua página inteira parece ser um componente apenas. Fora isso, não vejo problemas. Se o <Form /> possuísse componentes filhos, alguns outros métodos poderiam ser utilizados para evitar a renderização dos filhos, veja essa pergunta para mais detalhes: Como usar “shouldComponentUpdate” com Hooks? Commented 2/10/2020 às 12:16
  • No caso você acredita que se eu criar apenas um componente e juntar tudo em um só resolveria meu problema ?
    – leozera
    Commented 2/10/2020 às 12:18

1 Resposta 1

2

Utilize com componente e a função memo que previne esse reenderização:

const Email = React.memo(({value, setValue}) => {  
  return (
    <div>   
      <div style={{height: 20}}>{value}</div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
    </div>
  )
});

const Password = React.memo(({value, setValue}) => {  
  return (
    <div>      
      <div style={{height: 20}}>{value}</div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
    </div>
  )
});



function App() {
  const [email, setEmail] = React.useState('');  
  const [password, setPassword] = React.useState('');   
  React.useEffect(() => {
    console.log('App Input Renderização');
  }, []);
  return (
    <div>
      <Email value={email} setValue={setEmail} />
      <Password  value={password} setValue={setPassword} />  
    </div>
  )
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Explicação no próprio site: Se seu componente renderiza o mesmo resultado dados os mesmos props, você pode envolver nele uma chamada para React.memo para um aumento no desempenho em alguns casos, através da memoização do resultado. Isto significa que o React vai pular a renderização do componente e reutilizar o último resultado renderizado.

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 .