Evitando Re-renderizações Desnecessárias em React com Múltiplos Estados

#react #javascript #nextjs #frontend

É comum utilizar estados para controlar diferentes parte da interface. No entanto, se não forem bem gerenciados, múltiplos estados porem causar re-renderizações desnecessárias, afetando a performance do sistema.

Problema: Muitos estados === Muitas re-renderizações

Vamos imaginar que estamos com um componente que gerencia os dados de um usuário. Podemos declarar esses estados de forma independente, assim:

const UserComponent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [occupation, setOccupation] = useState('');

  // Funções de atualização dos estados
  const updateName = (newName) => setName(newName);
  const updateAge = (newAge) => setAge(newAge);
  // e assim por diante...

  return (
    ...
  );
};

Aqui a gente tem 6 estados independentes, cada vez que um desses estados é atualizado, o componente inteiro é re-renderizado, agora imagine que precisamos fazer atualização dos 6 estados... sim, a gente renderiza esse componente 6 vezes.

Solução: Criar somente 1 estado referente as informações do usuário

Uma forma de mitigar esse problema é consolidar todos os estados em um único objeto. Ao invés de ter estados separados, podemos manter todas as informações do usuário em um só estado, ficaria assim:

const UserComponent = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    address: '',
    email: '',
    phone: '',
    occupation: ''
  });

  // Função para atualizar o estado do usuário
  const updateUser = (newData) => {
    setUser((prevState) => ({
      ...prevUser,
      ...newData,
    }));
  };

  return (
    ...
  );
};

Agora, ao invés de ter uma função para cada estado, temos a função updateUser, que recebe apenas as mudanças desejadas e junta com o estado anterior utilizando o spread operator (...). Isso permite atualizar apenas uma parte do estado, enquanto o restante permanece inalterado.

Se desejas alterar apenas 1 informação do objeto, você faz assim:

setUser((prevState) => ({...prevState, age: 25}))

Diferença

Quando usamos estados separados, cada mudança de estado individual causa uma re-renderização do componente. Quando consolidamos todos os estados em um único objeto, ainda temos uma única re-renderização, mas ela ocorre apenas uma vez, mesmo que várias partes do objeto sejam alteradas.

Vantagens

- Redução de Re-renderizações: Consolidando estados, evitamos múltiplas re-renderizações desnecessárias, melhorando a performance.
- Manutenção Facilitada: Fica mais fácil gerenciar as informações do usuário em um único estado, simplificando o código e tornando-o mais legível.
- Atualizações Parcialmente Controladas: Podemos alterar apenas as partes do estado que precisam ser modificadas, sem mexer no resto.

É isso! Espero ter ajudado!!!
Apesar de que ainda estou desenvolvendo, mas ai vai o meu portfólio: https://lucaslima.vercel.app (espero que quando você acesse já esteja pronto hahhaha)

Sucesso! 🚀