Reagir Ganchos Personalizados

Ganchos são funções reutilizáveis.

Quando você tem uma lógica de componente que precisa ser usada por vários componentes, podemos extrair essa lógica para um Hook customizado.

Ganchos personalizados começam com "use". Exemplo: useFetch.

Construir um gancho

No código a seguir, estamos buscando dados em nosso Homecomponente e exibindo-os.

Usaremos o serviço JSONPlaceholder para buscar dados falsos. Esse serviço é ótimo para testar aplicativos quando não há dados existentes.

Para saber mais, confira a seção JavaScript Fetch API .

Use o serviço JSONPlaceholder para buscar itens "todo" falsos e exibir os títulos na página:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

A lógica de busca pode ser necessária em outros componentes também, então vamos extrair isso em um Hook customizado.

Mova a lógica de busca para um novo arquivo a ser usado como um Hook customizado:

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

import ReactDOM from "react-dom";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Exemplo explicado

Criamos um novo arquivo chamado useFetch.jscontendo uma função chamada useFetchque contém toda a lógica necessária para buscar nossos dados.

Removemos a URL codificada e a substituímos por uma urlvariável que pode ser passada para o Hook customizado.

Por fim, estamos retornando nossos dados do nosso Hook.

Em index.js, estamos importando nosso useFetchHook e utilizando-o como qualquer outro Hook. É aqui que passamos a URL para buscar dados.

Agora podemos reutilizar esse Hook customizado em qualquer componente para buscar dados de qualquer URL.