Os ganchos personalizados do React são uma ferramenta eficaz para remover funcionalidades reutilizáveis ​​de seus componentes. Eles oferecem suporte a DRY (Don't Repeat Yourself), manutenção e limpeza em seu código. Mas o desenvolvimento de ganchos personalizados úteis requer uma compreensão sólida das ideias fundamentais e dos procedimentos recomendados do React. Neste post, discutiremos algumas das melhores estratégias para desenvolver ganchos personalizados no React, com exemplos para explicar como aplicá-los de forma eficiente.

1. Entenda a finalidade dos ganchos

Antes de mergulhar na criação de ganchos personalizados, é crucial entender o que são ganchos e por que eles existem. Os ganchos permitem que você use o estado e outros recursos do React em componentes funcionais. Ganchos personalizados permitem extrair a lógica do componente em funções reutilizáveis, que podem ser compartilhadas entre vários componentes.

Exemplo: gancho personalizado básico

Aqui está um exemplo simples de um gancho personalizado que gerencia um contador:

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

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

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

// Usage in a component
// const { count, increment, decrement, reset } = useCounter(10);

2. Siga as convenções de nomenclatura

React tem uma convenção onde ganchos personalizados devem começar com a palavra “use”. Esta não é apenas uma escolha estilística – o React depende desta convenção para aplicar automaticamente as regras dos ganchos (como não chamá-los condicionalmente).

Dica: sempre inicie seus ganchos personalizados com use para garantir que o React saiba que é um gancho.

3. Mantenha os ganchos puros

Os ganchos personalizados devem ser funções puras, o que significa que não devem ter efeitos colaterais, como modificar variáveis ​​globais ou interagir diretamente com sistemas externos. Se efeitos colaterais forem necessários, como fazer uma chamada de API, eles devem ser tratados dentro do gancho usando ganchos React integrados, como useEffect.

Exemplo: Gancho com efeitos colaterais

import { useState, useEffect } from 'react';

function useFetchData(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 result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, error, loading };
}

// Usage in a component
// const { data, error, loading } = useFetchData('https://api.example.com/data');

4. Aproveite os ganchos existentes
Ao criar ganchos personalizados, certifique-se de aproveitar os ganchos React existentes, como useState, useEffect, useContext e outros. Isso garante que seu gancho personalizado seja combinável e funcione perfeitamente com os recursos integrados do React.

Exemplo: Combinando Ganchos

Aqui está um gancho personalizado que combina useState e useEffect para gerenciar o armazenamento local:

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

// Usage in a component
// const [name, setName] = useLocalStorage('name', 'John Doe');

5. Reutilização e Composição

Um dos principais motivos para criar ganchos personalizados é promover a reutilização. Um bom gancho personalizado deve poder ser usado em vários componentes sem exigir modificações significativas. Além disso, os ganchos podem ser compostos juntos para construir uma lógica mais complexa.

Dica: concentre-se na extração de lógica que provavelmente será reutilizada em vários componentes.

6. Documente seus ganchos

Como qualquer pedaço de código, seus ganchos personalizados devem ser bem documentados. Inclua comentários explicando o que o gancho faz, quais parâmetros ele aceita, o que ele retorna e quaisquer efeitos colaterais que possa ter. Isso torna mais fácil para outros desenvolvedores (e para você no futuro) entender e usar seus ganchos corretamente.

Exemplo: documentando um gancho

/**
 * useCounter
 * 
 * A custom hook to manage a counter.
 *
 * @param {number} initialValue - Initial value of the counter.
 * @returns {object} { count, increment, decrement, reset } - Current count and functions to modify it.
 */
function useCounter(initialValue = 0) {
  // Implementation
}

7. Teste seus ganchos

O teste é essencial para garantir que seus ganchos personalizados se comportem conforme o esperado. Use bibliotecas de teste como react-hooks-testing-library ou Jest para escrever testes de unidade para seus ganchos.

Exemplo: teste básico para um gancho

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('should increment and decrement counter', () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);

  act(() => {
    result.current.decrement();
  });

  expect(result.current.count).toBe(0);
});

Uma técnica eficaz para abstrair e reutilizar funcionalidades em todo o seu aplicativo é usar ganchos personalizados no React. Você pode construir ganchos confiáveis ​​​​e de fácil manutenção que irão melhorar seu processo de desenvolvimento do React, entendendo o propósito dos ganchos, aderindo às convenções de nomenclatura, mantendo os ganchos puros, utilizando os ganchos existentes, garantindo a reutilização, documentação e testes.