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: 'joao@email.com' } }); 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.