O que são React Hooks?

Hooks são funções que nos permitem ligar os recursos do statee lifecycle a partir dos components

Por que usar React Hooks?

Hooks permitem que você use o state sem escrever uma classe. Você pode extrair lógica de um statede forma que possa ser testada independentemente e reutilizada. Os Hooks permitem que você reutilize lógica com o statesem mudar a hierarquia de components

Regras dos Hooks

  • Chamar Hooks nos mais altos níveis. Isto é, não chamar dentro de condicionais, loops, ou funções aninhadas. Caso possível, use condicionais ou loops dentro do Hook

  • Chamar os Hooks apenas em components


State Hook

O useState é um hook chamado dentro de um component para adicionar states locais a ele. O React preserva o state entre os re-renders. O useStateretorna o par valore setValor, ou seja, o valor atual e uma função que atualiza o valor atual. O argumento para o useState é o state inicial. Veja o exemplo abaixo:

import React, { useState } from 'react';

function Example() {
  // Declara uma nova variável de state, que chamaremos de "count"  
const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );


No exemplo acima, definimos o valor atual count, e a função que atualiza count setCount. O argumento inicial do useState é 0, isso significa que count iniciará tendo 0 como valor de referência.

Ao clicarmos no botão, utilizamos o método que atualiza count setCount para adicionarmos 1 ao valor atual. Poderiamos também redefinir o state como bem entendessemos e fosse necessário. Isso seria necessário quando precisassemos de algum state de referência em alguma operação de comparação.

Hook de efeito

O useEffectadiciona a funcionalidade de executar side effects através de um component, segue a mesma finalidade do componentDidMount, componentDidUpdate e componentWillUnmount usadas em classes, mas unificado em uma mesma API. O React ira se lembrar da função passada e chama-la depois de atualizar o DOM

Utilizando o exemplo acima

import React, { useState, useEffect } from 'react';

function Example() {
   
const [count, setCount] = useState(0);
useEffect(()=>{
    // Atualiza o título do documento
    document.title = `you clicked ${count} times`
})
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );


Quando chamamos a useEffect, estamos dizendo ao React para executar a função após liberar as mudanças para o DOM. Por padrão, o React executa os efeitos após cada renderização
O useEffectexecuta depois de toda renderização, mas podemos mudar isso com a seguinte otimização:

const [count, setCount] = useState(0);
useEffect(()=>{
    // Atualiza o título do documento
    document.title = `you clicked ${count} times`
},[count]) //apenas re-executa o efeito quando count mudar
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );


O que significa isso? Significa que estamos dizendo ao React para pular o efeito caso countnão se atualize.

Observações sobre a otimização do useEffect:

  • É necessário que o array inclua qualquer valor do escopo acima, como props ou `state`, que mude com o tempo, caso contrário, o useEffect não irá funcionar corretamente.
  • Caso queira executar o efeito e limpá-lo apenas na montagem e desmontágem, um array vazio [] pode ser usado como segundo argumento. Isto mostra ao react que seu efeito nao depende de valor props ou state.