Tabla de contenido

1. Requisitos previos
2. Instalación
3. Introducción
4. ¿Qué son los ganchos personalizados?
5. ¿Cuándo deberías crear un gancho personalizado?
6. Ejemplo: crear un gancho personalizado
   • Paso 1: Identificar la lógica reutilizable
   • Paso 2: Extraer la lógica en un gancho personalizado
   • Paso 3: Uso del gancho personalizado
7. Beneficios de los ganchos personalizados
8. Mejores prácticas para ganchos personalizados
9. Conclusión

Requisitos previos:

Asegúrate de tener los conocimientos previos necesarios en estos:

Conocimientos básicos de React
Node.js y npm

Instalación:

Para comenzar con un nuevo proyecto de React usando Vite, sigue estos pasos:

i. Abra su terminal y ejecute el siguiente comando para crear un nuevo proyecto:

   npm create vite@latest my-react-app --template react

ii. Navegue al directorio de su proyecto:

     cd my-react-app

iii. Instalar dependencias: Instala los paquetes necesarios para tu proyecto:

   npm install

iv. Inicie el servidor de desarrollo: Ejecute el servidor de desarrollo:

    npm run dev

Tu aplicación React ahora se estará ejecutando y podrás verla en tu navegador en http://localhost:5173.

Introducción:

¿Qué son los ganchos de reacción?:

Los ganchos de React son funciones especiales que le permiten usar el estado y otras características de React en componentes funcionales. Ganchos como useState y useEffect son esenciales para gestionar el estado y los efectos secundarios.

¿Qué son los ganchos personalizados?:

los ganchos personalizados se pueden describir como una forma de reutilizar la lógica en múltiples componentes. En lugar de repetir el código, puede encapsularlo en un gancho personalizado, lo que hace que sus componentes sean más limpios y su código más fácil de administrar. al igual que los ganchos de React, cuando use ganchos personalizados, asegúrese de comenzar con el nombre de su componente (use seguido del nombre que desea darle al componente, por ejemplo, useFetchData). useFetchData puede ser un gancho personalizado que recupera datos de una API y los devuelve a su componente.

¿Entender los ganchos?

Comprensión de los ganchos:
Los ganchos como useState, useEffect y useContext le permiten usar el estado y otras características de React sin escribir una clase. Son bloques de construcción que le permiten manejar la lógica de los componentes de forma modular.

¿Cuándo deberías crear un gancho personalizado?

Los enlaces personalizados le permiten reutilizar la lógica con estado en diferentes componentes. Un ejemplo simple es un componente de contador, que tiene funcionalidad de incremento, disminución y reinicio; si necesita la misma lógica en varios componentes, la lógica se puede mover a un enlace personalizado. Otro ejemplo comúnmente utilizado es un componente que obtiene datos de una API y, si necesita la misma lógica en varios componentes, puede mover esa lógica a un enlace personalizado.

Ejemplo de creación de un gancho personalizado

Ejemplo: creemos una aplicación de contador simple con React hook(useState).en app.jsx

Paso 1 identificar la lógica reutilizable

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev   1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    

      

        
Counter App 
        
{counterstate}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

en el código anterior, la lógica reutilizable incluye la función de contraestado, estado inicial (o), incremento, disminución y reinicio. el incremento suma 1 al estado inicial mientras que el decremento resta 1 del estado inicial, mientras que el reinicio restablece al primer estado inicial.

Paso 2: extraer la lógica en un gancho personalizado

podemos crear una carpeta en la carpeta src llamada Hooks, luego un archivo llamado useCouter.jsx para el gancho personalizado como se muestra a continuación.

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Paso 3 usando el gancho personalizado

ahora, usemos nuestro gancho personalizado en App.jsx.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    

      

        
Counter App 
        
{value}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

Ejemplo 2.

Creemos un gancho personalizado useFetch para todas las llamadas API.

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

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

uso

en App.jsx, podemos usar este enlace personalizado para obtener un nombre de usuario del marcador de posición JSON como se muestra a continuación;

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    

      

        
Counter Appp 
        
{value}
        {loading && 
Loading....
}
        {error && 
Error: {error.message}
}
        {data && data.length > 0 && (
          

            
Username: {data[0].username}
          
        )}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

Beneficios de los ganchos personalizados

Reutilizabilidad:

Uno de los principales beneficios es la reutilización. Puede utilizar el mismo enlace personalizado en varios componentes, lo que reduce la duplicación de código.

Separación de preocupaciones:

Los enlaces personalizados te ayudan a separar la lógica de la interfaz de usuario. Tus componentes se centran en el renderizado, mientras que los ganchos personalizados se encargan de la lógica.

Componentes más limpios:

Al trasladar la lógica compleja a enlaces personalizados, sus componentes se vuelven más simples y fáciles de entender.

Mejores prácticas para ganchos personalizados

Convenciones de nomenclatura:

Los enlaces personalizados deben comenzar con la palabra "usar" para seguir la convención de nomenclatura de React. Esto también ayuda a identificar enlaces rápidamente en su código.

Ejemplo: useFetch, useForm, useAuth.

Manejo de dependencias:

Cuando utilices ganchos como useEffect dentro de un gancho personalizado, asegúrate de manejar las dependencias correctamente para evitar errores o renderizaciones innecesarias.

Evitar rerenderizaciones innecesarias:

Optimiza tus enlaces personalizados memorizando valores o usando enlaces como useCallback y useMemo para evitar volver a ejecutar cálculos costosos o volver a recuperar datos.

Conclusión

Hemos explorado el concepto de ganchos personalizados y su función para simplificar y mejorar el desarrollo de aplicaciones React. Al crear enlaces personalizados, puede encapsular y reutilizar la lógica con estado, lo que ayuda a mantener sus componentes limpios y fáciles de mantener.

Consulta el proyecto en GitHub: Mi repositorio de GitHub