Como utilizar hooks em React

React é um framework em constante evolução, quando o framework foi lançado utilizava um formato totalmente diferente que estamos acostumados hoje. Hooks em React fazem parte dessa evolução quando function components foi introduzido na versão 16.8 do react, tem o objetivo de simplificar a construção de componentes.

Mas novos problemas foram introduzidos, construção de interfaces é algo que pode ter uma amplitude muito grande aplicações. E um desses problemas é a refatoração de componentes funcionais em componentes de classe.

Hooks em react

Hooks veio para permitir dois itens principais, a inclusão de estado em componentes funcionais e abstração de lógica em componentes. Toda vez que vemos uma palavra-chave use está relacionada aos hooks em react.

Nesse artigo iremos abordar dois dos mais hooks mais populares useState e useEffect, vamos ver como implementa-los e quais são as suas particularidades.

useState

Para o nosso primeiro exemplo eu vou utilizar o useState é um hook utilizado para definir estado em componentes funcionais e ele vai funcionar de seguinte forma:

import { useState } from 'react';

function CheckItem() {
  const [checked, setChecked] = useState(false);

  return <label>
    {checked ? 'Checked:' : 'Not Checked'}
    <input type="checkbox" defaultChecked={checked} onChange={() => setChecked(!checked)} />
  </label>;
}Code language: JavaScript (javascript)

No código acima temos uma função de componente utilizando um estado através do useState ele tem um valor padrão como false e desconstruído em dois parâmetros, o primeiro é o nome da variável do estado e a segunda é função que define esse estado.

Caso queiramos armazenar outra variável precisamos utilizar o useState mais de uma vez.

import { useState } from 'react';

function CheckItem() {
  // exemplo de useState rect
  const [isAdmin, setIsAdmin] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  return (
    <>
      <label>
        {isAdmin ? 'Admin:' : 'Not Admin:'}
        <input type="checkbox" defaultChecked={isAdmin} onChange={() => setIsAdmin(!isAdmin)} />
      </label>
      <label>
        {darkMode ? 'Dark Mode:' : 'Light Mode:'}
        <input type="checkbox" defaultChecked={darkMode} onChange={() => setDarkMode(!darkMode)} />
      </label>
    </>

  );
}Code language: JavaScript (javascript)

Como podemos ver o uso de hooks em react com useState duas vezes porque precisamos de duas variáveis, isso é utilizado somente quando necessário para reduzir a carga de memória das nossas aplicações.

Trabalhando com hooks em react

useEffect

O useEffect ou hook de efeito, permite você adicionar efeitos colaterais no seu componente, em outras palavras adicionar os ciclos de vida (componentDidMount, componentDidUpdate, e componentWillUnmount)de um componente clássico numa componente de função.

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

function Contador() {
  const [count, setCount] = useState(1);
  
  // exemplo de useEffect rect
  // Similar a componentDidMount e componentDidUpdate:
  useEffect(() => {
    // Atualiza o título da sua página
    document.title = `Sua pontuação: ${count}`;
  });

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}Code language: JavaScript (javascript)

No código acima temos um componente incrementando um contador toda vez que o componente for atualizado, quando o componente atualiza o título da página será alterado. Agora analisemos o segundo exemplo:

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

export default function Contador() {
  const [count, setCount] = useState(1);
  const [countPar, setCountPar] = useState(2);

  // Similar a componentDidMount e componentDidUpdate:
  useEffect(() => {
    console.log('update title')
    // Atualiza o título da sua página
    document.title = `Sua pontuação: ${count}`;
  });

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
      <p>Contador de número pares: {countPar}</p>
      <button onClick={() => setCountPar(count + 2)}>
        Clique aqui
      </button>
    </div>
  );
}Code language: JavaScript (javascript)

Nesse caso temos duas variáveis no estado e somente count é adicionada no título da página com useEffect, mas o que acontece é que quando alteramos countPar a função useEffect também é chamada, porque ela está “ouvindo” todas as mudanças da página. Para deixar o useEffect apenas ouvindo o valor de count precisamos especificar como um parâmetro ao final do useEffect como no código a seguir:

// Similar a componentDidMount e componentDidUpdate:
  useEffect(() => {
    console.log('update title')
    // Atualiza o título da sua página
    document.title = `Sua pontuação: ${count}`;
  }, [count]);
Code language: JavaScript (javascript)

Com esse array especificado no final passamos a quantidade de variáveis que importam para este hooks em react. Outro caso especial é a chamada de requisições externas, por exemplo, uma API.

useEffect(() => {
    fetch('https://api.github.com/users')
      .then(response => response.json())
      .then(setData);
  }, []);Code language: JavaScript (javascript)

Passando um array vazio, realizamos a chamada do useEffect apenas uma vez, ou seja, durante a montagem do componente. Assim evitamos realizar as requisições em loop, porque uma vez que data é atualizado useEffect poderia ser chamado novamente, assim realizando uma nova requisição.

Quando eu devo usar Hooks em react?

Essa é umas das principais perguntas de quem está começando a usar hooks, mas o seu uso possui algumas regras que vão ajudar a identificar qual melhor caso.

Use Hooks apenas no nível superior

O que isso significa? Não use Hooks dentro loops, condicionais ou cadeia de funções. Sempre use Hooks em react no nível mais alto da sua função. Seguindo essas regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar.

É isso que permite que o React preserve corretamente o estado dos Hooks quando são usadas várias chamadas a useState e useEffect.

Use Hooks Apenas em funções do React

Não use Hooks em funções JavaScript comuns. Em vez disso, você pode:

Chamar Hooks em componentes React.
Chamar Hooks dentro de Hooks personalizados.

Seguindo essas regras, você garante que toda lógica de estado (state) no componente seja claramente visível no código-fonte.

Quando criar um hook react?

Isso mesmo é possível criar hooks em React, isso permite extrair uma lógica que se repete com frequência e reutiliza-lá em diversas partes da sua aplicação.

import { useEffect, useState } from "react";

//exemplo de hooks em react personalizados
export function useFetch(uri) {
    const [data, setData] = useState();
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState();

    useEffect(() => {
        if(!uri) return;

        fetch(uri)
          .then(response => response.json())
          .then(setData)
          .then(() => setLoading(false))
          .catch(setError)
     }, [uri]);

     return { data, loading, error };
}Code language: JavaScript (javascript)

No código acima estamos criar um hook personalizado para realizar requisições fetch a um URL específica passada.

Conteúdo relacionado

Vamos fechando esse post por aqui o conteúdo sobre hooks em react, mas voltaremos a abordar esse assunto em breve. Confira mais conteúdo relacionado no blog: