React Hooks personalizados §

---

Os Hooks Personalizados no React são uma poderosa abstração que permite aos desenvolvedores encapsular lógica de estado e comportamento em funções reutilizáveis. Com os Hooks personalizados, é possível extrair a lógica de um componente React e compartilhá-la entre diversos componentes, promovendo a reutilização de código e facilitando a manutenção.

Criando um Hook Personalizado §

A criação de um Hook Personalizado segue uma convenção: a função deve começar com a palavra “use” para que o React identifique corretamente que se trata de um Hook. Vamos criar um exemplo simples de Hook Personalizado para lidar com um contador:

import { useState } from 'react';
 
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);
 
  const increment = () => {
    setCount(count + 1);
  };
 
  const decrement = () => {
    setCount(count - 1);
  };
 
  const reset = () => {
    setCount(initialValue);
  };
 
  return { count, increment, decrement, reset };
};
 
export default useCounter;

Este Hook Personalizado, chamado useCounter, utiliza o Hook useState para gerenciar o estado do contador e fornece funções para incrementar, decrementar e resetar o contador.

Utilizando o Hook personalizado em componentes §

Após criar o Hook Personalizado, podemos utilizá-lo em qualquer componente funcional. Vamos ver como utilizá-lo em um componente de exemplo:

// CounterComponent.js
import React from 'react';
import useCounter from './useCounter';
 
const CounterComponent = () => {
  const { count, increment, decrement, reset } = useCounter();
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Incrementar</button>
      <button onClick={decrement}>Decrementar</button>
      <button onClick={reset}>Resetar</button>
    </div>
  );
};
 
export default CounterComponent;

Ao importar e chamar useCounter dentro do componente, temos acesso às funcionalidades do contador sem a necessidade de gerenciar diretamente o estado do contador no componente.

Benefícios dos Hooks Personalizados §

1. Reutilização de lógica: Com os Hooks Personalizados, é possível encapsular lógica complexa em funções independentes, tornando-a reutilizável em diferentes partes do aplicativo.

2. Manutenção simplificada: Ao isolar a lógica em Hooks Personalizados, a manutenção do código torna-se mais fácil. Qualquer alteração necessária pode ser feita diretamente no Hook, refletindo automaticamente em todos os componentes que o utilizam.

3. Composição de Hooks: Os Hooks Personalizados podem chamar outros Hooks, permitindo a composição de funcionalidades mais complexas a partir de Hooks mais simples.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)