ReactJS useState Hook: um guia para iniciantes

Introdução

ReactJS, uma biblioteca JavaScript popular para construção de interfaces de usuário, introduz hooks para simplificar e aprimorar a lógica dos componentes. Um dos ganchos mais comumente usados ​​no React é o gancho useState, que gerencia o estado de um componente. Compreender como isso funciona pode ajudá-lo a desbloquear todo o potencial do React.

Neste guia para iniciantes, exploraremos o que são ganchos, como inicializar e atualizar o estado com useState e nos aprofundaremos na retenção e atualização de vários tipos de estado. No final, você será capaz de gerenciar com segurança o estado dos seus componentes. Vamos começar!

O que são ganchos?

Ganchos em reação

Hooks são funções que permitem usar state e outros recursos do React sem escrever um componente de classe. Antes dos ganchos, o gerenciamento do estado do componente só era possível dentro dos componentes da classe. Com ganchos como useState, você pode adicionar estado a componentes funcionais, tornando-os mais versáteis.

React fornece vários ganchos, como:

• useState – para gerenciar o estado.
• useEffect – para efeitos colaterais, como busca de dados.
• useContext – para gerenciar o contexto em seu aplicativo.

Hooks simplificam o gerenciamento de estado e reduzem a necessidade de componentes complexos baseados em classes. A beleza dos ganchos está em sua capacidade de fornecer a funcionalidade necessária, mantendo um código mais limpo e legível.

Como inicializar useState

Inicialização Básica

Inicializar useState em um componente funcional é simples. Começa importando o gancho do React e chamando-o dentro do seu componente. A sintaxe é semelhante a esta:

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

Discriminação:

• useState(0) inicializa o estado com um valor inicial de 0.
• count é a variável de estado, e setCount é a função usada para atualizar este estado.
• Cada vez que o botão é clicado, o estado é atualizado e o componente é renderizado novamente com o novo valor.

Como ler o estado

Acessando o estado atual

A leitura do estado atual é simples. Você simplesmente usa a variável state (count no exemplo anterior) diretamente em seu JSX. Como o React renderiza novamente o componente quando o estado muda, o valor atualizado é automaticamente refletido na IU.

Vamos ajustar nosso exemplo anterior para mostrar como podemos acessar o estado:

Current count: {count}

Este código acessa o estado de contagem e o exibe dinamicamente.

Como atualizar o estado

Usando a função de configuração de estado

A atualização do estado no React é feita usando o segundo elemento de useState, que é a função setter. Esta função pega o valor atualizado e renderiza novamente o componente com esse novo estado.

Aqui está um exemplo de como aumentar e diminuir um contador:

 setCount(count   1)}>Increment
 setCount(count - 1)}>Decrement

React garante que sempre que o estado for atualizado, as alterações serão refletidas na IU perfeitamente. É importante lembrar que as atualizações de estado são assíncronas no React, o que significa que você nem sempre verá o estado atualizado imediatamente após chamar a função setter.

O que o Estado pode conter?

Diferentes tipos de valores

O estado no React pode conter uma variedade de tipos de dados, incluindo:

• Tipos primitivos como números, strings e booleanos.
• Objetos e matrizes.
• Valores Nulo e indefinidos.

Vejamos exemplos destes:

Mantendo uma String no Estado:

const [name, setName] = useState("John");

Mantendo um array no estado:

const [items, setItems] = useState([1, 2, 3]);

Mantendo um objeto no estado:

const [user, setUser] = useState({ name: "John", age: 30 });

O gancho useState do React permite que você gerencie esses diferentes tipos de dados, mas é preciso ter cuidado ao atualizar tipos complexos, como objetos e arrays, como exploraremos a seguir.

Atualizando objetos e matrizes no estado

Atualizações imutáveis

Ao trabalhar com objetos ou arrays no React, é crucial atualizá-los imutavelmente. O React não compara objetos aninhados profundamente, portanto, modificar um objeto diretamente não acionará uma nova renderização. Em vez disso, você deve criar um novo objeto ou array com os valores atualizados.

Exemplo: Atualizando um Objeto

const [user, setUser] = useState({ name: "John", age: 30 });

function updateName() {
  setUser(prevState => ({
    ...prevState,
    name: "Doe"
  }));
}

Neste exemplo:

• Espalhamos o estado existente (prevState) em um novo objeto usando ...prevState.
• Em seguida, modificamos a propriedade name sem alterar o objeto de usuário original.

Exemplo: Atualizando um Array

const [items, setItems] = useState([1, 2, 3]);

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

Aqui:

• Espalhamos o array anterior (prevItems) e acrescentamos o novo item (4), criando um novo array.

Seção de perguntas frequentes

Por que usar useState em vez de estado baseado em classe?

Hooks, como useState, simplificam o gerenciamento de estado dentro de componentes funcionais, tornando o código mais legível e menos confuso em comparação com componentes de classe.

O useState pode conter vários tipos de dados?

Sim, useState pode conter strings, números, arrays, objetos, booleanos e até valores nulos ou indefinidos.

A atualização do estado é assíncrona?

Sim, o React atualiza em lote para o estado e as alterações podem não ser refletidas imediatamente após chamar a função setter.

Como atualizo estados complexos, como objetos ou matrizes?

Para evitar a mutação do estado original, sempre crie uma cópia do objeto ou array e, em seguida, atualize-o de forma imutável usando o operador spread (...).

Conclusão

O gancho useState é um dos ganchos mais poderosos e usados ​​com frequência no React. Ele ajuda você a gerenciar o estado local dentro dos componentes funcionais, tornando seu código React mais limpo e eficiente. Esteja você lidando com variáveis ​​simples ou objetos e arrays complexos, entender como usar e atualizar o estado corretamente é a chave para construir aplicativos React dinâmicos. Continue praticando e logo você dominará o gerenciamento de estado do React com facilidade!

Agora que você passou de zero a herói com useState, tente incorporá-lo em seus projetos e veja a magia do React em ação!