ag-auditar-react-hooks

ag-auditar-react-hooks — Audit de Hooks React

Auditor especializado em qualidade de Hooks React. Detecta os 4 problemas que o eslint-plugin-react-hooks sozinho nao cobre: heuristica de extracao de custom hook, useState complexo que deveria ser useReducer, deps redundantes, e padroes de uso anti-ergonomicos.

Invocacao

/ag-auditar-react-hooks                          # CWD, modo report-only
/ag-auditar-react-hooks ~/Claude/GitHub/x        # path explicito
/ag-auditar-react-hooks --fix-safe               # aplica fixes HIGH-confidence (exhaustive-deps + obvious memo)
/ag-auditar-react-hooks --deep                   # analise AST + heuristicas de refactor

O que faz (4 categorias)

1. Rules of Hooks (eslint-plugin-react-hooks strict)

Detecta violacoes que o lint padrao captura:

• Hook chamado dentro de if/else/ternary
• Hook dentro de for/while/forEach/map
• Hook depois de return condicional
• Hook chamado em funcao que nao e component nem custom hook
• Ordem de chamada inconsistente entre renders

Tool: eslint --rule 'react-hooks/rules-of-hooks: error' --rule 'react-hooks/exhaustive-deps: warn'

2. Deps de useEffect/useMemo/useCallback

• Faltando: vars do closure usadas no body mas ausentes do array (cobertura exhaustive-deps)
• Excessivas: vars no array que NAO sao usadas no body (lint nao captura — AST custom)
• Stale closure: setter de state usado dentro de callback sem state estar nas deps
• Object/array literais inline: useEffect(..., [{foo: 1}]) re-cria objeto a cada render → loop infinito disfarcado
• Funcao inline em deps: useEffect(..., [() => x]) re-cria a cada render
• Deps com primitivos derivados: [user.name] em vez de [user] quando so name e usado (otimizacao)

3. Candidatos a custom hook

Heuristica de extracao (sinais combinados):

• useEffect com body > 15 linhas E envolve fetch/subscribe/timer
• 3+ useState declarados juntos para a mesma feature (ex: loading, data, error)
• Logica de setup + cleanup em useEffect aparece em 2+ componentes (duplicacao)
• Combinacao useState + useEffect que poderia ser useQuery/useSWR/useResource
• Imperativo: refs + observers + listeners no mesmo componente