Explícame Reaccionar Ganchos

React Hooks son funciones que te permiten usar el estado y otras características de React sin escribir una clase. Introducidos en React 16.8, permiten que los componentes funcionales manejen lógica como gestión de estado, eventos del ciclo de vida y efectos secundarios.

¿Cuál es la necesidad de ganchos personalizados?

Los ganchos de reacción personalizados le permiten extraer y reutilizar la lógica en múltiples componentes. Ayudan a mantener limpios los componentes y reducir la duplicación al encapsular la lógica con estado en una función. Los Hooks personalizados siguen las mismas reglas que los Hooks integrados (por ejemplo, pueden usar otros Hooks como useState, useEffect, etc.).

Muéstrame el código:

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value   1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    

      
{count}
      Increment
      Decrement
      Reset
    
  );
};

Reglas para ganchos personalizados

Solo llame a ganchos en el nivel superior: No llame a ganchos dentro de bucles, condiciones o funciones anidadas.

Solo llame a ganchos desde funciones de React: Los ganchos deben usarse en componentes funcionales u otros ganchos personalizados.