Ganchos personalizados são um recurso poderoso no React que são usados ​​para propósitos mais específicos, ao contrário dos ganchos integrados do React, e isso é feito encapsulando funcionalidades comuns em funções independentes. ganchos personalizados promovem a reutilização, melhoram a organização dos componentes e melhoram a capacidade de manutenção geral do código.

Neste guia, iremos nos aprofundar nos propósitos de usar ganchos personalizados, entendendo os fundamentos da criação de ganchos personalizados e como usá-los em outros componentes. em seguida, ilustraremos um exemplo do mundo real criando um gancho personalizado da API de busca.

Entendendo o básico

geralmente os desenvolvedores ficam com medo de ganchos personalizados, então vamos desmistificar isso.

um gancho personalizado é simplesmente uma função que começa com o prefixo use (que é crucial para que os ganchos personalizados funcionem).
esta função consiste em lógica reutilizável que utiliza ganchos integrados do React. normalmente você considera usar um gancho personalizado se tiver a mesma lógica em vários componentes, portanto, ao utilizar ganchos personalizados, você pode resolver vários problemas, como melhorar a organização e a capacidade de manutenção do código.

Criando um gancho personalizado simples

O exemplo abaixo é um gancho personalizado de contador simples que gerencia o estado de contagem usando o gancho useState e atualiza a contagem respectivamente usando funções de incremento ou decremento que apenas definem o estado de contagem.

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev   1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

parabéns, você acabou de criar seus próprios ganchos personalizados, é muito simples. a seguir, veremos como usar este gancho

Usando ganchos personalizados em componentes

usar ganchos personalizados em outros componentes é feito simplesmente destruindo os valores retornados do gancho personalizado dentro de outros componentes

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    
{ count }
       
     - 
  )
}

export default Page

Exemplo do mundo real de uso de gancho personalizado

uma das lógicas mais repetitivas é buscar uma API, um site de comércio eletrônico irá buscar dados para autenticação, processo de pagamento, exibição de todos os produtos, comentários, avaliações ... etc.

você pode imaginar a quantidade de lógica de busca repetitiva em todo o aplicativo que pode ser simplificada usando um gancho personalizado.

nesta seção criará um gancho de busca personalizado.

usaremos ganchos React integrados useState e useEffect
teremos um estado para os dados, um estado pendente caso queiramos mostrar um botão giratório enquanto os dados estão sendo buscados e um estado de erro em caso de falha na busca.

o código abaixo é autoexplicativo. dentro de useEffect definimos uma função fetchData que é assíncrona e que irá lidar com a lógica de busca. abaixo de useEffect, o gancho personalizado retornará os seguintes valores que podem ser usados ​​em todos os outros dados de componentes, pendentes, erro.

observe que estamos passando um valor de URL para o parâmetro de gancho personalizado useFetch, o que significa que os dados podem ser passados ​​para ganchos personalizados

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

usando o gancho useFetch dentro dos componentes da página, agora podemos exibir uma mensagem para o cliente em caso de erro, mostrar um botão giratório enquanto os dados estão sendo buscados e, finalmente, exibir os dados para o cliente.

este componente pode ser usado repetidamente em todo o aplicativo, o que diminui a quantidade de código repetitivo.

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) 
Cloud not fetch data from the server

  return(
    {pending ? 
     ( )
     :
     (
      data.map((item) => (
        

          
{item.title}
  
          
{item.body}
        
       )
      )
    )}
  )
}

export default Page;

Conclusão

Ganchos personalizados oferecem um mecanismo poderoso para encapsular e reutilizar lógica dentro dos componentes React. Ao extrair funcionalidades comuns em funções dedicadas, você pode aprimorar a organização do código, melhorar a capacidade de manutenção e promover a reutilização do código.