React é uma biblioteca JavaScript popular utilizada para construir interfaces de usuário. Oferece aos desenvolvedores diversos recursos, como os Hooks, que tornam o desenvolvimento de aplicativos mais simples e eficaz.

Um dos Hooks mais utilizados é o useState, que possibilita aos desenvolvedores adicionar estado a componentes funcionais.

Neste artigo, vamos examinar detalhadamente o useState, seus usos e as melhores práticas para sua implantação.

O que é Hook useState?

Antes de explorarmos os detalhes do useState, vamos primeiro definir o que são Hooks e como eles diferem dos componentes de classe tradicionais.

Os Hooks são funções especiais que permite que você use o estado e outros recursos do React em componentes funcionais.

Ao contrário dos componentes de classe, os componentes funcionais não possuem uma forma integrada de armazenar o estado. Hooks como o useState resolvem esse problema, permitindo que você adicione estado aos componentes funcionais.

Contexto do Hook useState

Antes da introdução do Hook useState no React 16.8, os componentes funcionais não conseguiam manter seu próprio estado. Devido a isso, os desenvolvedores tinham que usar componentes de classe ou bibliotecas externas de gerenciamento de estado, como o Redux, para gerenciar o estado em seus aplicativos.

Embora os componentes de classe e as bibliotecas externas de gerenciamento de estado ainda sejam opções viáveis, a introdução do Hook useState tornou muito mais fácil para os desenvolvedores adicionar estado aos seus componentes funcionais e simplificou a API do React, em geral.

Com o Hook useState, os desenvolvedores podem usar componentes funcionais para a maioria dos casos de uso, reduzindo a quantidade de código padrão necessário e facilitando a avaliação do estado em seus aplicativos.

 

Componentes da sintaxe useState

O Hook useState recebe um valor de estado inicial como argumento e retorna uma array que contém dois elementos: o valor do estado atual e uma função que atualiza o valor do estado.

Aqui está a sintaxe:

const [state, setState] = useState(initialState);
  • state: O valor do estado atual.
  • setState: Uma função que atualiza o valor do estado.
  • initialState: O valor inicial da variável de estado que está sendo declarada. Isso é opcional. Quando nenhum valor é fornecido (o que não é aconselhável), ele é automaticamente definido como undefined.

É importante observar que, ao usar o Hook useState, o React renderizará automaticamente seu componente sempre que o valor do estado for alterado.

Como usar o Hook useState

Para implementar o useState, chame a função e passe um valor inicial como argumento. A função retorna uma array que contém o valor do estado atual e uma função para atualizar o estado.

Aqui está um exemplo de uso do useState para gerenciar um contador simples:

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Neste exemplo, inicializamos o estado count como 0 usando o Hook useState. Em seguida, renderizamos o valor de contagem atual e um botão. Quando o botão for clicado, o valor da contagem será incrementado porque adicionamos uma função de seta com a função setCount.

<button onClick={() => setCount(count + 1)}>Click me</button>

Ao usar o Hook useState, é importante lembrar de importá-lo da biblioteca do React. Caso você esqueça de importá-lo, provavelmente encontrará erros ao tentar usar o Hook. Veja a seguir como você pode importar o useState:

import { useState } from 'react';

Ao incluir useState na instrução de importação, você está dizendo ao React que deseja usar o Hook useState em seu componente.

Usando tipos de dados diferentes com o Hook useState no React

O Hook useState no React não se limita a gerenciar apenas tipos de dados numéricos ou de string de caracteres. Você também pode usá-lo para gerenciar estados de diferentes tipos de dados, como arrays, objetos e booleanos.

Uso de arrays com o Hook useState

Você pode usar o Hook useState para gerenciar um array no React. Por exemplo, se você tiver uma array de frutas, poderá inicializar seu estado com a array:

import { useState } from 'react';

function App() {
  const [list, setList] = useState(['apple', 'banana', 'orange']);

  const addToList = () => {
    const newItem = 'grape';
    setList([...list, newItem]);
  };

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addToList}>Add Item</button>
    </div>
  );
}

export default App;

Neste exemplo, estamos usando useState para gerenciar uma array chamado list. O estado inicial de list é definido como uma array que contém três itens: maçã, banana e laranja.

Também criamos uma função addToList que copia todos os itens da array com o operador de spread (...) e, em seguida, adiciona um novo item uva à array list sempre que o botão “Adicionar Item” for clicado.

Nesta ocasião, não estamos atualizando o estado diretamente utilizando uma função de seta, pois é mais apropriado criar essa operação como uma função separada e chamá-la através do método onClick adicionado ao botão “Adicionar Item”.

Uso de objetos com o Hook ok useState

Você também pode usar o Hook useState para gerenciar um objeto no React. Aqui está um exemplo:

import { useState } from 'react';

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    setUser({ ...user, age: user.age + 1 });
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={handleClick}>Increase Age</button>
    </div>
  );
}

export default App;

Neste exemplo, estamos usando o useState para gerenciar um objeto chamado usuário. O estado inicial do user é definido como um objeto que contém duas propriedades: nome e idade.

Também temos uma função handleClick que copia todos os dados do objeto com o operador de propagação (...) e também aumenta a idade do usuário em 1 sempre que o botão Aumentar Idade é clicado.

É importante saber que você pode atribuir esse objeto a uma variável e, em seguida, inicializar a variável. Isso é útil quando você tem um objeto ou array grande e deseja escrever um código fácil de entender:

import { useState } from 'react';
// Declare data
let userData = {
    name: 'John',
    age: 30,
};

function App() {
    const [user, setUser] = useState(userData);

    const handleClick = () => {
        setUser({ ...user, age: user.age + 1 });
    };

    return (
        <div>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <button onClick={handleClick}>Increase Age</button>
        </div>
    );
}

export default App;

Uso de booleanos com o Hook useState

Você também pode usar o Hook useState para gerenciar um valor booleano no React. Aqui está um exemplo:

import { useState } from 'react';

function App() {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (
    <div>
      <p>The switch is {isOn ? 'on' : 'off'}</p>
      <button onClick={toggleSwitch}>Toggle Switch</button>
    </div>
  );
}

export default App;

Neste exemplo, estamos usando useState para gerenciar um valor booleano chamado isOn. O estado inicial de isOn é definido como false. Também temos uma função toggleSwitch que alterna o valor de isOn sempre que o botão Toggle Switch é clicado.

Esse recurso pode ser utilizado para gerenciar a alternância dos modos claro e escuro em seus projetos.

Antes de finalizarmos, vamos investigar uma aplicação mais sofisticada do Hook useState em formulários.

O Hook useState em formulários

Para gerenciar dados de formulários e entradas de usuários no React, você usa o estado. Isso é usado para manter o controle dos valores atuais dos elementos do formulário. Ele registra todas as interações do usuário, como digitar em uma entrada de texto ou selecionar uma opção em um menu suspenso, e por fim atualiza o estado com o novo valor.

Aqui está um exemplo de uso do site useState para criar um formulário simples:

import { useState } from 'react';

let formStateData = {
    firstName: '',
    lastName: '',
    email: '',
};

function Form() {
    const [formData, setFormData] = useState(formStateData);

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="firstName"
                value={formData.firstName}
                onChange={handleInputChange}
            />
            <input
                type="text"
                name="lastName"
                value={formData.lastName}
                onChange={handleInputChange}
            />
            <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default Form;

Neste exemplo, primeiro criamos um objeto para os dados que serão coletados com o formulário com valores padrão para os campos firstName, lastName e email. Em seguida, inicializamos o estado formData usando useState.

let formStateData = {
    firstName: '',
    lastName: '',
    email: '',
};

const [formData, setFormData] = useState(formStateData);

Em seguida, definimos uma função handleInputChange que atualiza o estado formData sempre que um campo do formulário é alterado.

const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
};

Por fim, definimos uma função handleSubmit que registra os dados do formulário atual no console quando o formulário é enviado.

const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
};

Melhores práticas com o useState

Ao usar o Hook useState, é importante seguir as melhores práticas para evitar erros comuns e garantir o desempenho ideal. Aqui estão algumas dicas para ter em mente:

  • Evite estados estruturas complexas e aninhadas: Em vez de armazenar dados de estado complexos em um único objeto, considere dividi-los em partes menores para facilitar o gerenciamento.
  • Use atualizações funcionais: Ao atualizar o estado com base no estado anterior, utilize atualizações funcionais. Isso ajuda a evitar problemas de concorrência e garante que o estado seja atualizado corretamente.
  • Evite atualizações de estado excessivas: Atualizar o estado pode ser caro, portanto, tente minimizar o número de atualizações que você faz. Considere a possibilidade de usar o Hook useEffect para agrupar atualizações e otimizar o desempenho.
  • Evite renderizações desnecessárias: O React renderizará novamente um componente sempre que o estado ou as propriedades forem alterados. Para evitar novas renderizações desnecessárias, use a função memo.

Resumo

Neste artigo, exploramos o Hook useState em detalhes e aprendemos a usá-lo para adicionar estado a componentes funcionais. Também discutimos como usar o useState com formulários, arrays e objetos, e abordamos as melhores práticas para que você tenha um desempenho ideal. Seguindo essas práticas recomendadas, você pode garantir que seus aplicativos React sejam eficientes, escalonáveis e fáceis de manter.

Você está procurando a solução de hospedagem ideal para seus aplicativos React? Experimente a Hospedagem de Aplicativos da Kinsta gratuitamente!