Como atualizar um objeto com setState no React JS

Neste artigo você aprenderá a como atualizar um objeto com setState, uma ação muito comum na biblioteca React JS!

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

React JS é uma biblioteca JavaScript para a construção de interfaces de usuário. Com ela, os desenvolvedores podem criar componentes interativos de maneira eficiente.

Uma das formas de criar interatividade é através do estado do componente, geralmente gerenciado pelo Hook useState.

Embora seja comum usar useState com valores primitivos como números e strings, também é possível utilizá-lo com objetos complexos.

Neste artigo, vamos discutir como atualizar um objeto com setState no React JS.

Entendendo o Hook useState

Antes de avançarmos, é importante compreender o que é o Hook useState e como ele funciona.

O Hook useState é uma função que permite que você adicione o estado React a componentes funcionais.

O Hook recebe um valor inicial para o estado e retorna um par: o valor atual do estado e uma função para atualizá-lo.

Aqui está um exemplo simples de uso do useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Usando useState com Objetos

Quando se trabalha com objetos mais complexos, o processo de atualização do estado com useState se torna um pouco diferente.

Isso ocorre porque o useState não mescla automaticamente o novo estado com o antigo, ao contrário da função setState que era usada nas classes componentes.

Considere o seguinte exemplo de objeto de estado:

const [person, setPerson] = useState({name: 'John', age: 30});

Se quisermos atualizar apenas a idade da pessoa e usar setPerson({age: 31}), veremos que o nome da pessoa desaparecerá.

Isso ocorre porque setPerson substitui o objeto person inteiro em vez de mesclar as propriedades como setState faria em uma classe componente.

Atualizando Objetos com useState

Então, como podemos atualizar um objeto com useState? A resposta é usar o operador spread (...) do JavaScript para criar um novo objeto que contém todas as propriedades do objeto antigo e as atualizações que queremos fazer.

Vamos modificar o exemplo anterior para atualizar a idade da pessoa:

setPerson(prevPerson => ({...prevPerson, age: 31}));

Neste código, {...prevPerson} cria um novo objeto com todas as propriedades do objeto prevPerson anterior. Então, age: 31 atualiza a propriedade de idade nesse novo objeto.

É importante observar que usamos uma função como argumento para setPerson. Isso garante que estamos trabalhando com o estado mais recente, o que é especialmente importante quando o novo estado depende do antigo.

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

Conclusão

E chegamos ao fim do artigo sobre como atualizar um objeto com setState!

Trabalhar com objetos no estado React pode ser um pouco diferente de trabalhar com tipos primitivos, mas uma vez que você entenda a diferença, é fácil de gerenciar.

Lembre-se de que, ao contrário de setState em componentes de classe, useState não mescla automaticamente objetos antigos e novos. Em vez disso, você deve criar um novo objeto com as propriedades do antigo e as atualizações que deseja fazer.

Usando o operador spread do JavaScript e passando uma função para set, você pode garantir que está trabalhando com o estado mais recente e que todas as suas propriedades são mantidas intactas.

Com essa abordagem, você pode gerenciar efetivamente o estado do objeto em seus componentes funcionais React.

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