Como utilizar useState com objeto em React JS

Neste artigo você aprenderá a como utilizar useState com objeto em React, um dado muito com em aplicações de JavaScript

Fala programador(a), beleza? bora aprender mais sobre React JS!

No mundo do React JS, o gerenciamento de estados é uma das tarefas mais cruciais e frequentes que os desenvolvedores encontram.

A partir da versão 16.8, o React introduziu Hooks, que tornam possível o uso de estados e outras funcionalidades do React em componentes funcionais.

Neste artigo, focaremos no hook useState, especialmente quando lidamos com objetos.

O Básico do useState

Antes de mergulharmos no tópico principal, vamos entender o básico do hook useState.

Este hook nos permite adicionar estados locais em componentes funcionais, sem a necessidade de converter esses componentes em componentes de classe.

import React, { useState } from "react";

const ExemploBasico = () => {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
};

useState com Objetos

Agora que entendemos o básico, vamos ao que interessa: como usar useState com objetos. A sintaxe é quase a mesma, mas a manipulação é um pouco diferente devido à imutabilidade no React.

Exemplo Inicial

Aqui está um exemplo simples que mostra como inicializar o estado com um objeto.

import React, { useState } from 'react';

const ExemploObjeto = () => {
  const [pessoa, setPessoa] = useState({ nome: 'João', idade: 30 });

  return (
    <div>
      <p>Nome: {pessoa.nome}, Idade: {pessoa.idade}</p>
    </div>
  );
};

Atualizando o Estado do Objeto

Para atualizar o estado de um objeto, não podemos simplesmente modificar uma propriedade do objeto e esperar que o React perceba essa mudança. Temos que criar um novo objeto.

const novoEstado = {...pessoa, nome: 'Ana'};
setPessoa(novoEstado);

Nesse exemplo, usamos o operador de espalhamento (...) para fazer uma cópia rasa do estado atual e, em seguida, atualizamos o campo nome.

Atualização de Propriedades Aninhadas

Se o seu objeto tem propriedades aninhadas, você deve ser ainda mais cuidadoso ao atualizar o estado para garantir que está mantendo todas as outras propriedades inalteradas.

const [pessoa, setPessoa] = useState({ nome: 'João', detalhes: { idade: 30, email: '[email protected]' } });

const atualizarIdade = () => {
  setPessoa(prevState => ({
    ...prevState,
    detalhes: {
      ...prevState.detalhes,
      idade: 31,
    },
  }));
};

Boas Práticas

Utilize Várias Chamadas de useState

Se você tem um objeto com muitas propriedades independentes, é uma boa prática usar múltiplas chamadas de useState em vez de um único objeto.

const [nome, setNome] = useState('João');
const [idade, setIdade] = useState(30);

Utilizando Funções para Atualizações

Se o novo estado depende do estado anterior, você pode passar uma função para setPessoa, como mostrado no exemplo de atualização de propriedades aninhadas.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Trabalhar com objetos em React usando o hook useState é uma tarefa comum e, embora não seja muito difícil, requer atenção a detalhes como imutabilidade e atualizações de estado.

Certificando-se de seguir as práticas recomendadas, você pode garantir que seu código seja otimizado e livre de erros.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.