React - O que são custom Hooks

É possível criar seus próprios hooks, os Custom Hooks é uma forma de extrair lógica de um componente em funções reutilizáveis.

Por convenção o nome dado a um custom hook se inicia com a palavra use.

Geralmente criamos um pasta hooks para organização do código.

O custom hook segue as mesma regras dos hooks e dentro de um hook customizado usamos outros hooks e é isso que o torna tão poderoso, compartilhar lógica e manipular ciclos de vida de forma totalmente isolado com o hooks ja conhecidos torna o código mais legível.

Vamos ao exemplo de um custom hook de fetch.

...
const useFetch = (url) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        setError(false);

        const response = await fetch(url);
        const data = await response.json();

        setData(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    })();
  }, [url]);

  return {
    loading,
    error,
    data,
  };
};

No exemplo temos um custom hook simples que realiza um fetch recebendo a url do endpoint como argumento e retornando um objeto com informações que são:

• loading para utilizamos um elemento de loading enquanto a resposta não chega.
• error caso exista erros no retorno do endpoint e tratar isso na UI.
• data dados retornado para manipulação na UI.

Vamos agora ver a sua utilização.

import React from "react";

const CustomHookExample = () => {
  const { data, error, loading } = useFetch(
    "https://api.github.com/users/nascimento-dev-io"
  );

  if (loading) {
    return <div>loading...</div>;
  }

  if (error) {
    return <div>Erro ao buscar usuário</div>;
  }

  return <div> User: {data.name}</div>;
};

Aqui temos um componente usando o useFetch para consumir a API do github e retornar dados de um user, no componente tratamos então os casos de loading e erro assim como o retorno em tela do nome do usuário nesse caso.

Vamos então ao código completo.

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

const CustomHookExample = () => {
  const { data, error, loading } = useFetch(
    "https://api.github.com/users/nascimento-dev-io"
  );

  if (loading) {
    return <div>loading...</div>;
  }

  if (error) {
    return <div>Erro ao buscar usuário</div>;
  }

  return <div> User: {data.name}</div>;
};


// Custom Hook
const useFetch = (url) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        setError(false);

        const response = await fetch(url);
        const data = await response.json();

        setData(data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    })();
  }, [url]);

  return {
    loading,
    error,
    data,
  };
};

Então percebemos que uma vez que você aprende a utilizar bem os hooks, eles concedem um poder muito grande no desenvolvimento em React, use sua imaginação para criar custom hooks conforme sua necessidade, nesse Site com Hooks Personalizados você encontra código de custom hooks para as mais variadas finalidade.

Obrigado por ler!

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

Veja também: Aprendendo React - The Roadmap!

_{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 :)

Github | Linkedin