Los ganchos personalizados son una característica poderosa en React que se usa para propósitos más específicos a diferencia de los ganchos integrados de React, y se logra encapsulando funcionalidades comunes en funciones independientes. Los ganchos personalizados promueven la reutilización, mejoran la organización de los componentes y, en general, mejoran la mantenibilidad del código.

En esta guía profundizaremos en los propósitos del uso de ganchos personalizados, comprenderemos los fundamentos de la creación de ganchos personalizados y cómo usarlos con otros componentes. luego ilustraremos un ejemplo del mundo real creando un gancho personalizado de recuperación de API.

Comprender los conceptos básicos

por lo general, los desarrolladores se asustan con los términos personalizados, así que desmitificémoslo.

un gancho personalizado es simplemente una función que comienza con el prefijo use (que es crucial para que funcionen los ganchos personalizados).
Esta función consta de lógica reutilizable que utiliza enlaces integrados de React. Por lo general, considera usar un enlace personalizado si tiene la misma lógica en varios componentes, de modo que al utilizar enlaces personalizados puede resolver múltiples problemas, como mejorar la organización y el mantenimiento del código.

Creando un gancho personalizado simple

El siguiente ejemplo es un gancho personalizado de contador simple que administra el estado del conteo usando el gancho useState y actualiza el conteo respectivamente usando funciones de incremento o decremento que solo establecen el estado del conteo.

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;

felicidades, acabas de crear tus propios ganchos personalizados, es bastante simple. a continuación profundizaremos en cómo usar este gancho

Usar ganchos personalizados en componentes

el uso de ganchos personalizados en otros componentes se realiza simplemente destruyendo los valores devueltos del gancho personalizado dentro de otros componentes

import useCount from 'customHooks'

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

  return(
    
{ count }
       
     - 
  )
}

export default Page

Ejemplo del mundo real del uso de un gancho personalizado

una de las lógicas más repetitivas es buscar una API, un sitio de comercio electrónico obtendrá datos para la autenticación, el proceso de pago, mostrar todos los productos, comentarios, reseñas... etc.

puedes imaginar la cantidad de lógica de búsqueda repetitiva en toda la aplicación que se puede simplificar usando un enlace personalizado.

en esta sección creará un gancho de búsqueda personalizado.

usaremos los ganchos React integrados useState y useEffect
Tendremos un estado para los datos, un estado pendiente en caso de que queramos mostrar una rueda giratoria mientras se recuperan los datos y un estado de error en caso de que falle la recuperación.

el siguiente código se explica por sí mismo. Dentro de useEffect definimos una función fetchData que es asincrónica y que manejará la lógica de recuperación. debajo de useEffect, el enlace personalizado devolverá los siguientes valores que se pueden usar en todos los demás componentes: datos, pendientes, error.

observe que estamos pasando un valor de URL para usar el parámetro de enlace personalizado Fetch, lo que significa que los datos se pueden pasar a enlaces 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

al usar el gancho useFetch dentro de los componentes de la página, ahora podemos mostrar un mensaje al cliente en caso de error, mostrar una rueda giratoria mientras se obtienen los datos y, finalmente, mostrar los datos al cliente.

este componente se puede utilizar repetidamente en toda la aplicación, lo que reduce la cantidad 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;

Conclusión

Los enlaces personalizados ofrecen un mecanismo poderoso para encapsular y reutilizar la lógica dentro de los componentes de React. Al extraer funcionalidades comunes en funciones dedicadas, puede mejorar la organización del código, mejorar la mantenibilidad y promover la reutilización del código.

Hemos explorado los fundamentos de la creación de ganchos personalizados, entendiendo cómo usarlos dentro de los componentes de React y mostramos un ejemplo del mundo real del uso de un gancho personalizado.