Explicação do Código

1. Importação de Dependências 📦

import { useState, useEffect } from "react";

Aqui, estamos importando useState e useEffect do React. O useState é usado para gerenciar o estado dos dados e do erro no hook, enquanto o useEffect executa a função de requisição fetch sempre que a URL muda.

2. Definição do Hook useFetch 📡

const useFetch = (url) => {

Este é o nosso hook customizado chamado useFetch. Ele recebe uma url como parâmetro, que é a URL de onde os dados serão buscados. O hook irá retornar os dados e quaisquer erros que possam ocorrer durante o processo de requisição.

3. Definição dos Estados 🏗️

  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

Aqui, estamos criando dois estados com useState:

• data: Armazena os dados que serão retornados pela requisição.
• error: Armazena qualquer erro que possa ocorrer durante a execução da requisição.

O estado data é inicializado como um array vazio, enquanto error é inicializado como null.

4. Uso do useEffect para Requisição de Dados 🔄

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

Dentro do useEffect, que é um hook que executa código quando um componente é montado ou quando algum valor do estado ou props muda, estamos fazendo a requisição fetch:

• fetch(url): Envia uma requisição HTTP para a URL fornecida.
• .then((response) => response.json()): Quando a resposta chega, ela é convertida para o formato JSON.
• .then((data) => setData(data)): Após a conversão para JSON, os dados são armazenados no estado data.
• .catch((error) => setError(error)): Se ocorrer algum erro durante o processo, ele é capturado e armazenado no estado error.

O useEffect depende da url. Isso significa que sempre que a URL mudar, o hook será acionado novamente, realizando uma nova requisição.

5. Retorno do Hook 🔙

  return { data, error };

O hook useFetch retorna um objeto contendo:

• data: Os dados retornados pela requisição.
• error: O erro, caso tenha ocorrido.

Esses valores podem ser usados em qualquer componente que chamar o hook.

6. Exportação do Hook 🏷️

export default useFetch;

Finalmente, o hook useFetch é exportado para que possa ser utilizado em outros componentes da aplicação.

Código Completo 📜

import { useState, useEffect } from "react";
 
const useFetch = (url) => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);
 
  return { data, error };
};
 
export default useFetch;