Explique-me os ganchos de reação

React Hooks são funções que permitem usar o estado e outros recursos do React sem escrever uma classe. Introduzidos no React 16.8, eles permitem que componentes funcionais lidem com lógica como gerenciamento de estado, eventos de ciclo de vida e efeitos colaterais.

O que é necessário de ganchos personalizados?

Custom React Hooks permitem extrair e reutilizar lógica em vários componentes. Eles ajudam a manter os componentes limpos e a reduzir a duplicação, encapsulando a lógica com estado em uma função. Ganchos personalizados seguem as mesmas regras dos ganchos integrados (por exemplo, eles podem usar outros ganchos como useState, useEffect, etc.).

Mostre-me o 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
    
  );
};

Regras para ganchos personalizados

Chame ganchos apenas no nível superior: Não chame ganchos dentro de loops, condições ou funções aninhadas.

Chamar apenas ganchos de funções React: Ganchos devem ser usados ​​em componentes funcionais ou outros ganchos personalizados.