React - O que são hooks | Parte 01

Hooks é a uma API React que tornou possível a criação de componentes funcional, antes apenas classes podiam armazenar estados. React disponibiliza uma API com funções que podemos usar para criar estados, gerenciar ciclo de vida do componentes e outras finalidades, veremos de forma básica característica e uso dos principais hooks utilizados no dia a dia.

Regras dos hooks

• Apenas chame Hooks no nível mais alto.
• Não chame Hooks dentro de loops, condições ou funções aninhadas.
• Apenas chame Hooks de componentes funcionais.
• Não chame Hooks em funções JavaScript comuns ou classes.

Documentação Oficial: Regras dos Hooks

Utilizando os hooks

Os hooks são sempre importando do React no inicio do seu código com a seguinte sintaxe.

import { useState, useEffect, useContext, useReducer, useCallback } from 'react';

useState

O useState é o hook mais comum e utilizado gerenciar estado em componentes funcionais.
O useState recebe um parâmetro ( ou função ) que defini o valor inicial do estado, o seu retorno é um array onde a primeira posição é o estado e o segundo é uma função que é usada para atualizar o estado, por convenção utilizamos o prefixo set seguido do nome do estado para nomear essa função.

Exemplo de utilização do useState:

// 1 - importa o hook.
import React, { useState } from 'react'

const Counter = () => {
 //  2 - Usa destructuring para pega os retorno do hook e setando 0 como valor inicial.
  const [counter, setCounter] = useState(0);

  // 3 - Uso do estado para renderizar o número na UI.
 // 4 - Utilizando o evento onClick chamando a função setCounter 
  para incrementar o contador ( state ).
  return (
   <>
      <div>
        Contador: {counter}
      </div>
      <button onClick={setCounter(counter + 1)}>Incrementar</button>
   </>
  )
} 

A função de atualização do estado pode receber uma função como argumento e essa função tem acesso ao valor do estado anterior para realizar alguma atualização baseado nele.

Exemplo:

setState((prevState) => !prevState);

!Importante - setState pode ser assíncrona pois ela agenda uma re-renderização.

É possível usar mais de um estado no componente, para isso apenas repita a chamada do useState atribuindo nomes as variáveis e funções de forma coerentes com suas atribuições, pois isso ajuda na legibilidade e manutenção do código.

Estado em react esta ligado a renderização da UI é importante o entendimento desse hook e uso junto a outros que serão estudados posteriormente.

Documentação Oficial: Usando o State do Hook

useEffect

O useEffect é o hook utilizado no lifecycle do componente, ele não possui retorno e é usado para realizar "efeito colaterais" geralmente baseado em atualização de estado/props.

Em sua chamada são necessário 2 parâmetros, um função de efeito, e uma array de dependências, sempre que uma ou mais dessas dependências é alterada a função de efeito é executada novamente.

Entendendo o uso:

...
const UserInfo = (props) => {

  useEffect(() => {
    console.log(`ID do usuário alterado para ${props.userID}`)
  },[props.userID])

}

Em toda mudança no userID o useEffect é executado novamente, no caso de chamada async é necessário criar uma nova função interna executando-a na sequência ou usando IIFE.

...
const UserInfo = (props) => {

  useEffect(() => {
    async function loadUserData(){
      await services.getUserByID(props.userID);
    }

    loadUserData()
  }, [props.userID])

  useEffect(() => {
    console.log(`ID do usuário alterado para ${props.userID}`)
  },[props.userID])
}

Caso queira chamar o useEffect apenas uma vez no mount do componente deixe o array de dependências vazio.

Se não declara o array, o hook será executado em toda nova renderização do componente.

Os exemplos anteriores cobrem os casos de montagem e atualização do componente, existe também a fase de desmontagem, o useEffect pode ser utilizado nessa fase também e um caso comum é remover eventListeners.

...
const App = () => {

  function handleScroll(event){
    console.log("Window Scroll...", event)
  }

  useEffect(() => {
    // cria o eventListener assim que o componente é montado.
    document.addEventListener("scroll", handleScroll);

    // remove o eventListener quando componente é desmontado.
    return () => removeEventListener("scroll", handleScroll);
  })
}

No exemplo estamos tratando o caso de unmount do componente, a função de retorno indica ao React que uma 'limpeza' precisa ser feita, nesse caso remover o eventListener e isso evita memory leak. Saber lidar com uso correto de dependências e o ciclo de vida dos componentes evita bugs e otimiza a aplicação.

Por enquanto é isso, no próximo artigo veremos outros hooks como useReducer, useCallback, useMemo e useRef.

Documentação Oficial: Usando Effect Hook

Documentação Oficial - Introdução aos Hooks | API de Referência dos Hooks

Veja também: Aprendendo React - The Roadmap! | React - O que são hooks | Parte 02

_{Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.}

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

linkedin | github