Como usar o hook useState do React

Aprenda como usar o hook useState do React na série Code React Hooks aqui no Hora de Codar!

Antes de explicar como usar o hook useState do React, a pergunta é: Você sabe o que é um hook?

Os React Hooks são uma ferramenta poderosa para desenvolver componentes funcionais reutilizáveis ​​de forma mais simples e eficiente. Ele é como uma chave de fenda ou um martelo que ajuda na construção de um brinquedo. Eles são como blocos de construção que nos ajudam a construir nossos aplicativos de uma maneira mais fácil e rápida.

Já entendido do assunto, você está pronto para aprender a usar o hook useState!

O useState é um hook para adicionar uma variável de estado (memória de um componente) ao seu componente. Para usar o useState você deve importar diretamente no React:

import { useState } from 'react';

export default function App(){
    const [state, setState] = useState(1);

ou:

import React from 'react'
export default function App(){
    const [state, setState] = React.useState(1);

Essas são duas maneiras de importar, porém não influencia em funcionalidade ou em performance, são somente maneiras de como usar o hook useState.

O useState retorna um array com esse valor (1) e uma função que permite alterar o estado para um outro valor. Porém, é importante ressaltar que no useState não é necessário você definir um valor previamente, e também você pode definir qualquer valor de qualquer tipo.

Para complementar o exemplo e mostrar como funciona o hook, agora você verá o uso prático do useState:

return (
    <>
      <p>{state}</p>
      <button onClick={() => setState(state + 1)}>+</button>
    </>
  );
}

O resultado você pode ver no seu navegador ao rodar o projeto.

useState com objetos

Também é possível usar o useState para manipular objetos.

Veja o exemplo a seguir:

import React from "react";
export default function App() {
  const [pessoa, setPessoa] = React.useState({
    nome: "Linus Torvalds",
    idade: 53, 
  })
    return (
    <>
      <p>{pessoa.nome}</p>
      <p>{pessoa.idade}</p>
      <button onClick={() => setPessoa({ ...pessoa, idade: pessoa.idade + 1 })}>
        +
      </button>
    </>
  );

Neste exemplo usamos o useState para armazenar o objeto e no jsx manipulamos o pessoa.idade com uma iteração com uma função no evento onClick.

Este foi o primeiro artigo da série Code React Hooks, série que tem como objetivo ensinar todos os hooks do React.

Aqui está um vídeo da playlist Simplificando os Hooks do React no canal Hora de Codar no YouTube falando sobre o hook useState, vídeo onde você irá aprender com exemplo prático como usar o hook useState do React.

Conclusão

Resumindo, o hook useState é um recurso que permite armazenar dados dentro de um componente, sem precisar de uma API ou uma fonte externa. Com ele, você pode, por exemplo, armazenar os dados da sua tela de formulário e enviar o estado para uma API para fazer a validação ou salvá-los. Também pode chamar a API e definir o valor no useState. O useState é um dos hooks mais utilizados do React e aqui você aprendeu como usá-lo. Se você gostou, peço que compartilhe com seus amigos para que eles também possam aprender.

Comunidade Hora de Codar

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!