Gerenciamento de estados com useState

Os hooks são uma adição ao React que permitem que você use estado e outros recursos do React sem escrever uma classe. Eles fornecem uma maneira fácil de reutilizar lógica de código entre componentes, incluindo estado e outros recursos do React, como gerenciamento de efeitos colaterais.

Os hooks foram introduzidos no React 16.8 e são uma ótima maneira de escrever componentes funcionais que precisam de estado, sem precisar escrever uma classe. Em vez disso, você pode usar hooks como useState e useEffect em seus componentes funcionais.

A vantagem dos hooks é que eles tornam o código mais legível e fácil de entender, especialmente em aplicações de tamanho médio a grande. Além disso, eles também permitem que você compartilhe lógica entre componentes, evitando a necessidade de escrever código repetitivo.

O que é de fato o useState?

useState é um hook padrão fornecido pelo React que permite adicionar estado a componentes funcionais. O estado é uma fonte de dados dinâmica que é gerenciada pelo componente e pode ser atualizada ao longo do tempo.

Antes dos hooks, o gerenciamento de estado era limitado a componentes de classe, que tinham acesso ao objeto this.state para gerenciar e atualizar o estado. Agora, com o uso de hooks, você pode gerenciar o estado em componentes funcionais também.

Aqui está como você pode usar o hook useState em um componente funcional:

import React, { useState } from 'react';

function Exemplo() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

O hook useState é chamado no início do componente e retorna um array com dois valores: o primeiro valor é o estado atual (neste exemplo, count) e o segundo é uma função para atualizar esse estado (setCount).

A função setCount é chamada sempre que você deseja atualizar o estado. Nesse exemplo, a função é chamada ao clicar no botão “Increment”. Quando a função é chamada, o estado é atualizado para o novo valor e o componente é renderizado novamente, mostrando o novo valor de count.

Além disso, você pode definir o estado inicial com o valor que você deseja, que no exemplo acima é 0. É importante notar que o valor inicial do estado só é definido na primeira renderização do componente. Em subseqüentes renderizações, o estado é recuperado a partir do último valor salvo.

Você também pode gerenciar objetos e arrays complexos como estado, basta passar um objeto ou array como valor inicial para o hook useState.

Em resumo, o hook useState é uma maneira fácil e flexível de adicionar estado a componentes funcionais no React. Isso permite que você gerencie dados dinâmicos em seus componentes de uma maneira simples e organizada.

Gerenciamento de formulários com useState

import React, { useState } from 'react';

function FormExample() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

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

  return (
    <form>
      <input 
        type="text" 
        name="name" 
        value={formData.name} 
        onChange={handleInputChange} 
      />
      <input 
        type="email" 
        name="email" 
        value={formData.email} 
        onChange={handleInputChange} 
      />
    </form>
  );
}

Neste exemplo, useState é usado para gerenciar os dados do formulário. A função handleInputChange é usada para atualizar os dados do formulário a cada vez que um campo é alterado.

Mesmo que a complexidade tendo aumentado no gerenciamento de formulários, a premissa do gerenciamento segue a mesma. Ainda há outras formas de se gerenciar estados, como formas de gerenciamento global que pode enriquecer ainda mais o seu código, porém também aumentará a complexidade, logo precisará ser bem avaliado o seu uso.