React Hook - useState §

---

O useState() é um dos hooks mais fundamentais do React, sendo utilizado para adicionar estado a componentes funcionais. Esse hook permite que você declare variáveis de estado em componentes funcionais, proporcionando a capacidade de reagir a mudanças nessas variáveis e, assim, atualizar dinamicamente a interface do usuário.

Para utilizar o useState(), primeiro, é necessário importá-lo do pacote react. Em seguida, você pode declarar uma variável de estado juntamente com uma função que permitirá a atualização dessa variável. Aqui está um exemplo simples:

import React, { useState } from 'react';
 
const ExampleComponent = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>O contador está em: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar Contador
      </button>
    </div>
  );
};

Sintaxe §

A função useState() recebe um argumento inicial que define o valor inicial do estado. Retorna um array contendo dois elementos: a variável de estado e uma função para atualizá-la (setEstado). Na prática, o nome da função setEstado pode ser personalizado, mas é comum usar a convenção set seguido do nome da variável de estado.

const [variavelDeEstado, setVariavelDeEstado] = useState(valorInicial);

Múltiplos estados §

Você pode usar o useState() várias vezes para criar múltiplos estados em um único componente funcional. Cada chamada de useState() cria uma nova variável de estado independente. Veja um exemplo:

import React, { useState } from 'react';
 
const MultiStateComponent = () => {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(25);
 
  return (
    <div>
      <p>Nome: {name}</p>
      <p>Idade: {age}</p>
    </div>
  );
};

Estado com objeto §

Você também pode usar um objeto para representar o estado, especialmente útil quando há múltiplas variáveis de estado relacionadas. Neste caso, a função de atualização do estado aceita um objeto que será mesclado com o estado atual:

import React, { useState } from 'react';
 
const ObjectStateComponent = () => {
  const [person, setPerson] = useState({ name: 'John', age: 25 });
 
  return (
    <div>
      <p>Nome: {person.name}</p>
      <p>Idade: {person.age}</p>
    </div>
  );
};

Atualizando com base no estado anterior §

Ao utilizar setCount ou qualquer outra função de atualização do estado, é comum fornecer uma função como argumento (função callback). Essa função recebe o estado anterior e retorna o novo estado. Isso é especialmente útil quando as atualizações dependem do estado atual e isso pode acontecer ao utilizar alguns hooks em específico.

import React, { useState } from 'react';
 
const IncrementComponent = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>O contador está em: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>
        Incrementar Contador
      </button>
    </div>
  );
};

Nota

Usar a função de atualização do estado dessa maneira garante que você está atualizando o estado com base no estado anterior, evitando problemas de concorrência.

Benefícios do useState() §

1. Gerenciamento de estado em componentes funcionais: Antes dos hooks, os componentes funcionais não tinham um sistema embutido para gerenciar o estado. useState() resolve esse problema.

2. Simplicidade: Facilita o gerenciamento de estados locais sem a necessidade de transformar o componente em uma classe.

3. Melhor legibilidade: Deixa o código mais claro e conciso ao lidar com lógica de estado em componentes funcionais.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)