Já se pegaram copiando a mesma combinação de `useEffect` e `useState` em vários componentes? Ou talvez tenham escrito a mesma lógica de busca de dados pela quinta vez na semana, pensando "tem que ter um jeito melhor"? Hoje, quero compartilhar Custom Hooks - o padrão mais poderoso do React para eliminar duplicação de código e criar lógica stateful reutilizável. No final deste artigo, vocês vão entender como extrair lógica repetitiva em custom hooks, construir padrões robustos e reutilizáveis, e escrever aplicações React mais limpas. ## O que são Custom Hooks? Pensem em Custom Hooks como utilitários pessoais do React. Assim como vocês extraem cálculos repetitivos para funções regulares, Custom Hooks permitem extrair lógica stateful repetitiva para funções reutilizáveis. Um Custom Hook é simplesmente uma função JavaScript que: - Começa com "use" (isso é crucial para o React tratá-la como hook) - Pode chamar outros hooks do React dentro dela - Retorna o que vocês quiserem (state, funções, objetos, etc.) Eles resolvem o problema antigo da duplicação de lógica em componentes React. Em vez de copiar a mesma lógica de `useState`, `useEffect` e handlers entre componentes, vocês empacotam uma vez e reutilizam em qualquer lugar. ## Quando Usar Custom Hooks? **Bons casos de uso:** - Padrões de busca de dados que se repetem entre componentes - Lógica de manipulação e validação de formulários - Sincronização com localStorage - Event listeners da window (resize, scroll, etc.) - Gerenciamento de estado complexo que aparece em vários lugares - Chamadas de API com estados de loading/erro **Quando NÃO usar Custom Hooks:** - Lógica que só aparece em um único componente - Estado simples que não precisa de abstração - Quando uma função regular resolveria (sem estado ou efeitos) ## Construindo Lógica Reutilizável: Seu Primeiro Custom Hook Vamos construir um exemplo prático: um hook que gerencia estados de loading e tratamento de erro para qualquer operação assíncrona. ### Passo 1: A Estrutura Básica ```javascript // hooks/useAsync.js import { useState, useEffect } from 'react'; function useAsync(asyncFunction, dependencies = []) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [data, setData] = useState(null); return { loading, error, data }; } ``` Isso configura nosso gerenciamento básico de estado. Percebam como começamos com "use" e gerenciamos três estados comuns necessários para operações assíncronas. ### Passo 2: Adicionando a Lógica Assíncrona ```javascript function useAsync(asyncFunction, dependencies = []) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [data, setData] = useState(null); useEffect(() => { let isCancelled = false; const runAsync = async () => { try { setLoading(true); setError(null); const result = await asyncFunction(); if (!isCancelled) { setData(result); } } catch (err) { if (!isCancelled) { setError(err); } } finally { if (!isCancelled) { setLoading(false); } } }; runAsync(); return () => { isCancelled = true; }; }, dependencies); return { loading, error, data }; } ``` Agora temos um manipulador assíncrono completo com cleanup para prevenir memory leaks. A função de cleanup previne atualizações de estado em componentes desmontados. ### Passo 3: Usando Seu Custom Hook ```javascript // components/UserProfile.js import useAsync from '../hooks/useAsync'; function UserProfile({ userId }) { const { loading, error, data: user } = useAsync( () => fetch(`/api/users/${userId}`).then(res => res.json()), [userId] ); if (loading) return

Carregando usuário...

; if (error) return

Erro: {error.message}

; if (!user) return null; return (

{user.name}

{user.email}

); } ``` Olhem como isso ficou limpo! Sem estados de loading repetitivos, sem boilerplate de tratamento de erro - apenas a lógica essencial do componente. ## Um Exemplo Mais Complexo: Busca de Dados com Cache Vamos construir algo mais realista - um hook que manipula chamadas de API com cache e lógica de retry: ```javascript // hooks/useApiCall.js import { useState, useEffect, useCallback, useRef } from 'react'; const cache = new Map(); function useApiCall(url, options = {}) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [data, setData] = useState(null); const abortControllerRef = useRef(null); const { enableCache = true, retries = 3, retryDelay = 1000 } = options; const fetchData = useCallback(async (retryCount = 0) => { // Verifica cache primeiro if (enableCache && cache.has(url)) { setData(cache.get(url)); return; } // Cancela requisição anterior if (abortControllerRef.current) { abortControllerRef.current.abort(); } abortControllerRef.current = new AbortController(); try { setLoading(true); setError(null); const response = await fetch(url, { signal: abortControllerRef.current.signal, }); if (!response.ok) { throw new Error(`Erro HTTP! status: ${response.status}`); } const result = await response.json(); // Faz cache do resultado if (enableCache) { cache.set(url, result); } setData(result); } catch (err) { if (err.name === 'AbortError') return; // Lógica de retry if (retryCount < retries) { setTimeout(() => { fetchData(retryCount + 1); }, retryDelay * Math.pow(2, retryCount)); // Exponential backoff } else { setError(err); } } finally { setLoading(false); } }, [url, enableCache, retries, retryDelay]); useEffect(() => { fetchData(); return () => { if (abortControllerRef.current) { abortControllerRef.current.abort(); } }; }, [fetchData]); const refetch = useCallback(() => { cache.delete(url); fetchData(); }, [fetchData, url]); return { loading, error, data, refetch }; } ``` Este hook agora inclui cache, lógica de retry com exponential backoff, cancelamento de requisições e função de refetch. Imaginem ter que escrever essa lógica em todo componente que precisa de dados da API! ## Padrão Avançado: Validação de Formulário com Regras Complexas Vamos construir algo ainda mais sofisticado - um hook de validação de formulário que manipula múltiplos campos com regras customizadas: ```javascript // hooks/useFormValidation.js import { useState, useCallback, useMemo } from 'react'; function useFormValidation(initialValues, validationRules) { const [values, setValues] = useState(initialValues); const [errors, setErrors] = useState({}); const [touched, setTouched] = useState({}); const validateField = useCallback((name, value) => { const rules = validationRules[name]; if (!rules) return null; for (const rule of rules) { const error = rule(value, values); if (error) return error; } return null; }, [validationRules, values]); const validateForm = useCallback(() => { const newErrors = {}; Object.keys(validationRules).forEach(name => { const error = validateField(name, values[name]); if (error) newErrors[name] = error; }); setErrors(newErrors); return Object.keys(newErrors).length === 0; }, [validateField, validationRules, values]); const handleChange = useCallback((name, value) => { setValues(prev => ({ ...prev, [name]: value })); // Valida o campo se já foi tocado if (touched[name]) { const error = validateField(name, value); setErrors(prev => ({ ...prev, [name]: error })); } }, [validateField, touched]); const handleBlur = useCallback((name) => { setTouched(prev => ({ ...prev, [name]: true })); const error = validateField(name, values[name]); setErrors(prev => ({ ...prev, [name]: error })); }, [validateField, values]); const handleSubmit = useCallback((onSubmit) => { return (e) => { e.preventDefault(); // Marca todos os campos como tocados const allTouched = Object.keys(validationRules).reduce( (acc, key) => ({ ...acc, [key]: true }), {} ); setTouched(allTouched); if (validateForm()) { onSubmit(values); } }; }, [validateForm, validationRules, values]); const isValid = useMemo(() => { return Object.keys(errors).every(key => !errors[key]); }, [errors]); const reset = useCallback(() => { setValues(initialValues); setErrors({}); setTouched({}); }, [initialValues]); return { values, errors, touched, handleChange, handleBlur, handleSubmit, isValid, reset, validateForm }; } // Exemplo de uso function SignupForm() { const validationRules = { email: [ (value) => !value ? 'Email é obrigatório' : null, (value) => !/\S+@\S+\.\S+/.test(value) ? 'Email inválido' : null, ], password: [ (value) => !value ? 'Senha é obrigatória' : null, (value) => value.length < 8 ? 'Senha deve ter pelo menos 8 caracteres' : null, ], confirmPassword: [ (value) => !value ? 'Por favor, confirme sua senha' : null, (value, allValues) => value !== allValues.password ? 'Senhas não coincidem' : null, ], }; const { values, errors, handleChange, handleBlur, handleSubmit, isValid } = useFormValidation( { email: '', password: '', confirmPassword: '' }, validationRules ); return ( ); } ``` Este hook avançado de formulário manipula regras de validação, toque de campos, validação em tempo real e envio de formulário - tudo reutilizável em qualquer formulário da aplicação. ## Custom Hooks com TypeScript Para usuários de TypeScript, aqui está como tornar seus hooks type-safe: ```typescript // types.ts interface AsyncState { loading: boolean; error: Error | null; data: T | null; } interface ApiCallOptions { enableCache?: boolean; retries?: number; retryDelay?: number; } interface ValidationRule { (value: any, allValues: T): string | null; } interface FormValidationHook { values: T; errors: Partial>; touched: Partial>; handleChange: (name: keyof T, value: any) => void; handleBlur: (name: keyof T) => void; handleSubmit: (onSubmit: (values: T) => void) => (e: React.FormEvent) => void; isValid: boolean; reset: () => void; validateForm: () => boolean; } // Hooks tipados function useAsync( asyncFunction: () => Promise, dependencies: React.DependencyList = [] ): AsyncState { // Implementação igual ao anterior, mas com tipagem adequada } function useApiCall( url: string, options: ApiCallOptions = {} ): AsyncState & { refetch: () => void } { // Implementação com tipagem adequada } function useFormValidation>( initialValues: T, validationRules: Partial[]>> ): FormValidationHook { // Implementação com segurança de tipos completa } // Uso com TypeScript interface User { id: number; name: string; email: string; } function UserProfile({ userId }: { userId: number }) { const { loading, error, data: user } = useApiCall(`/api/users/${userId}`); // TypeScript sabe que user é User | null return (

{user &&

{user.name}

}

); } ``` ## Padrões Avançados e Melhores Práticas ### 1. Composição de Hooks Construam hooks complexos combinando hooks mais simples: ```javascript // Combinam múltiplos hooks para gerenciamento completo de dados function useUserWithPosts(userId) { const { data: user, loading: userLoading } = useApiCall(`/api/users/${userId}`); const { data: posts, loading: postsLoading } = useApiCall( user ? `/api/users/${userId}/posts` : null ); return { user, posts, loading: userLoading || postsLoading }; } ``` ### 2. Memoização para Performance Usem useMemo e useCallback para otimizar seus hooks: ```javascript function useExpensiveCalculation(data, options) { const result = useMemo(() => { if (!data) return null; return performExpensiveCalculation(data, options); }, [data, options]); const recalculate = useCallback(() => { // Lógica para forçar recálculo }, [data]); return { result, recalculate }; } ``` ### 3. Integração com Error Boundaries Façam seus hooks funcionarem bem com error boundaries: ```javascript function useAsyncWithErrorBoundary(asyncFunction, dependencies) { const [error, setError] = useState(null); useEffect(() => { if (error) { throw error; // Isso será capturado pelo error boundary } }, [error]); const { loading, data } = useAsync( async () => { try { return await asyncFunction(); } catch (err) { setError(err); throw err; } }, dependencies ); return { loading, data }; } ``` ### 4. Integração com Context Combinem hooks com context para gerenciamento de estado global: ```javascript const ThemeContext = createContext(); function useTheme() { const context = useContext(ThemeContext); if (!context) { throw new Error('useTheme deve ser usado dentro de ThemeProvider'); } return context; } function useThemeWithPreferences() { const { theme, setTheme } = useTheme(); const [savedTheme, setSavedTheme] = useLocalStorage('theme', theme); useEffect(() => { if (savedTheme !== theme) { setTheme(savedTheme); } }, [savedTheme, theme, setTheme]); const updateTheme = useCallback((newTheme) => { setTheme(newTheme); setSavedTheme(newTheme); }, [setTheme, setSavedTheme]); return { theme, updateTheme }; } ``` ## Armadilhas Comuns para Evitar ### 1. Quebrar as Regras dos Hooks ```javascript // ❌ Não façam isso - chamadas condicionais de hooks function BadHook(shouldFetch) { if (shouldFetch) { const { data } = useApiCall('/api/data'); // Isso quebra as regras dos hooks return data; } return null; } // ✅ Façam isso - lógica condicional dentro dos hooks function GoodHook(shouldFetch) { const { data } = useApiCall(shouldFetch ? '/api/data' : null); return shouldFetch ? data : null; } ``` ### 2. Dependências Ausentes no useEffect ```javascript // ❌ Problema - dependências faltando function useUserData(userId) { const [userData, setUserData] = useState(null); useEffect(() => { fetchUser(userId).then(setUserData); }, []); // Faltando dependência userId! return userData; } // ✅ Solução - incluir todas as dependências function useUserData(userId) { const [userData, setUserData] = useState(null); useEffect(() => { if (!userId) return; fetchUser(userId).then(setUserData); }, [userId]); // Incluir userId return userData; } ``` ### 3. Criar Novos Objetos/Funções a Cada Render ```javascript // ❌ Evitem esse padrão - cria novos objetos a cada render function useApiConfig(baseUrl, token) { return { headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, baseURL: baseUrl }; } // ✅ Abordagem preferida - memoizar a configuração function useApiConfig(baseUrl, token) { return useMemo(() => ({ headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' }, baseURL: baseUrl }), [baseUrl, token]); } ``` ## Quando NÃO Usar Custom Hooks Não usem Custom Hooks quando: - A lógica só aparece em um componente e é improvável de ser reutilizada - Uma função utilitária simples funcionaria igualmente bem (sem estado ou efeitos) - Vocês estão apenas envolvendo um único hook sem lógica adicional ```javascript // ❌ Exagero para cenários simples function useCounter() { const [count, setCount] = useState(0); return [count, setCount]; } // ✅ Solução simples é melhor - usem useState diretamente function Counter() { const [count, setCount] = useState(0); return ; } ``` ## Custom Hooks vs Soluções Alternativas **Custom Hooks são ótimos para:** - Lógica stateful que precisa ser reutilizada entre componentes - Padrões complexos envolvendo múltiplos hooks do React - Encapsular efeitos colaterais com cleanup - Criar APIs reutilizáveis para padrões comuns **Considerem alternativas quando precisarem de:** - Cálculos simples → Funções utilitárias regulares - Gerenciamento de estado global → Context + useReducer ou Redux - Encapsulamento de lógica de componente → Higher-order components ou render props - Compartilhamento simples de estado → Prop drilling ou Context ## Conclusão Custom Hooks são uma ferramenta poderosa que pode transformar código React repetitivo e bagunçado em padrões limpos e reutilizáveis. Eles trazem os benefícios da composição de funções para a lógica stateful do React, tornando suas aplicações mais maintíveis e sua experiência de desenvolvimento mais prazerosa. **Principais aprendizados:** - Custom Hooks eliminam duplicação de código empacotando lógica stateful em funções reutilizáveis - Sempre comecem nomes de Custom Hooks com "use" para seguir as convenções do React - Combinem múltiplos hooks para criar comportamentos poderosos e complexos - Usem TypeScript para melhor experiência de desenvolvimento e segurança de tipos - Evitem armadilhas comuns como chamadas condicionais de hooks e dependências faltando Da próxima vez que se pegarem copiando e colando a mesma combinação de `useState` e `useEffect`, lembrem dos Custom Hooks. Seu eu futuro (e seus colegas de equipe) vão agradecer pela base de código mais limpa e maintível. Já usaram Custom Hooks em seus projetos? Que padrões acharam mais úteis? Compartilhem suas experiências nos comentários! --- *Se isso ajudou vocês a evoluírem suas habilidades em React, sigam para mais padrões e melhores práticas do React! 🚀* ## Recursos - [Documentação de Custom Hooks do React](https://react.dev/learn/reusing-logic-with-custom-hooks) - [Regras dos Hooks do React](https://react.dev/reference/rules/rules-of-hooks) - [TypeScript com React Hooks](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/hooks) - [Coleção Awesome React Hooks](https://github.com/rehooks/awesome-react-hooks)

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

Guia de Custom Hooks Que Vai Acabar Com a Repetição de Código