Estado do React com Hooks

Introdução

Em React, "state" (estado) refere-se a dados que podem mudar ao longo do tempo dentro de um componente. Quando o estado de um componente muda, o React automaticamente re-renderiza o componente para refletir o novo estado. Hooks são funções que permitem "conectar-se" aos recursos de estado e ciclo de vida do React a partir de componentes funcionais.

Neste laboratório, você aprenderá a usar um dos Hooks mais fundamentais, o useState, para gerenciar o estado em um componente funcional React. Construiremos uma aplicação simples de contador para demonstrar como inicializar, exibir e atualizar o estado em resposta à interação do usuário.

Importe useState do react no arquivo do componente

Primeiro, vamos preparar nosso ambiente de desenvolvimento. O script de configuração já criou um novo projeto React para você em ~/project/my-app usando Vite.

Sua primeira tarefa é instalar as dependências necessárias e iniciar o servidor de desenvolvimento. Abra um terminal no WebIDE e execute os seguintes comandos um por um.

Navegue até o diretório do seu projeto:

cd my-app

Instale as dependências do projeto:

npm install

Inicie o servidor de desenvolvimento:

npm run dev -- --host 0.0.0.0 --port 8080

Após executar o último comando, você verá uma saída indicando que o servidor está em execução. Agora você pode visualizar sua aplicação ao vivo clicando na aba "Web 8080" na interface do LabEx. Ao longo deste laboratório, modificaremos o arquivo ~/project/my-app/src/App.jsx.

Nesta etapa, começaremos importando o Hook useState da biblioteca React. Hooks são funções especiais e, para usá-los, você deve primeiro importá-los do pacote react.

Usando o explorador de arquivos no WebIDE, navegue e abra o arquivo ~/project/my-app/src/App.jsx.

Primeiro, vamos limpar o conteúdo padrão para ter um ponto de partida mínimo. Substitua todo o conteúdo de App.jsx pelo seguinte código:

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Agora, adicione a instrução de importação no topo do arquivo para tornar o Hook useState disponível dentro do nosso componente.

import { useState } from "react";

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Esta linha informa ao JavaScript que queremos usar a função useState, que é uma exportação nomeada da biblioteca 'react'.

Inicialize o estado com const [count, setCount] = useState(0)

Nesta etapa, chamaremos o Hook useState para criar um novo estado em nosso componente.

A função useState recebe um argumento: o valor inicial do estado. Ela retorna um array contendo dois elementos:

1. O valor atual do estado.
2. Uma função que permite atualizar o estado.

Usamos uma sintaxe chamada "desestruturação de array" para obter esses dois valores em variáveis distintas. É uma convenção nomear essas variáveis como [algo, setAlgo].

Dentro da função do componente App, antes da instrução return, adicione a seguinte linha para inicializar nosso estado. Nomearemos nossa variável de estado como count e definiremos seu valor inicial como 0.

Atualize seu arquivo ~/project/my-app/src/App.jsx com o seguinte código:

import { useState } from "react";

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

  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

Agora, nosso componente tem um estado chamado count que é inicializado com 0, e uma função setCount que podemos usar para alterar seu valor posteriormente.

Exiba o valor do estado no JSX com {count}

Nesta etapa, exibiremos o valor atual de nossa variável de estado count na interface do usuário.

No JSX, você pode incorporar qualquer expressão JavaScript válida diretamente em seu markup, envolvendo-a em chaves {}. Isso nos permite renderizar dados dinâmicos, como nossa variável de estado.

Vamos adicionar uma tag de parágrafo <p> para exibir uma mensagem que inclua o valor atual de count.

Modifique o JSX dentro da instrução return em ~/project/my-app/src/App.jsx:

import { useState } from "react";

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Após salvar o arquivo, mude para a aba "Web 8080". Você deverá ver o texto "The current count is: 0" exibido na página, confirmando que nosso valor de estado inicial está sendo renderizado corretamente.

Atualize o estado com setCount(count + 1)

Nesta etapa, definiremos a lógica para atualizar nosso estado. É importante lembrar que você nunca deve modificar o estado diretamente (por exemplo, count = count + 1). Em vez disso, você deve sempre usar a função de definição de estado fornecida por useState, que em nosso caso é setCount.

Chamar a função de definição informa ao React que o estado mudou. O React agendará então uma nova renderização do componente com o novo valor de estado.

Vamos criar uma função simples dentro do nosso componente App que lidará com a lógica de incremento da contagem. Chamaremos essa função de incrementCount.

Adicione a função incrementCount ao seu arquivo ~/project/my-app/src/App.jsx:

import { useState } from "react";

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

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

Esta função, quando chamada, pegará o valor atual de count, adicionará 1 a ele e, em seguida, passará o novo valor para setCount. Isso acionará uma nova renderização do componente App.

Dispare a atualização no evento de clique do botão

Nesta etapa final, conectaremos nossa lógica de atualização de estado a uma ação do usuário. Adicionaremos um botão ao nosso componente e, quando o usuário clicar nele, chamaremos a função incrementCount que criamos na etapa anterior.

No React, você pode lidar com eventos como cliques fornecendo uma função a atributos especiais como onClick.

Vamos adicionar um elemento <button> ao nosso JSX e definir seu manipulador onClick para nossa função incrementCount.

Atualize seu ~/project/my-app/src/App.jsx com o código final:

import { useState } from "react";

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

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </>
  );
}

export default App;

Observe que passamos a própria função (incrementCount) para onClick, e não o resultado de chamá-la (incrementCount()). O React invocará essa função para nós sempre que o botão for clicado.

Agora, vá para a aba "Web 8080". Você deverá ver o botão "Increment". Clique nele e observe a contagem na tela aumentar a cada clique!

Resumo

Parabéns! Você construiu com sucesso um componente React com estado usando o Hook useState.

Neste laboratório, você aprendeu os princípios fundamentais do gerenciamento de estado no React moderno:

• O que é "estado" em um componente React e por que ele é essencial para criar UIs interativas.
• Como importar o Hook useState da biblioteca react.
• Como inicializar um pedaço de estado chamando useState com um valor inicial.
• Como usar desestruturação de array para obter a variável de estado e a função de definição de estado.
• Como exibir a variável de estado em seu JSX usando chaves {}.
• Como atualizar o estado em resposta a um evento do usuário (como um clique de botão) chamando a função de definição.

Compreender o Hook useState é um primeiro passo crítico para dominar o React. Agora você pode usar esse padrão para adicionar comportamento dinâmico e interativo aos seus próprios componentes React.