Gerenciando Estado com useState

O hook useState é um hook fundamental do React que permite que componentes funcionais tenham um estado. Ele fornece uma maneira de declarar e atualizar variáveis de estado dentro de um componente.

Sintaxe:

Para usar o hook useState, chamamos ele e passamos o estado inicial (initialState) como argumento. Ele retorna um array com dois elementos: o valor atual do estado (state) e uma função (setState) para atualizar o estado.

const [state, setState] = useState(initialState);

• Podemos escolher qualquer palavra como nome para a variável de state. Recomenda-se usar um nome de variável que descreva com precisão qual estado está sendo armazenado ou atualizado, como inputValue, page, number, name e assim por diante;

• Da mesma forma, ao usar a função setState, temos flexibilidade na escolha do nome da função. No entanto, seguir um padrão específico é uma convenção padrão: o nome da função setState deve começar com "set" seguido do nome da variável de estado correspondente. Por exemplo, se a variável de state for mail, a função setState correspondente normalmente seria chamada de setMail.

Exemplo 1:

Construção do componente Counter, que manterá seu próprio estado. Quando o botão Incrementar for clicado, o estado será atualizado e o componente será renderizado novamente.

import React, { useState } from "react";

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Neste exemplo, o hook useState é utilizado para declarar uma variável de estado count com valor inicial 0. A função setCount é usada para atualizar a variável count sempre que o botão é clicado.

Explicação linha por linha:

• Linha 1: Importação do hook useState da biblioteca React para utilizar sua funcionalidade;
• Linha 3: Definição do componente Counter utilizando a sintaxe convencional de função;
• Linha 4: Inicialização do estado utilizando o hook useState;

1. count representa o valor do contador. Seu valor inicial é 0, especificado dentro dos parênteses de useState(0);
2. setCount é a função que atualiza o estado quando necessário.

• Linhas 6-8: Esta função arrow do JavaScript lida com a lógica de atualização do estado. Ela é executada quando o botão "increment" é clicado. Dentro da função, utilizamos a função setCount para atualizar o estado;
• Linhas 10-15: Renderização do markup do componente. Na linha 12, o valor atual do estado (count) é exibido. O botão na linha 13 utiliza o atributo onClick para definir a função a ser executada ao ser clicado. Neste caso, passamos a função increment.

Exemplo 2:

Construção do componente Form com estado independente. O usuário é solicitado a digitar seu nome no campo de entrada e, dependendo do valor inserido, o conteúdo exibido será modificado.

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

Neste exemplo, o hook useState é utilizado para declarar uma variável de estado userName com valor inicial de string vazia. A função setUserName atualiza a variável userName sempre que necessário.

Explicação linha por linha:

• Linha 1: Importação do hook useState da biblioteca React para utilizar sua funcionalidade;
• Linha 3: Definição do componente Form utilizando a sintaxe padrão de função;
• Linha 4: Definição do estado inicial utilizando o hook useState;

1. userName representa o valor do campo de entrada, inicialmente definido como uma string vazia (""), especificada dentro dos parênteses de useState("");
2. setUserName é a função que permite atualizar o estado quando necessário.

• Linhas 6-9: Esta função arrow do JavaScript lida com a lógica de atualização do estado. Ela é acionada quando o usuário digita algo no campo. O valor do campo de entrada é obtido dentro da função usando event.target.value. Em seguida, utiliza-se a função setUserName para atualizar o estado com o valor do campo de entrada;
• Linhas 11-21: Renderização da marcação do componente.

1. Na linha 15, o userName é atribuído como valor inicial do campo de entrada utilizando o atributo value;
2. Na linha 16, o atributo onChange é utilizado para especificar a função a ser chamada quando houver alteração no campo de entrada.