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.

Pronto para começar a usar o Hook useState no React? 🤓 Este artigo tem tudo o que você precisa, incluindo contexto e melhores práticas. 🚀Clique para Tweetar

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.
Considere isso como seu curso introdutório ao Hook useState 🤓 Vamos começar!Clique para Tweetar

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!