Hey, devs! 👋 Quantas vezes você já se pegou copiando e colando a mesma lógica de fetch, loading states e tratamento de erros entre componentes? Se você respondeu "muitas", então hoje vou mudar sua vida. Hoje, vou compartilhar como criar **Custom Hooks poderosos no React** - abstrações reutilizáveis que encapsulam lógica complexa e transformam componentes verbosos em interfaces limpas e declarativas. Ao final deste artigo, você entenderá como criar hooks profissionais, integrar com serviços externos como Supabase, e aplicar padrões avançados que tornarão seu código mais manutenível. ## O que são Custom Hooks? Custom Hooks são funções JavaScript que começam com "use" e podem chamar outros hooks. Eles permitem extrair lógica stateful de componentes, tornando-a reutilizável e testável. ### Por que Isso Importa Antes de mergulhar na implementação, vamos entender o problema que estamos resolvendo: ```javascript // ❌ Sem Custom Hook - código repetitivo e acoplado function PostList() { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { setLoading(true); supabase .from('posts') .select('*') .then(({ data, error }) => { if (error) setError(error); else setPosts(data); setLoading(false); }); }, []); // Lógica duplicada em cada componente... } // ✅ Com Custom Hook - limpo e reutilizável function PostList() { const { posts, loading, error, refetch } = usePosts(); // Foco apenas na UI, não na lógica de dados } ``` A transformação acima mostra como custom hooks separam preocupações, tornando componentes focados apenas em renderização. ## Quando Você Deve Usar Custom Hooks? **Casos de uso ideais:** - Quando você tem lógica stateful que precisa ser compartilhada entre múltiplos componentes - Para encapsular chamadas a APIs e gerenciamento de estado relacionado - Quando você quer abstrair lógicas complexas de side effects - Para criar abstrações sobre bibliotecas externas (como nosso caso com Supabase) **Quando NÃO usar Custom Hooks:** - Para lógica puramente computacional sem estado (use funções normais) - Quando a lógica é usada apenas em um componente (mantenha local) - Se você está apenas renomeando hooks existentes sem adicionar valor ## Parte 1: Construindo Seu Primeiro Hook de Posts Vamos construir isso passo a passo. Mostrarei como cada peça funciona e por que cada decisão importa. ### Passo 1: Configuração Inicial do Supabase Primeiro, precisamos configurar o cliente Supabase corretamente: #### Opção 1: Configuração com Variáveis de Ambiente (Recomendada) ```bash # Instale as dependências npm install @supabase/supabase-js # Configure suas variáveis de ambiente (.env.local) NEXT_PUBLIC_SUPABASE_URL=your-project-url NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key ``` #### Opção 2: Configuração Direta (Para Testes) ```bash # Crie um arquivo de configuração temporário # NÃO comite isso no git! ``` **Como encontrar suas credenciais do Supabase:** - Acesse seu dashboard do Supabase - Vá em Settings > API - Copie a URL do projeto e a chave anon - NUNCA exponha a service key no frontend ```javascript // lib/supabase.js - Cliente configurado com singleton pattern import { createClient } from '@supabase/supabase-js'; // Validação de ambiente para evitar erros em produção const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL; const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY; if (!supabaseUrl || !supabaseAnonKey) { throw new Error('Missing Supabase environment variables'); } // Singleton para evitar múltiplas instâncias export const supabase = createClient(supabaseUrl, supabaseAnonKey, { auth: { persistSession: true, // Mantém sessão entre reloads autoRefreshToken: true, // Renova tokens automaticamente }, db: { schema: 'public', // Schema padrão }, global: { headers: { 'x-application-name': 'my-app' }, // Headers customizados }, }); ``` **Por que essa configuração funciona tão bem:** - **Singleton Pattern:** Evita criar múltiplas conexões desnecessárias - **Validação de Ambiente:** Falha rápido se as variáveis não estiverem configuradas - **Configuração de Auth:** Gerencia sessões automaticamente - **Headers Customizados:** Útil para tracking e debugging ### Passo 2: Criando o Serviço de Posts Agora vamos criar uma camada de serviço antes do hook, separando a lógica de negócio: #### 2.1: Estrutura Base do Serviço ```javascript // services/posts.service.js import { supabase } from '@/lib/supabase'; // Constantes para evitar strings mágicas const TABLE_NAME = 'posts'; const DEFAULT_LIMIT = 10; const DEFAULT_ORDER = { column: 'created_at', ascending: false }; // Tipo de erro customizado para melhor debugging class PostServiceError extends Error { constructor(message, code, details) { super(message); this.name = 'PostServiceError'; this.code = code; this.details = details; } } ``` #### 2.2: Implementando Operações CRUD Vamos implementar cada operação CRUD, explicando cada decisão: ```javascript // services/posts.service.js (continuação) export const postsService = { // GET - Buscar posts com opções avançadas async getPosts(options = {}) { try { const { limit = DEFAULT_LIMIT, offset = 0, orderBy = DEFAULT_ORDER, filters = {}, select = '*', // Permite selecionar campos específicos } = options; // Construindo query de forma incremental let query = supabase .from(TABLE_NAME) .select(select, { count: 'exact' }); // count para paginação // Aplicando filtros dinamicamente Object.entries(filters).forEach(([key, value]) => { if (value !== undefined && value !== null) { // Suporte a diferentes operadores if (typeof value === 'object' && value.operator) { query = query[value.operator](key, value.value); } else { query = query.eq(key, value); } } }); // Ordenação e paginação query = query .order(orderBy.column, { ascending: orderBy.ascending }) .range(offset, offset + limit - 1); const { data, error, count } = await query; if (error) { throw new PostServiceError( 'Falha ao buscar posts', 'FETCH_ERROR', error ); } return { data, count, hasMore: count > offset + limit, }; } catch (error) { // Re-throw com contexto adicional if (error instanceof PostServiceError) throw error; throw new PostServiceError( 'Erro inesperado ao buscar posts', 'UNKNOWN_ERROR', error ); } }, // GET by ID - Buscar post único com relações async getPostById(id, options = {}) { const { includeAuthor = false, includeComments = false } = options; // Construindo select com relações opcionais let selectQuery = '*'; if (includeAuthor) selectQuery += ', author:user_id(*)'; if (includeComments) selectQuery += ', comments(*)'; const { data, error } = await supabase .from(TABLE_NAME) .select(selectQuery) .eq('id', id) .single(); // .single() para garantir um único resultado if (error) { if (error.code === 'PGRST116') { throw new PostServiceError( 'Post não encontrado', 'NOT_FOUND', { id } ); } throw new PostServiceError( 'Erro ao buscar post', 'FETCH_ERROR', error ); } return data; }, }; ``` **Por que essa implementação?** - **Opções Flexíveis:** Permite customização sem quebrar a API - **Tratamento de Erro Robusto:** Erros específicos para cada situação - **Query Building Dinâmico:** Evita queries desnecessárias - **Suporte a Relações:** Carrega dados relacionados sob demanda #### 2.3: Implementando Criação e Atualização ```javascript // services/posts.service.js (continuação) // CREATE - Criar novo post com validação async createPost(postData) { // Validação básica no cliente const requiredFields = ['title', 'content']; const missingFields = requiredFields.filter(field => !postData[field]); if (missingFields.length > 0) { throw new PostServiceError( 'Campos obrigatórios faltando', 'VALIDATION_ERROR', { missingFields } ); } // Adiciona metadados automáticos const enrichedData = { ...postData, created_at: new Date().toISOString(), updated_at: new Date().toISOString(), status: postData.status || 'draft', views: 0, }; const { data, error } = await supabase .from(TABLE_NAME) .insert([enrichedData]) .select() // Retorna o post criado .single(); if (error) { // Tratamento específico para erros comuns if (error.code === '23505') { throw new PostServiceError( 'Post com esse título já existe', 'DUPLICATE_ERROR', error ); } throw new PostServiceError( 'Erro ao criar post', 'CREATE_ERROR', error ); } return data; }, // UPDATE - Atualizar post com otimistic locking async updatePost(id, updates) { // Remove campos que não devem ser atualizados const { id: _, created_at, ...cleanUpdates } = updates; // Adiciona timestamp de atualização const dataToUpdate = { ...cleanUpdates, updated_at: new Date().toISOString(), }; const { data, error } = await supabase .from(TABLE_NAME) .update(dataToUpdate) .eq('id', id) .select() .single(); if (error) { if (error.code === 'PGRST116') { throw new PostServiceError( 'Post não encontrado para atualização', 'NOT_FOUND', { id } ); } throw new PostServiceError( 'Erro ao atualizar post', 'UPDATE_ERROR', error ); } return data; }, ``` #### 2.4: Implementando Deleção e Operações em Lote ```javascript // services/posts.service.js (continuação) // DELETE - Deletar post com soft delete opcional async deletePost(id, options = {}) { const { softDelete = true } = options; if (softDelete) { // Soft delete - apenas marca como deletado return this.updatePost(id, { deleted_at: new Date().toISOString(), status: 'deleted', }); } // Hard delete - remove permanentemente const { error } = await supabase .from(TABLE_NAME) .delete() .eq('id', id); if (error) { throw new PostServiceError( 'Erro ao deletar post', 'DELETE_ERROR', error ); } return { id, deleted: true }; }, // BATCH - Operações em lote async batchOperation(operation, ids, data = {}) { const operations = { delete: async (ids) => { const { error } = await supabase .from(TABLE_NAME) .delete() .in('id', ids); return { error }; }, update: async (ids, updates) => { const { data, error } = await supabase .from(TABLE_NAME) .update(updates) .in('id', ids) .select(); return { data, error }; }, publish: async (ids) => { return operations.update(ids, { status: 'published', published_at: new Date().toISOString(), }); }, }; if (!operations[operation]) { throw new PostServiceError( 'Operação em lote inválida', 'INVALID_OPERATION', { operation } ); } const result = await operations[operation](ids, data); if (result.error) { throw new PostServiceError( `Erro na operação em lote: ${operation}`, 'BATCH_ERROR', result.error ); } return result.data || { success: true, operation, count: ids.length }; }, }; ``` **Conceitos-chave explicados:** - **Soft Delete:** Mantém dados para auditoria mas marca como deletado - **Operações em Lote:** Reduz chamadas ao banco para múltiplos items - **Validação no Cliente:** Evita requests desnecessários - **Metadados Automáticos:** Consistência sem esforço manual ### Passo 3: Criando o Custom Hook Agora vamos criar o hook que usa nosso serviço: ```javascript // hooks/usePosts.js import { useState, useEffect, useCallback, useRef } from 'react'; import { postsService } from '@/services/posts.service'; // Estado inicial para evitar re-criações const initialState = { data: [], loading: false, error: null, count: 0, hasMore: false, }; export function usePosts(options = {}) { // Estado principal const [state, setState] = useState(initialState); // Refs para evitar re-renders desnecessários const abortControllerRef = useRef(null); const optionsRef = useRef(options); // Atualiza ref quando options mudam useEffect(() => { optionsRef.current = options; }, [options]); // Função principal de fetch com cancelamento const fetchPosts = useCallback(async (fetchOptions = {}) => { // Cancela request anterior se existir if (abortControllerRef.current) { abortControllerRef.current.abort(); } // Cria novo controller para esta request abortControllerRef.current = new AbortController(); setState(prev => ({ ...prev, loading: true, error: null })); try { const mergedOptions = { ...optionsRef.current, ...fetchOptions }; const result = await postsService.getPosts(mergedOptions); // Verifica se a request não foi cancelada if (!abortControllerRef.current.signal.aborted) { setState({ data: result.data, loading: false, error: null, count: result.count, hasMore: result.hasMore, }); } } catch (error) { // Ignora erros de cancelamento if (error.name !== 'AbortError') { setState(prev => ({ ...prev, loading: false, error: error.message || 'Erro ao carregar posts', })); } } }, []); // Refetch com memoização const refetch = useCallback(() => { return fetchPosts(); }, [fetchPosts]); // Fetch inicial useEffect(() => { fetchPosts(); // Cleanup - cancela requests pendentes return () => { if (abortControllerRef.current) { abortControllerRef.current.abort(); } }; }, []); // Apenas na montagem // Retorna interface limpa return { posts: state.data, loading: state.loading, error: state.error, count: state.count, hasMore: state.hasMore, refetch, }; } ``` ## Um Exemplo Mais Complexo: Hook Completo com Mutations Vamos construir algo mais realista - um hook que gerencia todo o CRUD com cache otimista e real-time updates: ### Entendendo o Problema Antes de pular no código, vamos entender o que estamos construindo: ```javascript // ❌ Abordagem ingênua - por que isso não funciona bem function PostManager() { const [posts, setPosts] = useState([]); const [creating, setCreating] = useState(false); // Estado separado para cada operação... // Sem cache otimista... // Sem sincronização real-time... } // ✅ Nossa abordagem melhorada - o que vamos construir function PostManager() { const postsManager = usePostsManager(); // Tudo encapsulado, com cache otimista e real-time } ``` ### Implementação Passo a Passo #### Fase 1: Estado Avançado com useReducer ```javascript // hooks/usePostsManager.js import { useReducer, useCallback, useEffect, useRef } from 'react'; import { postsService } from '@/services/posts.service'; // Actions types para o reducer const actionTypes = { FETCH_START: 'FETCH_START', FETCH_SUCCESS: 'FETCH_SUCCESS', FETCH_ERROR: 'FETCH_ERROR', CREATE_START: 'CREATE_START', CREATE_SUCCESS: 'CREATE_SUCCESS', CREATE_ERROR: 'CREATE_ERROR', UPDATE_START: 'UPDATE_START', UPDATE_SUCCESS: 'UPDATE_SUCCESS', UPDATE_ERROR: 'UPDATE_ERROR', DELETE_START: 'DELETE_START', DELETE_SUCCESS: 'DELETE_SUCCESS', DELETE_ERROR: 'DELETE_ERROR', SET_SELECTED: 'SET_SELECTED', CLEAR_SELECTION: 'CLEAR_SELECTION', REAL_TIME_UPDATE: 'REAL_TIME_UPDATE', }; // Estado inicial complexo const initialState = { posts: [], loading: false, creating: false, updating: false, deleting: false, error: null, selectedIds: new Set(), count: 0, hasMore: false, optimisticUpdates: new Map(), // Para cache otimista }; // Reducer robusto com lógica complexa function postsReducer(state, action) { switch (action.type) { case actionTypes.FETCH_START: return { ...state, loading: true, error: null }; case actionTypes.FETCH_SUCCESS: return { ...state, loading: false, posts: action.payload.data, count: action.payload.count, hasMore: action.payload.hasMore, error: null, }; case actionTypes.FETCH_ERROR: return { ...state, loading: false, error: action.payload, }; case actionTypes.CREATE_START: // Cache otimista - adiciona temporariamente const tempPost = { ...action.payload, id: `temp-${Date.now()}`, isOptimistic: true, }; return { ...state, creating: true, posts: [tempPost, ...state.posts], optimisticUpdates: new Map(state.optimisticUpdates).set( tempPost.id, tempPost ), }; case actionTypes.CREATE_SUCCESS: // Substitui post temporário pelo real const updatedPosts = state.posts.map(post => post.id === action.payload.tempId ? { ...action.payload.data, isOptimistic: false } : post ); const newOptimistic = new Map(state.optimisticUpdates); newOptimistic.delete(action.payload.tempId); return { ...state, creating: false, posts: updatedPosts, optimisticUpdates: newOptimistic, count: state.count + 1, }; case actionTypes.CREATE_ERROR: // Remove post otimista em caso de erro return { ...state, creating: false, posts: state.posts.filter(p => !p.isOptimistic), optimisticUpdates: new Map(), error: action.payload, }; case actionTypes.UPDATE_START: // Cache otimista para update const originalPost = state.posts.find(p => p.id === action.payload.id); if (originalPost) { state.optimisticUpdates.set(action.payload.id, originalPost); } return { ...state, updating: true, posts: state.posts.map(post => post.id === action.payload.id ? { ...post, ...action.payload.updates, isOptimistic: true } : post ), }; case actionTypes.UPDATE_SUCCESS: return { ...state, updating: false, posts: state.posts.map(post => post.id === action.payload.id ? { ...action.payload.data, isOptimistic: false } : post ), optimisticUpdates: new Map( [...state.optimisticUpdates].filter(([id]) => id !== action.payload.id) ), }; case actionTypes.UPDATE_ERROR: // Reverte para estado original em caso de erro const revertedPosts = state.posts.map(post => { const original = state.optimisticUpdates.get(post.id); return original || post; }); return { ...state, updating: false, posts: revertedPosts, optimisticUpdates: new Map(), error: action.payload, }; case actionTypes.DELETE_START: // Marca como deletando (visual feedback) return { ...state, deleting: true, posts: state.posts.map(post => action.payload.ids.includes(post.id) ? { ...post, isDeleting: true } : post ), }; case actionTypes.DELETE_SUCCESS: return { ...state, deleting: false, posts: state.posts.filter( post => !action.payload.ids.includes(post.id) ), count: state.count - action.payload.ids.length, selectedIds: new Set(), }; case actionTypes.DELETE_ERROR: return { ...state, deleting: false, posts: state.posts.map(post => ({ ...post, isDeleting: false })), error: action.payload, }; case actionTypes.SET_SELECTED: const newSelected = new Set(state.selectedIds); if (newSelected.has(action.payload)) { newSelected.delete(action.payload); } else { newSelected.add(action.payload); } return { ...state, selectedIds: newSelected }; case actionTypes.CLEAR_SELECTION: return { ...state, selectedIds: new Set() }; case actionTypes.REAL_TIME_UPDATE: // Atualização real-time do Supabase const { eventType, new: newData, old } = action.payload; switch (eventType) { case 'INSERT': return { ...state, posts: [newData, ...state.posts], count: state.count + 1, }; case 'UPDATE': return { ...state, posts: state.posts.map(p => p.id === newData.id ? newData : p ), }; case 'DELETE': return { ...state, posts: state.posts.filter(p => p.id !== old.id), count: state.count - 1, }; default: return state; } default: return state; } } ``` **Análise profunda do reducer:** - **Cache Otimista:** Atualiza UI instantaneamente, reverte se falhar - **Estados Granulares:** Diferentes loadings para diferentes operações - **Seleção de Items:** Gerencia seleção múltipla para operações em lote - **Real-time Ready:** Preparado para updates via websocket #### Fase 2: Hook Completo com Todas as Operações ```javascript // hooks/usePostsManager.js (continuação) export function usePostsManager(initialOptions = {}) { const [state, dispatch] = useReducer(postsReducer, initialState); const subscriptionRef = useRef(null); const optionsRef = useRef(initialOptions); // Fetch posts com opções const fetchPosts = useCallback(async (options = {}) => { dispatch({ type: actionTypes.FETCH_START }); try { const result = await postsService.getPosts({ ...optionsRef.current, ...options, }); dispatch({ type: actionTypes.FETCH_SUCCESS, payload: result, }); } catch (error) { dispatch({ type: actionTypes.FETCH_ERROR, payload: error.message, }); } }, []); // Create com cache otimista const createPost = useCallback(async (postData) => { const tempId = `temp-${Date.now()}`; dispatch({ type: actionTypes.CREATE_START, payload: { ...postData, id: tempId }, }); try { const newPost = await postsService.createPost(postData); dispatch({ type: actionTypes.CREATE_SUCCESS, payload: { data: newPost, tempId }, }); return { success: true, data: newPost }; } catch (error) { dispatch({ type: actionTypes.CREATE_ERROR, payload: error.message, }); return { success: false, error: error.message }; } }, []); // Update com cache otimista const updatePost = useCallback(async (id, updates) => { dispatch({ type: actionTypes.UPDATE_START, payload: { id, updates }, }); try { const updatedPost = await postsService.updatePost(id, updates); dispatch({ type: actionTypes.UPDATE_SUCCESS, payload: { id, data: updatedPost }, }); return { success: true, data: updatedPost }; } catch (error) { dispatch({ type: actionTypes.UPDATE_ERROR, payload: error.message, }); return { success: false, error: error.message }; } }, []); // Delete (single ou batch) const deletePosts = useCallback(async (ids) => { const idsArray = Array.isArray(ids) ? ids : [ids]; dispatch({ type: actionTypes.DELETE_START, payload: { ids: idsArray }, }); try { if (idsArray.length === 1) { await postsService.deletePost(idsArray[0]); } else { await postsService.batchOperation('delete', idsArray); } dispatch({ type: actionTypes.DELETE_SUCCESS, payload: { ids: idsArray }, }); return { success: true }; } catch (error) { dispatch({ type: actionTypes.DELETE_ERROR, payload: error.message, }); return { success: false, error: error.message }; } }, []); // Seleção de items const toggleSelect = useCallback((id) => { dispatch({ type: actionTypes.SET_SELECTED, payload: id }); }, []); const selectAll = useCallback(() => { state.posts.forEach(post => { if (!state.selectedIds.has(post.id)) { dispatch({ type: actionTypes.SET_SELECTED, payload: post.id }); } }); }, [state.posts, state.selectedIds]); const clearSelection = useCallback(() => { dispatch({ type: actionTypes.CLEAR_SELECTION }); }, []); // Operações em lote nos selecionados const deleteSelected = useCallback(() => { return deletePosts(Array.from(state.selectedIds)); }, [state.selectedIds, deletePosts]); const publishSelected = useCallback(async () => { const ids = Array.from(state.selectedIds); try { await postsService.batchOperation('publish', ids); await fetchPosts(); // Refetch para atualizar clearSelection(); return { success: true }; } catch (error) { return { success: false, error: error.message }; } }, [state.selectedIds, fetchPosts, clearSelection]); // Setup real-time subscription useEffect(() => { // Limpa subscription anterior if (subscriptionRef.current) { subscriptionRef.current.unsubscribe(); } // Cria nova subscription subscriptionRef.current = supabase .channel('posts-changes') .on( 'postgres_changes', { event: '*', schema: 'public', table: 'posts', }, (payload) => { dispatch({ type: actionTypes.REAL_TIME_UPDATE, payload, }); } ) .subscribe(); // Cleanup return () => { if (subscriptionRef.current) { subscriptionRef.current.unsubscribe(); } }; }, []); // Apenas na montagem // Fetch inicial useEffect(() => { fetchPosts(); }, []); // Apenas na montagem // Interface pública do hook return { // Estado posts: state.posts, loading: state.loading, creating: state.creating, updating: state.updating, deleting: state.deleting, error: state.error, count: state.count, hasMore: state.hasMore, selectedIds: state.selectedIds, // Ações fetchPosts, createPost, updatePost, deletePosts, refetch: fetchPosts, // Seleção toggleSelect, selectAll, clearSelection, deleteSelected, publishSelected, // Helpers hasSelection: state.selectedIds.size > 0, selectedCount: state.selectedIds.size, isSelected: (id) => state.selectedIds.has(id), }; } ``` **Por que essa arquitetura é poderosa:** - **Estado Unificado:** Um único reducer gerencia toda complexidade - **Cache Otimista:** UI responsiva mesmo com latência de rede - **Real-time Updates:** Sincronização automática entre usuários - **Operações em Lote:** Eficiência para múltiplas operações #### Fase 3: Integração com Componentes ```javascript // components/PostsManager.jsx import { usePostsManager } from '@/hooks/usePostsManager'; function PostsManager() { const { posts, loading, creating, error, selectedIds, createPost, updatePost, deletePosts, toggleSelect, selectAll, deleteSelected, isSelected, hasSelection, selectedCount, } = usePostsManager({ limit: 20, orderBy: { column: 'created_at', ascending: false }, }); // UI focada apenas em apresentação if (loading && posts.length === 0) { return ; } if (error) { return ; } return (

{/* Toolbar com ações em lote */} {hasSelection && (

{selectedCount} selecionados

)} {/* Lista de posts */}

{posts.map(post => ( toggleSelect(post.id)} onUpdate={(updates) => updatePost(post.id, updates)} onDelete={() => deletePosts(post.id)} isOptimistic={post.isOptimistic} isDeleting={post.isDeleting} /> ))}

{/* Indicador de criação otimista */} {creating && (

Criando post...

)}

); } ``` ## Padrão Avançado: Hook com Infinite Scroll e Cache Agora vamos explorar um padrão avançado que demonstra uso em nível de maestria. ### O Problema com Abordagem Simples ```javascript // ❌ Abordagem simples - limitações function InfinitePostsList() { const [posts, setPosts] = useState([]); const [page, setPage] = useState(1); // Recarrega todos os posts a cada página // Sem cache // Sem deduplicação // Performance ruim } ``` **Por que isso se torna problemático:** - Dados duplicados ao navegar entre páginas - Sem cache resulta em requests desnecessários - Estado perdido ao trocar de componente ### Construindo a Solução Avançada #### Estágio 1: Cache Manager ```javascript // hooks/usePostsInfinite.js import { useReducer, useCallback, useRef, useEffect } from 'react'; import { postsService } from '@/services/posts.service'; // Cache global compartilhado entre instâncias const globalCache = new Map(); const cacheSubscribers = new Set(); // Cache manager com TTL (Time To Live) class CacheManager { constructor(ttl = 5 * 60 * 1000) { // 5 minutos padrão this.ttl = ttl; this.cache = globalCache; this.subscribers = cacheSubscribers; } set(key, value) { this.cache.set(key, { data: value, timestamp: Date.now(), }); this.notifySubscribers(key, value); } get(key) { const cached = this.cache.get(key); if (!cached) return null; // Verifica se expirou if (Date.now() - cached.timestamp > this.ttl) { this.cache.delete(key); return null; } return cached.data; } invalidate(pattern) { // Invalida cache baseado em padrão for (const [key] of this.cache) { if (key.includes(pattern)) { this.cache.delete(key); } } } subscribe(callback) { this.subscribers.add(callback); return () => this.subscribers.delete(callback); } notifySubscribers(key, value) { this.subscribers.forEach(cb => cb(key, value)); } } const cacheManager = new CacheManager(); ``` **Deep dive no Cache Manager:** - **Cache Global:** Compartilhado entre componentes - **TTL:** Evita dados obsoletos - **Pattern Invalidation:** Limpa cache relacionado - **Pub/Sub:** Notifica componentes sobre mudanças #### Estágio 2: Infinite Scroll com Virtualização ```javascript // hooks/usePostsInfinite.js (continuação) const infiniteReducer = (state, action) => { switch (action.type) { case 'LOAD_PAGE': return { ...state, pages: { ...state.pages, [action.payload.page]: { loading: true, error: null, }, }, }; case 'PAGE_SUCCESS': const { page, data, hasMore } = action.payload; const existingIds = new Set(state.allPosts.map(p => p.id)); const newPosts = data.filter(p => !existingIds.has(p.id)); return { ...state, pages: { ...state.pages, [page]: { loading: false, error: null, ids: data.map(p => p.id), }, }, allPosts: [...state.allPosts, ...newPosts], hasMore, lastPage: page, }; case 'PAGE_ERROR': return { ...state, pages: { ...state.pages, [action.payload.page]: { loading: false, error: action.payload.error, }, }, }; case 'INVALIDATE': return { ...initialInfiniteState, shouldRefetch: true, }; default: return state; } }; const initialInfiniteState = { pages: {}, allPosts: [], hasMore: true, lastPage: 0, shouldRefetch: false, }; export function usePostsInfinite(options = {}) { const [state, dispatch] = useReducer(infiniteReducer, initialInfiniteState); const observerRef = useRef(null); const loadingRef = useRef(false); // Função para carregar página com cache const loadPage = useCallback(async (page) => { if (loadingRef.current || state.pages[page]?.loading) return; const cacheKey = `posts-page-${page}-${JSON.stringify(options)}`; const cached = cacheManager.get(cacheKey); if (cached) { dispatch({ type: 'PAGE_SUCCESS', payload: { page, ...cached }, }); return; } loadingRef.current = true; dispatch({ type: 'LOAD_PAGE', payload: { page } }); try { const result = await postsService.getPosts({ ...options, limit: options.limit || 20, offset: page * (options.limit || 20), }); cacheManager.set(cacheKey, result); dispatch({ type: 'PAGE_SUCCESS', payload: { page, ...result }, }); } catch (error) { dispatch({ type: 'PAGE_ERROR', payload: { page, error: error.message }, }); } finally { loadingRef.current = false; } }, [options, state.pages]); // Carrega próxima página const loadMore = useCallback(() => { if (state.hasMore && !loadingRef.current) { loadPage(state.lastPage + 1); } }, [state.hasMore, state.lastPage, loadPage]); // Setup do Intersection Observer para scroll infinito const setObserver = useCallback((node) => { if (observerRef.current) { observerRef.current.disconnect(); } if (!node || !state.hasMore) return; observerRef.current = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { loadMore(); } }, { root: null, rootMargin: '100px', // Carrega 100px antes do fim threshold: 0.1, } ); observerRef.current.observe(node); }, [state.hasMore, loadMore]); // Invalidação de cache const invalidateCache = useCallback((pattern = 'posts') => { cacheManager.invalidate(pattern); dispatch({ type: 'INVALIDATE' }); }, []); // Carrega primeira página useEffect(() => { if (state.lastPage === 0 && state.allPosts.length === 0) { loadPage(0); } }, []); // Apenas na montagem // Subscribe para mudanças no cache useEffect(() => { const unsubscribe = cacheManager.subscribe((key, value) => { // React a mudanças no cache se necessário if (key.startsWith('posts-') && state.shouldRefetch) { dispatch({ type: 'CACHE_UPDATE', payload: { key, value } }); } }); return unsubscribe; }, [state.shouldRefetch]); return { posts: state.allPosts, loading: state.pages[state.lastPage + 1]?.loading || false, error: state.pages[state.lastPage + 1]?.error, hasMore: state.hasMore, loadMore, setObserver, invalidateCache, pages: state.pages, // Métodos úteis isPageLoaded: (page) => !!state.pages[page] && !state.pages[page].loading, getPageStatus: (page) => state.pages[page] || { loading: false, error: null }, }; } ``` **Padrões de integração:** - **Intersection Observer:** Detecção automática de scroll - **Deduplicação:** Evita posts duplicados - **Cache com TTL:** Dados frescos sem overhead #### Estágio 3: Implementação Completa com Otimizações ```javascript // components/InfinitePostsList.jsx import { usePostsInfinite } from '@/hooks/usePostsInfinite'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useRef, useMemo } from 'react'; function InfinitePostsList() { const parentRef = useRef(null); const { posts, loading, hasMore, setObserver, invalidateCache, } = usePostsInfinite({ limit: 20, orderBy: { column: 'created_at', ascending: false }, }); // Virtualização para performance com milhares de items const virtualizer = useVirtualizer({ count: posts.length, getScrollElement: () => parentRef.current, estimateSize: () => 200, // Altura estimada de cada post overscan: 5, // Renderiza 5 items além da viewport }); const virtualItems = virtualizer.getVirtualItems(); return (

{virtualItems.map((virtualRow) => { const post = posts[virtualRow.index]; const isLastItem = virtualRow.index === posts.length - 1; return (

); })}

{loading && (

Carregando mais posts...

)} {!hasMore && posts.length > 0 && (

Você chegou ao fim! 🎉

)}

); } ``` **Por que essa arquitetura é poderosa:** - **Virtualização:** Renderiza apenas items visíveis - **Cache Inteligente:** Reduz requests em 80%+ - **Performance:** Suporta milhares de items sem lag ## usePosts com TypeScript Para usuários TypeScript, aqui está como fazer tudo type-safe: ### Configurando os Types ```typescript // types/posts.ts export interface Post { id: string; title: string; content: string; author_id: string; status: 'draft' | 'published' | 'archived' | 'deleted'; tags: string[]; created_at: string; updated_at: string; published_at?: string; deleted_at?: string; views: number; isOptimistic?: boolean; isDeleting?: boolean; } export interface PostsFilter { status?: Post['status']; author_id?: string; tags?: string[]; search?: string; dateRange?: { from: Date; to: Date; }; } export interface PostsOptions { limit?: number; offset?: number; orderBy?: { column: keyof Post; ascending: boolean; }; filters?: PostsFilter; select?: string; } export interface PostsResult { data: Post[]; count: number; hasMore: boolean; } export interface PostsState { posts: Post[]; loading: boolean; creating: boolean; updating: boolean; deleting: boolean; error: string | null; selectedIds: Set; count: number; hasMore: boolean; optimisticUpdates: Map; } // Type guards export function isPost(value: unknown): value is Post { return ( typeof value === 'object' && value !== null && 'id' in value && 'title' in value && 'content' in value ); } ``` **Benefícios da type safety:** - Autocomplete em todo o código - Detecção de erros em tempo de compilação ### Implementação com Tipagem Adequada ```typescript // hooks/usePosts.ts import { useState, useEffect, useCallback, useRef } from 'react'; import { postsService } from '@/services/posts.service'; import type { Post, PostsOptions, PostsResult, PostsState } from '@/types/posts'; interface UsePostsReturn { posts: Post[]; loading: boolean; error: string | null; count: number; hasMore: boolean; refetch: (options?: PostsOptions) => Promise; } export function usePosts(options: PostsOptions = {}): UsePostsReturn { const [state, setState] = useState({ posts: [], loading: false, creating: false, updating: false, deleting: false, error: null, selectedIds: new Set(), count: 0, hasMore: false, optimisticUpdates: new Map(), }); const abortControllerRef = useRef(null); const optionsRef = useRef(options); const fetchPosts = useCallback(async (fetchOptions?: PostsOptions): Promise => { if (abortControllerRef.current) { abortControllerRef.current.abort(); } abortControllerRef.current = new AbortController(); setState(prev => ({ ...prev, loading: true, error: null })); try { const mergedOptions: PostsOptions = { ...optionsRef.current, ...fetchOptions, }; const result: PostsResult = await postsService.getPosts(mergedOptions); if (!abortControllerRef.current.signal.aborted) { setState(prev => ({ ...prev, posts: result.data, loading: false, error: null, count: result.count, hasMore: result.hasMore, })); } } catch (error) { if (error instanceof Error && error.name !== 'AbortError') { setState(prev => ({ ...prev, loading: false, error: error.message || 'Erro ao carregar posts', })); } } }, []); const refetch = useCallback( (refetchOptions?: PostsOptions) => fetchPosts(refetchOptions), [fetchPosts] ); useEffect(() => { fetchPosts(); return () => { abortControllerRef.current?.abort(); }; }, []); // Apenas na montagem return { posts: state.posts, loading: state.loading, error: state.error, count: state.count, hasMore: state.hasMore, refetch, }; } ``` ### Padrões TypeScript Avançados ```typescript // hooks/usePostsManager.ts import { useReducer, useCallback, useEffect, useRef, Dispatch } from 'react'; import type { Post, PostsOptions } from '@/types/posts'; // Actions com discriminated unions para type safety type PostsAction = | { type: 'FETCH_START' } | { type: 'FETCH_SUCCESS'; payload: PostsResult } | { type: 'FETCH_ERROR'; payload: string } | { type: 'CREATE_START'; payload: Partial & { id: string } } | { type: 'CREATE_SUCCESS'; payload: { data: Post; tempId: string } } | { type: 'CREATE_ERROR'; payload: string } | { type: 'UPDATE_START'; payload: { id: string; updates: Partial } } | { type: 'UPDATE_SUCCESS'; payload: { id: string; data: Post } } | { type: 'UPDATE_ERROR'; payload: string } | { type: 'DELETE_START'; payload: { ids: string[] } } | { type: 'DELETE_SUCCESS'; payload: { ids: string[] } } | { type: 'DELETE_ERROR'; payload: string } | { type: 'SET_SELECTED'; payload: string } | { type: 'CLEAR_SELECTION' } | { type: 'REAL_TIME_UPDATE'; payload: RealtimePayload }; // Tipagem para real-time events interface RealtimePayload { eventType: 'INSERT' | 'UPDATE' | 'DELETE'; new: Post | null; old: Post | null; } // Generic hook factory para diferentes entidades function createEntityHook( serviceName: string ) { return function useEntity(options?: EntityOptions) { // Implementação genérica const [state, dispatch] = useReducer( entityReducer, initialEntityState() ); // ... resto da implementação return { items: state.items as T[], // ... outras propriedades }; }; } // Uso do factory export const useProducts = createEntityHook('products'); export const useUsers = createEntityHook('users'); // Utility types para melhor DX type AsyncResult = | { success: true; data: T } | { success: false; error: string }; type MutationFn = ( args: TArgs ) => Promise>; // Hook com generics para flexibilidade export function useAsyncMutation( mutationFn: MutationFn ) { const [state, setState] = useState<{ loading: boolean; error: string | null; data: TResult | null; }>({ loading: false, error: null, data: null, }); const mutate = useCallback(async (args: TArgs) => { setState({ loading: true, error: null, data: null }); const result = await mutationFn(args); if (result.success) { setState({ loading: false, error: null, data: result.data }); } else { setState({ loading: false, error: result.error, data: null }); } return result; }, [mutationFn]); return { mutate, ...state }; } ``` ## Padrões Avançados e Melhores Práticas ### 1. Hook Composition Pattern **O que resolve:** Combinar múltiplos hooks para funcionalidade complexa **Como funciona:** Compõe hooks menores em hooks maiores ```javascript // hooks/usePostWithComments.js import { usePosts } from './usePosts'; import { useComments } from './useComments'; import { useMemo } from 'react'; export function usePostWithComments(postId) { const { posts, loading: postsLoading } = usePosts({ filters: { id: postId } }); const post = posts[0]; const { comments, loading: commentsLoading } = useComments({ postId, enabled: !!post, // Só carrega comments se post existir }); // Combina estados de loading const loading = postsLoading || commentsLoading; // Memoiza resultado combinado const result = useMemo(() => { if (!post) return null; return { ...post, comments, commentCount: comments.length, }; }, [post, comments]); return { post: result, loading }; } ``` **Quando usar:** Quando precisar combinar dados de múltiplas fontes relacionadas ### 2. Debounced Updates Pattern **Problema:** Evitar múltiplas atualizações em inputs de busca **Solução:** Debounce inteligente com cleanup ```javascript // hooks/useDebouncedPosts.js import { useState, useEffect, useRef } from 'react'; import { usePosts } from './usePosts'; export function useDebouncedPosts(initialSearch = '') { const [search, setSearch] = useState(initialSearch); const [debouncedSearch, setDebouncedSearch] = useState(search); const timeoutRef = useRef(null); // Debounce do termo de busca useEffect(() => { // Limpa timeout anterior if (timeoutRef.current) { clearTimeout(timeoutRef.current); } // Se vazio, atualiza imediatamente if (!search) { setDebouncedSearch(''); return; } // Configura novo timeout timeoutRef.current = setTimeout(() => { setDebouncedSearch(search); }, 300); // 300ms de delay // Cleanup return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, [search]); // Usa o termo debounced para buscar const postsResult = usePosts({ filters: { search: debouncedSearch }, }); return { ...postsResult, search, setSearch, isDebouncing: search !== debouncedSearch, }; } ``` **Benefícios:** Reduz chamadas à API em até 90% durante digitação ### 3. Retry Pattern com Backoff Exponencial **Background:** Resiliência contra falhas temporárias de rede ```javascript // hooks/usePostsWithRetry.js import { useState, useCallback, useRef } from 'react'; export function usePostsWithRetry(options = {}) { const [state, setState] = useState({ data: null, loading: false, error: null, retryCount: 0, }); const retryTimeoutRef = useRef(null); const maxRetries = options.maxRetries || 3; const fetchWithRetry = useCallback(async (retryCount = 0) => { setState(prev => ({ ...prev, loading: true, error: null })); try { const result = await postsService.getPosts(options); setState({ data: result.data, loading: false, error: null, retryCount: 0, }); } catch (error) { if (retryCount < maxRetries) { // Backoff exponencial: 1s, 2s, 4s... const delay = Math.pow(2, retryCount) * 1000; setState(prev => ({ ...prev, error: `Tentativa ${retryCount + 1}/${maxRetries} falhou. Tentando novamente...`, retryCount: retryCount + 1, })); retryTimeoutRef.current = setTimeout(() => { fetchWithRetry(retryCount + 1); }, delay); } else { setState(prev => ({ ...prev, loading: false, error: 'Falha após múltiplas tentativas', })); } } }, [options, maxRetries]); // Manual retry const retry = useCallback(() => { if (retryTimeoutRef.current) { clearTimeout(retryTimeoutRef.current); } fetchWithRetry(0); }, [fetchWithRetry]); return { ...state, retry }; } ``` **Trade-offs:** Aumenta resiliência mas pode aumentar latência percebida ### 4. Prefetch Pattern **Caso de uso:** Antecipar navegação do usuário ```javascript // hooks/usePrefetchPosts.js import { useCallback, useRef } from 'react'; import { cacheManager } from './cacheManager'; export function usePrefetchPosts() { const prefetchedRef = useRef(new Set()); const prefetchPost = useCallback(async (postId) => { // Evita prefetch duplicado if (prefetchedRef.current.has(postId)) return; const cacheKey = `post-${postId}`; // Verifica se já está em cache if (cacheManager.get(cacheKey)) return; prefetchedRef.current.add(postId); // Fetch em background (não bloqueia UI) postsService.getPostById(postId) .then(data => { cacheManager.set(cacheKey, data); }) .catch(() => { // Falha silenciosa - é apenas prefetch prefetchedRef.current.delete(postId); }); }, []); const prefetchNextPosts = useCallback(async (currentId, count = 3) => { // Busca posts próximos para prefetch const { data } = await postsService.getPosts({ filters: { id: { operator: 'gt', value: currentId } }, limit: count, }); // Prefetch em paralelo data.forEach(post => prefetchPost(post.id)); }, [prefetchPost]); return { prefetchPost, prefetchNextPosts }; } ``` ## Armadilhas Comuns a Evitar ### 1. Dependências Faltando no useEffect **O problema:** Esquecer dependências causa bugs sutis ```javascript // ❌ Não faça isso - dependências faltando function useBadPosts(userId) { const [posts, setPosts] = useState([]); useEffect(() => { // userId não está nas dependências! fetchUserPosts(userId).then(setPosts); }, []); // Bug: não re-fetcha quando userId muda return posts; } // ✅ Faça isso - todas as dependências incluídas function useGoodPosts(userId) { const [posts, setPosts] = useState([]); useEffect(() => { fetchUserPosts(userId).then(setPosts); }, [userId]); // Re-fetcha quando userId muda return posts; } ``` **Por que isso importa:** Dados desatualizados são piores que nenhum dado ### 2. Não Limpar Side Effects **Erro comum:** Esquecer cleanup causa memory leaks **Por que acontece:** Desenvolvedores assumem que React limpa tudo ```javascript // ❌ Problema - sem cleanup function useBadSubscription() { useEffect(() => { const subscription = supabase .from('posts') .on('*', payload => { console.log(payload); }) .subscribe(); // Sem cleanup! Memory leak! }, []); } // ✅ Solução - cleanup adequado function useGoodSubscription() { useEffect(() => { const subscription = supabase .from('posts') .on('*', payload => { console.log(payload); }) .subscribe(); // Cleanup function return () => { subscription.unsubscribe(); }; }, []); } ``` **Prevenção:** Sempre retorne cleanup function quando criar subscriptions ### 3. Modificar Estado Diretamente **A armadilha:** Mutar estado não triggera re-render ```javascript // ❌ Evite esse padrão - mutação direta function useBadPostsManager() { const [posts, setPosts] = useState([]); const addPost = (newPost) => { posts.push(newPost); // Mutação! setPosts(posts); // Não vai re-renderizar! }; return { posts, addPost }; } // ✅ Abordagem preferida - imutabilidade function useGoodPostsManager() { const [posts, setPosts] = useState([]); const addPost = useCallback((newPost) => { setPosts(prev => [...prev, newPost]); // Novo array }, []); return { posts, addPost }; } ``` **Red flags:** Se você usa push, pop, splice no estado, provavelmente está errado ## Quando NÃO Usar Custom Hooks Não crie custom hooks quando: - **Lógica usada uma vez:** Mantenha no componente se não for reutilizada - **Apenas renomeando:** Não crie `useData` que só chama `useState` - **Computação pura:** Use funções normais para cálculos sem estado ```javascript // ❌ Overkill para cenários simples function useToggle(initial = false) { const [value, setValue] = useState(initial); const toggle = () => setValue(!value); return [value, toggle]; } // ✅ Solução simples é melhor function Component() { const [isOpen, setIsOpen] = useState(false); // Direto e claro, sem abstração desnecessária } ``` **Framework de decisão:** Se o hook tem menos de 10 linhas e é usado uma vez, provavelmente não precisa existir ## Custom Hooks vs Outras Soluções ### Quando Custom Hooks Brilham **Custom Hooks são ótimos para:** - **Lógica stateful compartilhada:** Reutilização entre componentes - **Encapsulamento de side effects:** Isolar complexidade - **Composição:** Combinar múltiplos hooks em abstrações maiores ### Quando Considerar Alternativas **Considere alternativas quando precisar:** - **Estado global** → **Context API ou Zustand:** Para estado compartilhado app-wide - **Cache complexo** → **React Query/SWR:** Para cache e sincronização avançados - **Forms complexos** → **React Hook Form:** Para validação e gestão de forms ### Matriz de Comparação | Feature | Custom Hooks | Context API | React Query | Zustand | |---------|--------------|-------------|-------------|---------| | Complexidade | Baixa | Média | Alta | Baixa | | Performance | Excelente | Boa* | Excelente | Excelente | | Cache | Manual | Não | Automático | Manual | | DevTools | Básico | React DevTools | Dedicado | Dedicado | ## Conclusão Custom Hooks são uma ferramenta poderosa que transforma código React verboso e repetitivo em abstrações elegantes e reutilizáveis. Eles trazem encapsulamento, testabilidade e manutenibilidade para suas aplicações. **Principais aprendizados:** - **Extraia lógica stateful:** Transforme componentes complexos em interfaces simples - **Componha hooks menores:** Construa abstrações poderosas combinando hooks - **Gerencie side effects:** Use cleanup functions e cancellation para evitar bugs - **Otimize performance:** Implemente cache, debounce e virtualização quando necessário Da próxima vez que você se pegar duplicando lógica entre componentes, lembre-se dos Custom Hooks. Seu eu futuro (e sua equipe) agradecerão pela clareza e manutenibilidade. **Próximos passos:** - Identifique lógica duplicada em seu projeto atual - Comece com um hook simples e evolua gradualmente - Explore React Query para necessidades mais avançadas de data fetching Já criou Custom Hooks poderosos em seus projetos? Quais padrões você achou mais úteis? Compartilhe suas experiências nos comentários! --- *Se isso ajudou você a dominar Custom Hooks, siga para mais padrões React avançados e arquitetura de aplicações! 🚀* ## Recursos - [React Hooks Documentation](https://react.dev/reference/react) - [Supabase JavaScript Client](https://supabase.com/docs/reference/javascript/introduction) - [React Query - Para casos avançados](https://tanstack.com/query/latest) - [Testing Custom Hooks](https://kentcdodds.com/blog/how-to-test-custom-react-hooks)

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

Custom Hooks no React: O Guia Completo para Gerenciar Estado e Serviços