DEV Community

Levy Henrique Alves Nunes
Levy Henrique Alves Nunes

Posted on

Dominando o Hook useState no React: Guia Abrangente para Iniciantes

O React, uma biblioteca JavaScript amplamente utilizada para a construção de interfaces de usuário interativas, trouxe uma revolução na forma como os desenvolvedores criam aplicativos web. Com o advento dos React Hooks, como o useState, a gestão de estado em componentes funcionais se tornou mais simples e eficiente do que nunca. Neste artigo, vamos explorar em detalhes o Hook useState, desde o básico até exemplos práticos, para que você possa aprimorar suas habilidades no desenvolvimento React.

A. Descrição do Hook useState
O Hook useState é uma ferramenta fundamental no arsenal de React Hooks, destinada a simplificar o gerenciamento de estado dentro de componentes funcionais. Antes dos Hooks, apenas os componentes de classe tinham a capacidade de gerenciar estados usando o construtor e o método setState. O useState oferece uma maneira mais intuitiva de declarar e rastrear o estado em componentes funcionais, permitindo que variáveis de estado sejam modificadas ao longo do tempo, com atualizações refletidas automaticamente na renderização do componente.

B. Declarando um estado usando useState
A sintaxe básica para declarar um estado com o useState é a seguinte:

import React, { useState } from 'react';

function MeuComponente() {
  const [estado, setEstado] = useState(valorInicial);
  // Restante do código do componente
}
Enter fullscreen mode Exit fullscreen mode

Aqui, estado é o nome da variável de estado, setEstado é a função para atualizar o estado e valorInicial é o valor inicial opcional para o estado. Esse valor inicial pode ser um valor primitivo, como uma string, número ou booleano, ou até mesmo um objeto ou array.

C. Atualizando o estado usando useState
A atualização do estado é realizada chamando a função setEstado com o novo valor desejado. O React, em seguida, atualiza automaticamente o estado e agenda uma nova renderização do componente. Vejamos um exemplo:

function Contador() {
  const [contador, setContador] = useState(0);

  const incrementar = () => {
    setContador(contador + 1);
  };

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={incrementar}>Incrementar</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Nesse exemplo, temos um contador que é inicializado com zero. Quando o botão "Incrementar" é clicado, a função incrementar é chamada e atualiza o contador. Isso aciona uma nova renderização com o valor atualizado do contador.

D. Lidando com estados complexos
O useState também é eficaz para lidar com estados complexos, como objetos ou arrays. Basta fornecer um objeto ou array como valor inicial para o useState. Aqui está um exemplo com um objeto de estado:

function Pessoa() {
  const [pessoa, setPessoa] = useState({ nome: 'João', idade: 25 });

  const atualizarNome = () => {
    setPessoa({ ...pessoa, nome: 'Maria' });
  };

  return (
    <div>
      <p>Nome: {pessoa.nome}</p>
      <p>Idade: {pessoa.idade}</p>
      <button onClick={atualizarNome}>Atualizar Nome</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Nesse caso, o estado pessoa é um objeto com propriedades "nome" e "idade". A função atualizarNome atualiza o nome para "Maria" enquanto mantém as demais propriedades.

E. Manipulando objetos e arrays no estado
A manipulação de objetos ou arrays no estado é semelhante à manipulação em JavaScript padrão. Um exemplo com um array:

function ListaItens() {
  const [lista, setLista] = useState(['item1', 'item2']);

  const adicionarItem = () => {
    setLista([...lista, 'item3']);
  };

  const removerItem = (index) => {
    const novaLista = [...lista];
    novaLista.splice(index, 1);
    setLista(novaLista);
  };

  return (
    <div>
      <ul>
        {lista.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removerItem(index)}>Remover</button>
          </li>
        ))}
      </ul>
      <button onClick={adicionarItem}>Adicionar Item</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

F. Exemplos práticos de uso do useState
Contador:

function Contador() {
  const [contador, setContador] = useState(0);

  const incrementar = () => {
    setContador(contador + 1);
  };

  const decrementar = () => {
    setContador(contador - 1);
  };

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={incrementar}>Incrementar</button>
      <button onClick={decrementar}>Decrementar</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Formulário de Login:

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Lógica para enviar os dados do formulário
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={username} onChange={handleUsernameChange} />
      <input type="password" value={password} onChange={handlePasswordChange} />
      <button type="submit">Enviar</button>
    </form>
  );
}
Enter fullscreen mode Exit fullscreen mode

Estes exemplos demonstram a versatilidade e utilidade do Hook useState no desenvolvimento React. Dominar o uso deste Hook permitirá que você crie componentes funcionais mais eficientes e reativos, elevando a qualidade das suas aplicações. Esperamos que este guia tenha fornecido uma visão abrangente do useState e inspire você a explorar ainda mais o ecossistema de React Hooks.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more