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 utilizar o hook useState, basta chamá-lo e passar 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);

• É possível escolher qualquer palavra como nome para a variável de state. Recomenda-se utilizar um nome que descreva com precisão o que está sendo armazenado ou atualizado, como inputValue, page, number, name, entre outros;

• Da mesma forma, ao utilizar a função setState, há flexibilidade na escolha do nome da função. No entanto, seguir um padrão específico é uma convenção comum: 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 de setState correspondente normalmente seria chamada de setMail.

Exemplo 1:

Vamos construir o componente Counter, que irá manter seu próprio estado. Quando o botão Incrementar for clicado, atualizaremos o estado e acionaremos uma nova renderização do componente.

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-se o hook useState da biblioteca React para utilizar sua funcionalidade;
• Linha 3: Define-se o componente Counter utilizando a sintaxe convencional de função;
• Linha 4: Inicializa-se o 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 "incrementar" é clicado. Dentro da função, utiliza-se a função setCount para atualizar o estado;
• Linhas 10-15: Renderiza a marcação 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, passa-se a função increment.

Código completo do aplicativo:

Exemplo 2:

Vamos construir o componente Form com seu estado independente. Solicitamos que o usuário insira seu nome no campo de entrada e, dependendo do que for digitado, modificamos o conteúdo exibido.

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 a 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 nos 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 é obtido dentro da função usando event.target.value. Em seguida, a função setUserName é utilizada para atualizar o estado com o valor do campo de entrada;
• Linhas 11-21: Renderização do markup do componente.

1. Na linha 15, o valor de userName é atribuído como valor inicial do campo de entrada usando 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.

Código completo do aplicativo: