React Hooks
Hooks é uma nova maneira de escrever componentes em React
O que são os hooks?
Segundo a documentação oficial do React:
Hooks são uma nova adição no React 16.8. Eles permitem que você use o state e outros recursos do React sem escrever uma classe.
Os hooks vieram para facilitar a criação e manutenção de componentes no React, abaixo vamos entender quais são os hooks mais comuns, seus conceitos e como aplicar na prática.
Hooks mais comuns
Nesse artigo vou abordar os 2 hooks mais comuns no React:
- useState
- useEffect
useState
Esse hook é responsável pela criação e atualização de um estado local.
No exemplo abaixo criei um botão que altera o background-color de uma div.
O primeiro passo é importar o useState dentro do componente.
Depois de importar, iremos definir a variável reativa responsável pela mudança da cor da div.
Na linha 18 criei uma função que recebe a cor gerada pela função generateColor() e atualizo o valor da variável color, já na linha 26 eu chamo o evento onClick que chama a função setColor() que irá alterar a variável color.
useEffect
Esse hooks serve para lidar com efeitos do ciclo de vida, como: componentDidMount, componentDidUpdate e componentWillUnmount, ou seja, ele é realizado quando:
- Quando o componente renderiza pela primeira vez;
- Quando o valor da dependência é atualizado;
- Quando o componente é desmontado.
No exemplo abaixo vou mostrar a hora atual atualizando a cada segundo.
Primeiro importamos o useEffect junto do useState.
Aqui chamamos a função useEffect, ela recebe 2 parâmetros, o primeiro é uma callback, que vai ser executada em algum dos ciclos de vida, o segundo é um array de dependências que recebe às variáveis que irão ser atualizadas, nesse caso, sempre que localeTime for alterada, ele vai chamar o useEffect.
Para executar o useEffect só uma vez ou quando ele for renderizado, deixamos o segundo parâmetro que é o array de dependências vazio.
Para executar o useEffect quando o componente é atualizado, adicionamos a variável a ser observada como dependência. Já para executar antes do componente ser desmontado, retornamos uma função que irá ser executada
