Você conhece o useRef para referências DOM. Mas existe uma diferença enorme entre manipulação básica de DOM e como equipes profissionais aproveitam o useRef para aplicações críticas de performance. A maioria dos tutoriais ensina `inputRef.current.focus()`. Desenvolvedores profissionais conhecem padrões de useRef que eliminam re-renders, previnem vazamentos de memória e habilitam sincronização complexa de estado que o useState não consegue lidar. A documentação do React cobre o básico. Código de produção requer técnicas avançadas que transformam o useRef de uma simples ferramenta DOM em uma poderosa arma de otimização. Esses padrões raramente são documentados. Até agora. --- ## 1. O Padrão de Persistência de Valores Seguro para Render (Prevenindo Re-renders Desnecessários) **O Segredo:** useRef preserva valores entre renders sem disparar re-renders, tornando-o perfeito para rastrear valores que componentes precisam "lembrar" mas não precisam exibir. ### ❌ **Abordagem Comum: State para Valores Não Renderizados** ```javascript /* ================================================ * ❌ PROBLEMA: Usando state para valores que não afetam a UI * Impacto: Dispara re-renders desnecessários * Erro comum: Tratar todos valores persistentes como state * ================================================ */ function RastreadorScroll() { const [scrollAnterior, setScrollAnterior] = useState(0); const [direcaoScroll, setDirecaoScroll] = useState('nenhuma'); useEffect(() => { const handleScroll = () => { const scrollAtual = window.scrollY; // Cada evento de scroll causa 2 re-renders! if (scrollAtual > scrollAnterior) { setDirecaoScroll('baixo'); } else { setDirecaoScroll('cima'); } setScrollAnterior(scrollAtual); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [scrollAnterior]); // Componente re-renderiza em CADA evento de scroll console.log('Componente renderizado'); return

Direção do scroll: {direcaoScroll}

; } ``` ### ✅ **Técnica Profissional: Ref para Valores Não-UI** ```javascript /* ================================================ * 🎯 SEGREDO: Use refs para valores que persistem mas não renderizam * Por que funciona: Refs não disparam re-renders ao atualizar * Benefício profissional: 90% menos renders em UIs com muito scroll * ================================================ */ function RastreadorScroll() { const scrollAnterior = useRef(0); const [direcaoScroll, setDirecaoScroll] = useState('nenhuma'); useEffect(() => { const handleScroll = () => { const scrollAtual = window.scrollY; // Só re-renderiza quando a direção realmente muda if (scrollAtual > scrollAnterior.current && direcaoScroll !== 'baixo') { setDirecaoScroll('baixo'); } else if (scrollAtual < scrollAnterior.current && direcaoScroll !== 'cima') { setDirecaoScroll('cima'); } // Atualiza ref sem re-render scrollAnterior.current = scrollAtual; }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [direcaoScroll]); // Componente só re-renderiza quando direção muda console.log('Componente renderizado'); return

Direção do scroll: {direcaoScroll}

; } ``` ### **Por Que Isso Funciona:** O algoritmo de reconciliação do React só executa quando state ou props mudam. Refs existem fora desse sistema - são containers mutáveis que persistem entre renders sem disparar o processo de reconciliação. Isso os torna perfeitos para valores que precisam de persistência mas não afetam a saída visual. ### **Implementação Avançada:** ```javascript function useValorSeguroRender(valorInicial) { const ref = useRef(valorInicial); // Fornece um setter que não dispara renders const setValor = useCallback((novoValor) => { ref.current = typeof novoValor === 'function' ? novoValor(ref.current) : novoValor; }, []); return [ref, setValor]; } // Uso em produção function RastreadorAnalytics() { const [contadorCliques, setContadorCliques] = useValorSeguroRender(0); const [tempoUltimoClique, setTempoUltimoClique] = useValorSeguroRender(null); const handleClick = () => { setContadorCliques(prev => prev + 1); setTempoUltimoClique(Date.now()); // Envia analytics sem re-renderizar if (contadorCliques.current % 10 === 0) { analytics.track('marco', { cliques: contadorCliques.current, duracao: Date.now() - tempoUltimoClique.current }); } }; return ; } ``` ### **Aplicações do Mundo Real:** - **Rastreamento de analytics:** Armazenar contadores de interação sem atualizar UI - **Monitoramento de performance:** Rastrear tempos de render e métricas - **Validação de formulários:** Cachear resultados de validação entre renders ### **Dica Pro:** Use refs para valores quando você se pegar escrevendo `useState` mas nunca usando o valor no JSX. Se não é renderizado, provavelmente não deveria ser state. --- ## 2. O Padrão Callback Ref (Acesso Dinâmico a Elementos) **O Segredo:** Callback refs executam quando elementos montam/desmontam, permitindo medições dinâmicas e limpeza que refs regulares não conseguem lidar. ### ❌ **Abordagem Comum: Effect com Dependências** ```javascript /* ================================================ * ❌ PROBLEMA: Usando effects para medir elementos dinâmicos * Impacto: Condições de corrida e medições desatualizadas * Erro comum: Assumir que refs sempre estão populadas * ================================================ */ function ListaDinamica({ itens }) { const listaRef = useRef(null); const [alturas, setAlturas] = useState({}); useEffect(() => { // Problema: ref pode ainda não estar populada if (listaRef.current) { const filhos = listaRef.current.children; const novasAlturas = {}; Array.from(filhos).forEach((filho, index) => { // Medições podem estar desatualizadas após updates do DOM novasAlturas[itens[index].id] = filho.offsetHeight; }); setAlturas(novasAlturas); } }, [itens]); // Dependências causam atraso na medição return (

{itens.map(item => (

{item.conteudo}

))}

); } ``` ### ✅ **Técnica Profissional: Callback Refs** ```javascript /* ================================================ * 🎯 SEGREDO: Callback refs para acesso imediato a elementos * Por que funciona: Callbacks disparam sincronamente na montagem * Benefício profissional: Medições precisas, sem condições de corrida * ================================================ */ function ListaDinamica({ itens }) { const [alturas, setAlturas] = useState({}); const medicoesRefs = useRef(new Map()); const criarCallbackRef = (itemId) => (elemento) => { if (elemento) { // Elemento está montando - medir imediatamente medicoesRefs.current.set(itemId, elemento); // Obter medição fresca sincronamente setAlturas(prev => ({ ...prev, [itemId]: elemento.offsetHeight })); } else { // Elemento está desmontando - limpar medicoesRefs.current.delete(itemId); setAlturas(prev => { const proximo = { ...prev }; delete proximo[itemId]; return proximo; }); } }; return (

{itens.map(item => (

{item.conteudo}

))}

); } ``` ### **Por Que Isso Funciona:** Callback refs são chamadas sincronamente durante a fase de commit do React, logo após o DOM ser atualizado. Isso garante que você está trabalhando com o elemento DOM real, não uma referência desatualizada. O callback recebe `null` quando desmonta, permitindo limpeza automática. ### **Implementação Avançada:** ```javascript function useObservadorElemento(callback) { const observerRef = useRef(null); const callbackRef = useCallback((elemento) => { // Limpar observer anterior if (observerRef.current) { observerRef.current.disconnect(); observerRef.current = null; } if (elemento) { // Criar novo observer para este elemento observerRef.current = new ResizeObserver((entries) => { callback(entries[0]); }); observerRef.current.observe(elemento); // Medição inicial callback({ contentRect: elemento.getBoundingClientRect(), target: elemento }); } }, [callback]); return callbackRef; } // Uso function ComponenteResponsivo() { const [dimensoes, setDimensoes] = useState(null); const refMedicao = useObservadorElemento((entry) => { setDimensoes({ largura: entry.contentRect.width, altura: entry.contentRect.height }); }); return (

{dimensoes && `Tamanho: ${dimensoes.largura}x${dimensoes.altura}`}

); } ``` ### **Aplicações do Mundo Real:** - **Scroll virtual:** Medir alturas dinâmicas de itens com precisão - **Intersection observers:** Configurar/limpar observers em elementos dinâmicos - **Bibliotecas de animação:** Anexar instâncias de animação a elementos ### **Dica Pro:** Sempre lide com montagem (`elemento` existe) e desmontagem (`elemento` é null) em callback refs para prevenir vazamentos de memória. --- ## 3. O Padrão Hook de Valor Anterior (Comparação de Estado) **O Segredo:** useRef combinado com useEffect cria um rastreador perfeito de valor anterior que equipes profissionais usam para comparações complexas de estado e animações. ### ❌ **Abordagem Comum: Múltiplas Variáveis de Estado** ```javascript /* ================================================ * ❌ PROBLEMA: Gerenciando valores anteriores com state * Impacto: Gestão de estado complexa e renders extras * Erro comum: Criar state para valores históricos * ================================================ */ function RastreadorPreco({ precoAtual }) { const [preco, setPreco] = useState(precoAtual); const [precoAnterior, setPrecoAnterior] = useState(null); const [direcaoPreco, setDirecaoPreco] = useState('estavel'); useEffect(() => { // Malabarismo complexo de state if (precoAtual !== preco) { setPrecoAnterior(preco); setPreco(precoAtual); // Isso causa múltiplos renders if (precoAtual > preco) { setDirecaoPreco('subindo'); } else if (precoAtual < preco) { setDirecaoPreco('descendo'); } } }, [precoAtual, preco]); return (

Atual: R${preco} {precoAnterior && ` (era: R${precoAnterior})`}

); } ``` ### ✅ **Técnica Profissional: Hook usePrevious** ```javascript /* ================================================ * 🎯 SEGREDO: useRef para rastreamento perfeito de valor anterior * Por que funciona: Refs atualizam após render, capturando estado anterior * Benefício profissional: Comparações limpas sem complexidade de state * ================================================ */ function usePrevious(valor) { const ref = useRef(); useEffect(() => { // Atualiza APÓS render, então ref mantém valor anterior durante render ref.current = valor; }); return ref.current; } function RastreadorPreco({ precoAtual }) { const precoAnterior = usePrevious(precoAtual); // Deriva direção sem state adicional const direcaoPreco = precoAtual > precoAnterior ? 'subindo' : precoAtual < precoAnterior ? 'descendo' : 'estavel'; const valorMudanca = precoAnterior ? (precoAtual - precoAnterior).toFixed(2) : null; return (

R${precoAtual} {valorMudanca && ( {direcaoPreco === 'subindo' ? '↑' : '↓'} R${Math.abs(valorMudanca)} )}

); } ``` ### **Por Que Isso Funciona:** useEffect executa após a fase de render completar. Ao atualizar a ref dentro do useEffect, garantimos que ela sempre contém o valor do render anterior. Durante o render atual, `ref.current` ainda mantém o valor antigo, nos dando comparação perfeita anterior/atual. ### **Implementação Avançada:** ```javascript function useHistoricoValor(valor, maxHistorico = 10) { const historico = useRef([]); useEffect(() => { historico.current = [valor, ...historico.current].slice(0, maxHistorico); }); return { atual: valor, anterior: historico.current[0], historico: historico.current, mudou: valor !== historico.current[0], contagemMudancas: historico.current.filter((v, i) => i > 0 && v !== historico.current[i - 1] ).length }; } // Uso avançado com comparação profunda function useDeepPrevious(valor) { const ref = useRef(); const valorAnterior = ref.current; const mudou = !isEqual(valorAnterior, valor); // Usando lodash isEqual useEffect(() => { if (mudou) { ref.current = cloneDeep(valor); // Clone profundo para prevenir mutações } }); return [valorAnterior, mudou]; } ``` ### **Aplicações do Mundo Real:** - **Tickers de preço:** Mostrar mudanças de preço com animações - **Verificação de alterações em formulários:** Detectar mudanças não salvas - **Funcionalidade desfazer/refazer:** Rastrear histórico de estado ### **Dica Pro:** Para valores de objeto/array, considere clonagem profunda no effect para prevenir que mutações acidentais afetem seu histórico. --- ## 4. O Padrão de Variável de Instância (Comunicação Entre Renders) **O Segredo:** useRef cria variáveis de instância que sobrevivem a re-renders, permitindo comunicação complexa entre renders sem prop drilling ou context. ### ❌ **Abordagem Comum: Prop Drilling ou Context Excessivo** ```javascript /* ================================================ * ❌ PROBLEMA: Usando context/props para dados de instância * Impacto: Complexidade desnecessária e re-renders * Erro comum: Engenharia excessiva para dados simples de instância * ================================================ */ function PlayerVideo({ src }) { const [tocando, setTocando] = useState(false); const [duracao, setDuracao] = useState(0); const [tempoAtual, setTempoAtual] = useState(0); // Criando state complexo para dados simples de instância const handleTimeUpdate = (e) => { setTempoAtual(e.target.currentTime); // Precisa passar todos esses dados para componentes filhos if (e.target.currentTime >= duracao * 0.9) { // Lógica de quase finalizado } }; return (

); } ``` ### ✅ **Técnica Profissional: Variáveis de Instância via Refs** ```javascript /* ================================================ * 🎯 SEGREDO: useRef para variáveis de instância * Por que funciona: Refs agem como variáveis de instância de classe * Benefício profissional: Lógica complexa sem cascata de re-render * ================================================ */ function PlayerVideo({ src }) { const instanciaRef = useRef({ player: null, ultimoTempoSeek: 0, segmentosAssistidos: [], contagemMudancaQualidade: 0, eventosBuffer: [] }); const videoRef = useCallback((elemento) => { if (elemento) { instanciaRef.current.player = elemento; // Configurar rastreamento complexo sem state elemento.addEventListener('seeking', () => { const deltaSeek = Math.abs( elemento.currentTime - instanciaRef.current.ultimoTempoSeek ); if (deltaSeek > 10) { // Rastrear seeks significativos sem re-renderizar instanciaRef.current.segmentosAssistidos.push({ inicio: instanciaRef.current.ultimoTempoSeek, fim: elemento.currentTime, timestamp: Date.now() }); } instanciaRef.current.ultimoTempoSeek = elemento.currentTime; }); } }, []); // Métodos podem acessar dados de instância sem closures const obterPorcentagemAssistida = useCallback(() => { const segmentos = instanciaRef.current.segmentosAssistidos; const duracao = instanciaRef.current.player?.duration || 0; // Cálculo complexo sem disparar renders const tempoAssistido = segmentos.reduce((total, segmento) => { return total + Math.abs(segmento.fim - segmento.inicio); }, 0); return (tempoAssistido / duracao) * 100; }, []); return (

); } ``` ### **Por Que Isso Funciona:** Refs criam um objeto mutável que persiste por todo o ciclo de vida do componente, similar a variáveis de instância em componentes de classe. Isso permite lógica stateful complexa sem o custo de performance do ciclo de re-render do React. ### **Implementação Avançada:** ```javascript function useInstancia(inicializador) { const instanciaRef = useRef(null); // Inicialização lazy if (instanciaRef.current === null) { instanciaRef.current = typeof inicializador === 'function' ? inicializador() : inicializador; } return instanciaRef.current; } // Instância complexa com métodos function useGerenciadorWebSocket(url) { const instancia = useInstancia(() => ({ socket: null, filaMessagens: [], tentativasReconexao: 0, listeners: new Map(), conectar() { this.socket = new WebSocket(url); this.socket.onmessage = (e) => { this.listeners.forEach(listener => listener(e.data)); }; // Processar mensagens enfileiradas this.socket.onopen = () => { this.filaMessagens.forEach(msg => this.socket.send(msg)); this.filaMessagens = []; }; }, enviar(mensagem) { if (this.socket?.readyState === WebSocket.OPEN) { this.socket.send(mensagem); } else { this.filaMessagens.push(mensagem); } }, adicionarListener(id, callback) { this.listeners.set(id, callback); }, removerListener(id) { this.listeners.delete(id); } })); useEffect(() => { instancia.conectar(); return () => { instancia.socket?.close(); }; }, [url, instancia]); return instancia; } ``` ### **Aplicações do Mundo Real:** - **Gerenciamento WebSocket:** Rastrear estado de conexão e filas de mensagens - **Controladores de animação:** Armazenar instâncias de animação e timelines - **Coletores de analytics:** Buffer de eventos antes de envio em lote ### **Dica Pro:** Use inicialização lazy (verificando se `ref.current` é null) para criação cara de instância para garantir que só acontece uma vez. --- ## 5. O Padrão de Callback Estável (Prevenindo Problemas de Dependência em Effects) **O Segredo:** useRef pode armazenar callbacks para quebrar cadeias de dependência em effects, prevenindo loops infinitos e re-execuções desnecessárias de effects. ### ❌ **Abordagem Comum: Callback nas Dependências** ```javascript /* ================================================ * ❌ PROBLEMA: Callbacks causando re-execução de effects * Impacto: Loops infinitos ou closures desatualizadas * Erro comum: Incluir callbacks em arrays de dependência * ================================================ */ function InputBusca({ onSearch }) { const [query, setQuery] = useState(''); useEffect(() => { const timeoutId = setTimeout(() => { onSearch(query); // onSearch muda = effect re-executa }, 500); return () => clearTimeout(timeoutId); }, [query, onSearch]); // Se onSearch não for memoizado, loop infinito! return ( setQuery(e.target.value)} /> ); } ``` ### ✅ **Técnica Profissional: Padrão Latest Ref** ```javascript /* ================================================ * 🎯 SEGREDO: Armazenar callbacks em refs para referências estáveis * Por que funciona: Ref sempre tem callback mais recente sem mudar * Benefício profissional: Sem requisitos de memo, sem loops infinitos * ================================================ */ function useUltimoCallback(callback) { const callbackRef = useRef(callback); // Atualizar ref em cada render useLayoutEffect(() => { callbackRef.current = callback; }); // Retornar callback estável que chama versão mais recente return useCallback((...args) => { return callbackRef.current(...args); }, []); } function InputBusca({ onSearch }) { const [query, setQuery] = useState(''); const buscaEstavel = useUltimoCallback(onSearch); useEffect(() => { const timeoutId = setTimeout(() => { buscaEstavel(query); // Sempre chama a mais recente, nunca causa re-execução }, 500); return () => clearTimeout(timeoutId); }, [query, buscaEstavel]); // buscaEstavel nunca muda return ( setQuery(e.target.value)} /> ); } ``` ### **Por Que Isso Funciona:** A ref sempre aponta para o callback mais recente, mas a ref em si nunca muda. A função wrapper estável lê da ref, garantindo que sempre chama a versão atual sem disparar dependências de effect. ### **Implementação Avançada:** ```javascript function useCallbackEvento(callback) { const callbackRef = useRef(callback); const callbackEstavelRef = useRef(null); // Atualizar em cada render callbackRef.current = callback; // Criar callback estável apenas uma vez if (!callbackEstavelRef.current) { callbackEstavelRef.current = (...args) => { return callbackRef.current(...args); }; } return callbackEstavelRef.current; } // Avançado: Handler de callback assíncrono function useCallbackAssincrono(callbackAssincrono) { const estaMontadoRef = useRef(true); const callbackRef = useRef(callbackAssincrono); callbackRef.current = callbackAssincrono; useEffect(() => { return () => { estaMontadoRef.current = false; }; }, []); return useCallback(async (...args) => { const resultado = await callbackRef.current(...args); // Só retorna resultado se ainda estiver montado if (estaMontadoRef.current) { return resultado; } }, []); } // Uso com operações assíncronas complexas function BuscadorDados({ onCarregarDados }) { const handlerCargaEstavel = useCallbackEvento(onCarregarDados); const buscarDados = useCallbackAssincrono(async (id) => { const response = await fetch(`/api/dados/${id}`); const dados = await response.json(); // Isso sempre chama a versão mais recente de onCarregarDados handlerCargaEstavel(dados); return dados; }); return ( ); } ``` ### **Aplicações do Mundo Real:** - **Busca com debounce:** Callbacks estáveis para handlers de busca - **Event listeners:** Anexar listeners sem re-inscrever - **Handlers WebSocket:** Atualizar handlers de mensagem sem reconectar ### **Dica Pro:** Use `useLayoutEffect` ao invés de `useEffect` ao atualizar a ref de callback para garantir que é atualizada antes que outros effects a leiam. --- ## 6. O Padrão de Registro de Limpeza (Prevenção de Vazamento de Memória) **O Segredo:** useRef pode manter um registro de limpeza que sobrevive a atualizações de componente, garantindo que todos recursos sejam propriamente descartados mesmo em cenários complexos de montagem. ### ❌ **Abordagem Comum: Caos de Limpeza em Effects** ```javascript /* ================================================ * ❌ PROBLEMA: Gerenciando múltiplas limpezas entre effects * Impacto: Vazamentos de memória por limpezas perdidas * Erro comum: Lógica de limpeza espalhada * ================================================ */ function ComponenteComplexo({ config }) { const [dados, setDados] = useState(null); useEffect(() => { const controller = new AbortController(); fetch('/api/dados', { signal: controller.signal }) .then(res => res.json()) .then(setDados); return () => controller.abort(); }, []); useEffect(() => { const timer = setInterval(() => { // Lógica de polling }, 1000); return () => clearInterval(timer); }, [config]); useEffect(() => { const handler = (e) => console.log(e); window.addEventListener('resize', handler); return () => window.removeEventListener('resize', handler); }, []); // Difícil rastrear o que precisa de limpeza } ``` ### ✅ **Técnica Profissional: Registro Centralizado de Limpeza** ```javascript /* ================================================ * 🎯 SEGREDO: Registro de limpeza baseado em ref * Por que funciona: Rastreamento centralizado de todos descartáveis * Benefício profissional: Zero vazamentos de memória, mesmo em cenários complexos * ================================================ */ function useRegistroLimpeza() { const registroLimpeza = useRef(new Map()); const registrar = useCallback((chave, funcaoLimpeza) => { // Limpar anterior se existir const limpezaExistente = registroLimpeza.current.get(chave); if (limpezaExistente) { limpezaExistente(); } // Registrar nova limpeza registroLimpeza.current.set(chave, funcaoLimpeza); }, []); const desregistrar = useCallback((chave) => { const limpeza = registroLimpeza.current.get(chave); if (limpeza) { limpeza(); registroLimpeza.current.delete(chave); } }, []); const limparTudo = useCallback(() => { registroLimpeza.current.forEach(limpeza => limpeza()); registroLimpeza.current.clear(); }, []); // Limpar tudo na desmontagem useEffect(() => { return limparTudo; }, [limparTudo]); return { registrar, desregistrar, limparTudo }; } function ComponenteComplexo({ config }) { const { registrar } = useRegistroLimpeza(); const instanciaRef = useRef({}); // Gerenciamento centralizado de recursos useEffect(() => { const controller = new AbortController(); registrar('fetch', () => controller.abort()); fetch('/api/dados', { signal: controller.signal }) .then(res => res.json()) .then(dados => { instanciaRef.current.dados = dados; }); }, [registrar]); useEffect(() => { const timer = setInterval(() => { // Lógica de polling com acesso a dados de instância console.log('Polling...', instanciaRef.current.dados); }, 1000); registrar('polling', () => clearInterval(timer)); }, [config, registrar]); useEffect(() => { const handler = (e) => { console.log('Resize:', e); }; window.addEventListener('resize', handler); registrar('resize', () => window.removeEventListener('resize', handler)); // Pode também registrar limpezas dinâmicas const observer = new IntersectionObserver(() => {}); registrar('observer', () => observer.disconnect()); }, [registrar]); return

Componente complexo com limpeza garantida

; } ``` ### **Por Que Isso Funciona:** O registro de limpeza centraliza toda lógica de descarte em um único Map baseado em ref. Cada recurso é rastreado com uma chave única, e o registro garante que tudo é limpo, mesmo se effects re-executarem ou componentes desmontarem inesperadamente. ### **Implementação Avançada:** ```javascript function useGerenciadorRecursos() { const recursos = useRef({ timers: new Set(), subscriptions: new Set(), controllers: new Set(), observers: new Set(), connections: new Set() }); const adicionar = { timer: (id) => { recursos.current.timers.add(id); return () => { clearTimeout(id); clearInterval(id); recursos.current.timers.delete(id); }; }, subscription: (unsub) => { recursos.current.subscriptions.add(unsub); return () => { unsub(); recursos.current.subscriptions.delete(unsub); }; }, controller: (controller) => { recursos.current.controllers.add(controller); return () => { controller.abort(); recursos.current.controllers.delete(controller); }; }, observer: (observer) => { recursos.current.observers.add(observer); return () => { observer.disconnect(); recursos.current.observers.delete(observer); }; }, connection: (connection) => { recursos.current.connections.add(connection); return () => { connection.close?.(); connection.disconnect?.(); recursos.current.connections.delete(connection); }; } }; useEffect(() => { return () => { // Limpar todos recursos na desmontagem recursos.current.timers.forEach(id => { clearTimeout(id); clearInterval(id); }); recursos.current.subscriptions.forEach(unsub => unsub()); recursos.current.controllers.forEach(c => c.abort()); recursos.current.observers.forEach(o => o.disconnect()); recursos.current.connections.forEach(c => { c.close?.(); c.disconnect?.(); }); }; }, []); return adicionar; } // Uso function ComponenteTempoReal() { const recursos = useGerenciadorRecursos(); const dadosRef = useRef(null); useEffect(() => { // Todos recursos automaticamente rastreados e limpos const controller = new AbortController(); const limpeza1 = recursos.controller(controller); const ws = new WebSocket('wss://api.exemplo.com'); const limpeza2 = recursos.connection(ws); const timer = setInterval(() => { console.log('Tick'); }, 1000); const limpeza3 = recursos.timer(timer); // Retornar limpeza combinada (opcional, registro já cuida disso) return () => { limpeza1(); limpeza2(); limpeza3(); }; }, [recursos]); return

Componente tempo real

; } ``` ### **Aplicações do Mundo Real:** - **Dashboards em tempo real:** Gerenciando WebSockets, timers e chamadas API - **Players de mídia:** Rastreando múltiplos event listeners e recursos - **Visualização de dados:** Gerenciando instâncias D3, observers e animações ### **Dica Pro:** Sempre use chaves únicas em seu registro de limpeza. Considere prefixar com o propósito do effect para evitar colisões. --- ## Domine Esses Segredos, Transforme Sua Performance React A diferença entre React básico e React de produção não é sobre conhecer mais hooks — é sobre entender os padrões que equipes profissionais usam para resolver problemas reais. Esses padrões de useRef eliminam categorias inteiras de bugs e problemas de performance. Comece com o Padrão de Persistência de Valores Seguro para Render se você está lidando com problemas de performance. Implemente o Padrão de Registro de Limpeza se está gerenciando recursos complexos. Cada padrão resolve desafios específicos de produção que useState e useEffect sozinhos não conseguem lidar eficientemente. Lembre-se: useRef não é apenas para elementos DOM. É uma ferramenta poderosa para gerenciar estado mutável, criar referências estáveis e otimizar performance de formas que a documentação não cobre. *Esses padrões alimentam aplicações de produção lidando com milhões de usuários diariamente. Eles são a diferença entre React que funciona e React que escala.* --- ## 📚 Materiais de Referência 1. **[Documentação React - Referência da API de Hooks](https://react.dev/reference/react/hooks)** - Documentação oficial do React cobrindo conceitos fundamentais e especificações da API para todos hooks incluindo useRef 2. **[Repositório GitHub do React - Código Fonte do Reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler)** - A implementação real do algoritmo de reconciliação do React e mecanismos de hooks, essencial para entender como refs funcionam internamente 3. **[MDN Web Docs - WeakMap](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)** - Entender WeakMap é crucial para implementar padrões avançados de limpeza e prevenir vazamentos de memória em registros baseados em refs

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

6 Segredos do React useRef Que Equipes Profissionais Usam (Mas Nunca Documentam)