DEV Community

Cover image for React - O que são hooks | Parte 01
Jorge Nascimento
Jorge Nascimento

Posted on • Updated on

 

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';
Enter fullscreen mode Exit fullscreen mode

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>
   </>
  )
} 
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

!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])

}
Enter fullscreen mode Exit fullscreen mode

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])
}
Enter fullscreen mode Exit fullscreen mode

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);
  })
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

50 CLI Tools You Can't Live Without

>> Check out this classic DEV post <<