Olá Pessoal!

Apesar dos Hooks não serem mais uma grande novidade dentro do React (pois foram introduzidos desde a versão 16.8), ainda existe um grande acervo de documentos que exemplificam sobre o modelo tradicional de desenvolvimento através de classes nos componentes do React.

Irei escrever uma série de artigos introdutórios falando sobre os principais Hooks do React, entre eles, o useState (que será nosso primeiro), useEffect e useContext, logo em seguida, passaremos por aqueles um pouco mais complexas para alguns usuários, como useMemo, useRef, useCallback, useReducer, entre outros. Você também pode criar seu próprio Hook, isso é muito útil em determinadas situações (poderemos ver numa próxima publicação, deixe o seu comentário).

Tentarei explicar de uma forma bem introdutória e clara (utilizando exemplos com Javascript e TypeScript), com a intenção de auxiliar aos desenvolvedores que estão iniciando nessa carreira do desenvolvimento front-end com o React (Web e Native) e que pode ser aplicado dentro dos frameworks mais populares como o Gatsby, Next.js e React Native.

Teoria

O que é um Hook?

De forma bem resumida, um Hook nada mais é que uma função que te dá acesso a determinados recursos de um componente funcional do React (sim, componente funcional, pois os Hooks não funcionam dentro de Classes), e dessa forma, você pode ter acesso ao seu estado e ciclo de vida. 

E para ter uma boa performance da forma como os estados e os ciclos de vida são renderizados no componente, os Hooks tem uma regrinha básica que especifica que nunca deve ser utilizado dentro de loops, regras condicionais (if, else por exemplo) ou funções aninhadas, fique atento a essa regra!

Mão na massa

useState

const [state, setState] = useState(initialState);

Esse Hook é o responsável por manipular o state da sua aplicação. Ele nos retorna um array onde temos um valor e uma função que ao ser invocada terá responsabilidade de alterar a informação desse valor. 

Podemos passar um valor inicial, quando ocorre a renderização inicial do componente. Esse valor é o mesmo sinalizado dentro do argumento inicial em useState(initialState).

Já nesse exemplo, o setState é utilizado quando queremos atualizar aquela variável de estado dentro do componente. Ele recebe o novo valor informado e em vez de atualizar de forma imediata, ele enfileira esse valor, passando assim o valor mais recente a essa variável, esse processo é bem conhecido no React por imutabilidade.

Uma outra alternativa, e que poderá encontrar em diversos códigos, é a possibilidade de se invocar a função que atualiza o estado com um retorno de chamada, pegando o mesmo exemplo anterior, poderia refatorá-lo assim:

setState(prevState => nextState)

Dessa forma retorna-se o novo estado com base no anterior. Devido a imutabilidade, isso é muito utilizado em algumas aplicações onde queremos fazer algumas comparações em mudanças de estado para animações em tela, por exemplo.

const [name, setName] = useState<string>('John Doe');

Já quando utilizamos o TypeScript, inferimos o tipo do estado como no exemplo acima useState<string>('value'). Porém, vale ressaltar, que para tipos primários (como strings, number, boolean, por exemplo) você não precisa tornar o tipo explícito, pois o interpretador do TypeScript consegue defini-los de forma dinâmica, deixando dessa forma, o código mais limpo e evitando assim um erro caso seja informado um tipo de dado diferente.

Um exemplo mais completo sobre o uso de tipo no useState com o TypeScript você pode ser abaixo:

import React, { useState } from 'react'

type ProductProps = {
  id: number
  name: string
  price: number
}

export default function Product() {
  const [ product, setProduct ] = useState<ProductProps[]>([
    {
      id: 1,
      name: 'Samsung Galaxy S20',
      price: 1999
    },
    {
      id: 2,
      name: 'Headset Misoftsot LX-300',
      price: 79
    },
    {
      id: 3,
      name: 'Mouse Gamer Corsair',
      price: 449
    }
  ])

  return (
    <div>
      <ul>
        { 
          product.map(item => (
            <li key={item.id}>{item.name} - {item.price}</li>
          ))
        }
      </ul>
    </div>
  )
}

Acima, de forma bem simples, mostro como passar um array de produtos, dentro do useState. Com isso, além de testarmos a utilização de Array (que é mais um tipo permitido dentro do useState), podemos verificar como proceder com essa tipagem através do TypeScript e inferir dentro do código realizar a listagem para exibição na página.

Dicas que são essenciais no uso do useState

Como boa prática, procure sempre chamar os hooks useState no início do componente. Mesmo que você o posicione em locais diferentes, o React irá tentar organizar para que seu código funcione, porém, apresentará diversos warnings em seu DevTools.

Evite criar useState dentro de loops, condicionais ou em algum função aninhada, isso pode causar diversos erros na renderização do seu componente, prejudicando o seu projeto.

É a partir dessa linha introdutória, que você poderá aprofundar um pouco mais dos seus conhecimentos dentro do React e o React Hooks. Explore um pouco os seus conhecimentos e estudos nessa funcionalidade do React que te permite ajudar em diversas tarefas nas suas aplicações. Você pode ter todas as informações sobre os Hooks na documentação oficial ou uma referência detalhada do useState.

Se você gostou desse artigo, não deixe de compartilhar e comentar. Se você quiser saber um pouco mais, trocar algumas idéias, poderá deixar nos comentários sua opinião sobre o assunto e até sugerir algo para os próximos artigos.

Aproveite e conheça um pouco dos meus trabalhos, visitando o site www.fsenaweb.me. Ele tem o meu portfólio, minhas redes sociais (inclusive o GitHub , onde você tem a disposição algumas aplicações de exemplos para poder praticar), e links para contatos.

Se você já desenvolve com o React e deseja ampliar os conhecimentos, eu indico um excelente curso, do Willian Justen, chamado React avançado, onde ele aborda de uma maneira super didática como trabalhar com o React, utilizando conceitos avançados, montando um projeto prático, realizando testes unitários, testes de integração e muito mais, vale a pena o investimento.

E é isso, até a próxima! Meu nome é Matheus Ricelly, e pela sua atenção, o meu muito obrigado !