Ganchos personalizados de ReactJS

React.Js proporciona muchos ganchos integrados que puede usar en sus aplicaciones React. Pero además de ellos, puede crear sus propios ganchos personalizados y usarlos en sus aplicaciones, lo que resulta en una mejor legibilidad y una cantidad reducida de código. Los ganchos personalizados son funciones JavaScript normales cuyos nombres comienzan con «uso» y pueden llamar a otros ganchos (incorporados o personalizados). 

La necesidad de ganchos personalizados: la razón principal por la que debería usar ganchos personalizados es mantener el concepto de SECO(No se repita) en sus aplicaciones React. Por ejemplo, suponga que tiene alguna lógica que utiliza algunos ganchos integrados y necesita usar la lógica en varios componentes funcionales. Entonces, le quedan dos formas: 1) escribir la misma lógica en todos y cada uno de los componentes (lo que viola el concepto de SECO) y 2) crear una función separada que envuelva la lógica dentro de ella y luego llamarla desde esos componentes. La segunda opción es, sin duda, una mejor opción, ya que debe escribir la lógica solo una vez. Aquí, la función separada que creó es el enlace personalizado. Por lo tanto, cada vez que sienta que tiene una lógica que se utilizará en múltiples componentes funcionales (los ganchos no funcionan en los componentes de clase), simplemente cree un gancho personalizado separado para él y utilícelo.

Crear un enlace personalizado: crear un enlace personalizado es lo mismo que crear una función de JavaScript cuyo nombre comience con «uso». Puede usar otros ganchos dentro de él, devolver lo que quieras que devuelva, tomar cualquier cosa como parámetros. La función «useCustomHook» en el siguiente ejemplo, es un gancho personalizado que usa una variable de estado «contador». La función «resetCounter» aumenta el valor del contador en 1 y cada vez que el valor del contador se actualiza, se llama a la función que se pasa al gancho useEffect . La función ejecuta algún código (eliminado para enfocarse en cómo usar ganchos personalizados en lugar de implementar una lógica) que se usará en múltiples componentes. Este enlace personalizado devuelve la función «resetCounter».

Nombre de archivo- src/useCustomHook.js:

import {useState , useEffect} from "react";
  
// Remember to start the name of your custom hook with "use"
function useCustomHook(initializer , componentName){
    const [counter , setCounter] = useState(initializer);
      
    // Increases the value of counter by 1
       function resetCounter(){
        setCounter(counter + 1);
    }
      
  
    useEffect(() => {
        // Some logic that will be used in multiple components
        console.log("The button of the " 
        + componentName + " is clicked "
        + counter + " times.");
    } , [counter , componentName]); 
      
    // Calls the useEffect hook if the counter updates
    return resetCounter;
}
  
export default useCustomHook;

Uso del gancho personalizado en los componentes: para usar el gancho personalizado en sus componentes, simplemente importe la función «useCustomHook» del archivo «useCustomHook.js» en la carpeta «src».

Nombre de archivo- src/components/FirstComponent.js:

import React from "react";
  
// importing the custom hook
import useCustomHook from "../useCustomHook";
  
function FirstComponent(props){
  
    // ClickedButton = resetCounter;
    const clickedButton = useCustomHook(0 , "FirstComponent"); 
      
    return (
        <div>
            <h1> This is the First Component</h1>
            <button onClick={clickedButton}> 
                  Click here!
            </button>
        </div>
    );
}
  
export default FirstComponent;

Nombre de archivo: src/components/SecondComponent.js:

import React from "react";
  
// Importing the custom hook
import useCustomHook from "../useCustomHook";
  
function SecondComponent(props){
  
    // ClickedButton = resetCounter;
    const clickedButton = useCustomHook(0 , "SecondComponent"); 
      
    return (
        <div>
            <h1> This is the Second Component</h1>
            <button onClick={clickedButton}> 
               Click here!
            </button>
        </div>
    );
}
  
export default SecondComponent;

Nombre de archivo: src/App.js:

import React from 'react';
import './App.css';
import FirstComponent from './components/FirstComponent';
import SecondComponent from './components/SecondComponent';
  
function App(){ 
    return( 
        <div className='App'> 
        <FirstComponent />
        <SecondComponent />
        </div> 
    );
} 
    
export default App;

Producción: 

Si abres la consola de tu navegador, verás: 

Tenga en cuenta que useEffect se llama después del primer renderizado aunque declaramos la array de dependencia. Eso significa que la función de devolución de llamada que se pasa al enlace useEffect se ejecuta después del primer procesamiento y cuando se actualizan las variables en la array de dependencia. No existe una forma directa de evitar esta primera ejecución.

Ahora, si hace clic en el primer botón (botón del primer componente) y verifica la consola, verá que cada vez que hace clic en el botón, el valor del contador aumenta en 1 y el valor actualizado se imprime en la consola.

Si hace clic en el segundo botón, será similar a la salida anterior, verifique cuidadosamente la consola:

Tenga en cuenta que los dos contadores (definidos en «usecustomHook») de los dos componentes son diferentes. Los dos componentes usan dos variables de estado de «contador» diferentes (consulte «useCustomhook.js»), no comparten los estados. Por lo tanto, en esta aplicación React, cada componente tiene su propia variable de estado «contador». Del mismo modo, cada componente tiene su propio useEffect y se ejecutan de forma independiente. Si se actualiza el contador de FirstComponent, se llama a useEffect de FirstComponent; de manera similar, si se actualiza el contador de SecondComponent, se llama a useEffect de SecondComponent independientemente de FirstComponent (consulte el resultado anterior). 

En » src/components/FirstComponent.js «, el código es equivalente al siguiente código: 

import React , {useState ,useEffect} from "react";
  
function FirstComponent(props){
      
    const [counter , setCounter] = useState(initializer);
      
    // Increases the value of counter by 1
       function resetCounter(){
        setCounter(counter + 1):
    }
      
    useEffect(() => {
        // Some logic 
        console.log(counter);
    } , [counter]);
      
    const clickedButton = resetCounter; 
      
    return (
        <div>
            <h1> This is the First Component</h1>
            <button onClick={clickedButton}> 
               Click here!
            </button>
        </div>
    );
}
  
export default FirstComponent;

Nota: es importante nombrar sus ganchos personalizados que comiencen con «uso», porque sin él, React no puede darse cuenta de que es un gancho personalizado y, por lo tanto, no puede aplicarle las reglas de los ganchos. Por lo tanto, debe nombrarlo comenzando con «uso».