Introdução aos Hooks no React

Olha quem voltou, tá passadah? É ela, a Amanda blogueirinha atacando novamente....

Já tem um tempo que tenho estudado sobre React e estou curtindo bastante a curva de aprendizado. Depois de quebrar bastante a cabeça para entender, vim compartilhar com vocês sobre os Hooks, o que são, onde habitam e do que se alimentam.

Normalmente quando renderizamos componentes em React, podemos salvar o estado dos mesmos, mas quando se trata de componentes funcionais, podemos usar o State.
Uma maneira que podemos usar o estado(State) e gerenciar esse estado pelo React dentro de funções são com os Hooks, que trata-se de uma biblioteca do React.

Um Hook que podemos usar é o UseState. Ao utilizarmos o hook de useState, indicamos para o React que aquele componente precisa guardar um estado. Para isso são devolvidas duas informações: a primeira é a referência para o valor do estado atual e a segunda é a função que altera esse estado. Essa separação precisa ser feita, para que o React consiga fazer o gerenciamento do componente e chamar o ciclo de renderização quando o estado for alterado.
Regras dos Hooks

Como sabemos, funções não deveriam guardar estados, então podemos usar os Hooks para guardar esses estados dentro de funções com as devidas regras.
Ao utilizar os Hooks, evitamos a reutilização de lógica de estado entre componentes diferentes e confusão de classes.
Os hooks devem sempre ser chamados no primeiro nível da função que está sendo utilizado.
Devemos chamar Hooks de componentes funcionais, e sempre devem ser chamados dentro de um componente funcional React ou de um Hook customizado.

Hooks na prática

Agora iremos ver um pouco sobre os Hooks na prática, conhecendo um pouco um deles, que é o useState.

O useState é um Hook que adiciona o estado de um componente de função, onde definimos o estado inicial de um componente, armazenando em uma variável.
O useState recebe o valor inicial da propriedade state e retorna o valor atual da mesma.

Para usar o useState, o primeiro passo é importar o mesmo:

Como mencionamos anteriormente, vamos declarar uma variável e atribuir um useState para ela :

A nossa variável chama "endereco", e está recebendo o estado inicial vazio entre aspas.
Futuramente para atualizarmos nosso endereço no código, chamaremos o "setEndereco"
No nosso exemplo, temos um campo input, que recebe o endereço inserido pelo usuário, será através desse campo que iremos usar o nosso setEndereco para atualizarmos o nosso estado:

No exemplo, recebemos como value(valor) a nossa const declarada endereco, e no método onChange do React, vamos realizar a atualização do nosso estado, chamando o setEndereco e atribuindo para o mesmo o valor que o usuário digitar.

Exemplo da tela de cadastro, e das informações salvas no console:

Claro que existem diversos outros Hooks que vocês podem encontrar na documentação do React( https://pt-br.reactjs.org/docs/hooks-overview.html), mas hoje eu quis trazer uma introdução para vocês verem como é interessante e ficarem instigados a aprenderem mais.

Por hoje é só, espero que tenham gostado.
Caso tenha algo que eu possa melhorar ou até acrescentar, deixe nos comentários...