React Hooks: useState!

Neste artigo vamos aprender a manipular estados em componentes funcionais utilizando o hook useState.

Thiago

2 min

Vamos começar a aprender sobre Hooks comparando este códigos com hook(useState) e códigos equivalente utilizando classes.

Declarando uma Variável State(Estado)

Código de classes:


          
            class Example extends React.Component {
          
          
              constructor(props) {
          
          
                super(props);
          
          
                this.state = {      
          
          
                  count: 0    
          
          
                };  
          
          
            }

Em uma classe, inicializamos o state count para 0 definindo this.state para { count: 0 } no construtor

----

Código com Hooks:


          
            import React, { useState } from 'react';
          
          
            
          
          
            function Example() {
          
          
              // Declarar uma nova variável de state, na qual chamaremos de "count"  
          
          
            const [count, setCount] = useState(0);

Em um componente de função, não temos this, portanto não podemos definir ou ler this.state. Em vez disso, chamamos o Hook useState dentro do nosso component:

O que o useState faz?

Ele declara um variável state. Nossa variável é chamada de count mas poderíamos chamar de qualquer coisa, como banana. Esta é uma maneira de “preservar” alguns valores entre as chamadas de funções — useState é uma nova maneira de usar as mesmas capacidades que o this.state tem em uma classe. Normalmente, variáveis “desaparecem” quando a função sai mas variáveis de state são preservadas pelo React.

O que passamos para o useState como argumento?

O único argumento para o Hook useState() é o state(Estado) inicial. Diferente de classes, o state não tem que ser um objeto. Podemos manter um número ou uma string se for tudo que precisamos. No nosso exemplo, apenas queremos um número para quantas vezes o usuário clicou, então passamos 0 como state inicial para nossa variável. (Se quiséssemos guardar dois valores diferentes no state, chamaríamos useState() duas vezes.)

O que useState retorna?

Ele retorna um par de valores: o state atual e uma função que atualiza o state. É por isso que escrevemos const [count, setCount] = useState(). Isto é similar ao this.state.count e this.setState em uma classe, exceto o fato de pegá-los em par.

Fontes:

Documentação do React

Learn

Support

More Options