Busque em todas as páginas da documentação
Um checklist de verificação para eslint-plugin-react-hooks em aplicativos Expo React Native - capturando chamadas ilegais de hooks, closures obsoletas em código mobile assíncrono e dependências ausentes antes que cheguem a dispositivos em segundo plano.
eslint-config-expo registra o plugin de hooks antes de adicionar overrides.fetch para web sugerem.eslint-disable-next-line react-hooks/exhaustive-deps como uma exceção documentada - anote por que a dependência é estável ou por que dados obsoletos são aceitáveis.Confirme que eslint-plugin-react-hooks está ativo: eslint-config-expo inclui o plugin na configuração flat - execute npx eslint --print-config app/index.tsx e verifique se as regras react-hooks/ aparecem.
eslint-plugin-react-hooks e estenda explicitamente seu preset recomendado.Severidade de react-hooks/rules-of-hooks: Mantenha em error - a ordem ilegal de hooks quebra o React em produção e não pode ser rebaixada para warn sem ocultar bloqueadores de lançamento.
error falha expo lint e GitHub Actions da mesma forma que erros de TypeScript.off para esta regra permite que hooks condicionais se misturem silenciosamente.Severidade de react-hooks/exhaustive-deps: Padrão para warn em bases de código ativas; promova para error apenas após a equipe ter uma política de supressão escrita.
--max-warnings 0 quando você quiser zero avisos sem lutar contra falsos positivos de refs estáveis no primeiro dia.error para src/features/** assim que as pastas de código novo estiverem limpas.Direcionamento de arquivo de configuração flat: Certifique-se de que app/, src/ e components/ estejam dentro dos globs files do ESLint - hooks em arquivos de rota são lintados da mesma forma que hooks compartilhados.
packages/ui compartilhado - closures obsoletas em um hook de sistema de design afetam todas as telas.app/ porque os nomes de arquivos do Expo Router confundem o linter.Integração com o editor: Habilite o ESLint no IDE com suporte a flat-config para que exhaustive-deps apareça enquanto você digita efeitos, não apenas em CI.
expo lint via lint-staged em arquivos .tsx alterados.Sem hooks dentro de renderItem: renderItem do FlatList / SectionList é um callback, não um componente - extraia TodoRow e chame hooks no topo desse componente.
rules-of-hooks sinaliza chamadas de hook dentro de funções aninhadas.renderItem={({ item }) => <TodoRow item={item} />}.Sem hooks após retornos antecipados: Cláusulas de guarda acima de useState / useEffect violam a ordem dos hooks quando a guarda alterna entre renders.
if (!fontsLoaded) return null colocado antes dos hooks em uma tela.Prefira o prefixo use para hooks customizados: getFilters() pode chamar useState ilegalmente; useFilters() aciona rules-of-hooks no corpo do hook customizado.
use-app-state.ts exportando useAppState.renderHook da Testing Library ainda requer um hook use* adequado.Sem hooks dentro de fábricas useMemo / useCallback: A fábrica é executada durante o render; hooks pertencem apenas ao nível superior do componente.
useMemo(() => { useEffect(...) }).useEffect simples com limpeza, ou um hook customizado dedicado.Sem hooks em worklets Reanimated ou callbacks não-React: Worklets e callbacks de módulos nativos estão fora do ciclo de renderização do React - use valores compartilhados e runOnJS em vez disso.
// eslint-disable não é a resposta.Listeners AppState: Efeitos que assinam AppState.addEventListener devem listar todos os valores fechados usados dentro do manipulador, ou ler valores frescos de refs.
userId do render quando o app retorna do background após logout.userId nas dependências, ou const userIdRef = useRef(userId) sincronizado em um efeito separado.useFocusEffect do Expo Router / React Navigation: A identidade do callback importa - envolva o trabalho em useCallback com as dependências corretas ou o eslint sinalizará o wrapper do efeito.
route.params.id omitido das dependências; um registro incorreto pisca após deep link.[route.params.id] nas dependências de useCallback; retorne a limpeza para cancelar o fetch em andamento.Listeners NetInfo / conectividade: Callbacks NetInfo.addEventListener que enfileiram mutações devem ver o estado de autenticação e fila atual.
accessToken ou leia de uma ref atualizada no refresh.Listeners de teclado e dimensões: Efeitos Keyboard.addListener e Dimensions.addEventListener precisam de limpeza e dependências para valores usados ao serem disparados.
keyboardVerticalOffset calculado uma vez; lint-clean mas incorreto após rotação.layout ou releia Dimensions.get dentro do manipulador.Efeitos assíncronos e AbortController: useEffect que chama async function load() deve abortar na limpeza e listar dependências que mudam a requisição.
const ac = new AbortController(); … return () => ac.abort(); mais o array de dependências completo.Timers (setInterval, setTimeout): Efeitos que agendam timers devem limpá-los na limpeza e incluir dependências que controlam o atraso.
useFocusEffect foi esquecida.useEffect quanto na limpeza do focus-effect.Refs estáveis vs. dependências ausentes: dispatch de useReducer, setState de useState, e refs são estáveis - omiti-los é aceitável; omitir props e estado derivado não é.
dispatch - seguro de deixar; não desative a regra por causa disso.filter quando o efeito posta filter para analytics - adicione filter.TanStack Query e contexto: Inclua data, isFetching e entradas de chave de consulta nas dependências quando efeitos reagem a elas; queryClient de useQueryClient() é estável.
useEffect em data mas dataUpdatedAt ausente quando apenas a frescura importa.Política de desativação de uma linha: eslint-disable-next-line react-hooks/exhaustive-deps requer um comentário inline explicando a estabilidade ou obsolescência intencional.
// deps intencionalmente vazios - ping de analytics apenas na montagem.Nunca desative rules-of-hooks: Se a regra disparar, refatore - hooks condicionais nunca são um falso positivo de lint.
Hooks customizados exportam uma história de dependência coerente: Hooks que envolvem AppState / NetInfo devem documentar quais valores os chamadores devem passar para que os efeitos dos chamadores permaneçam limpos pelo lint.
useOnAppForeground(onForeground, deps) espelha internamente as dependências de useEffect.exhaustive-deps honestamente.Atualizações funcionais para eventos rápidos: setCount(c => c + 1) remove count das dependências do manipulador - prefira isso em vez de desativar o lint em manipuladores de clique.
setState no mesmo gesto - a forma funcional permanece correta.Lint de dependência useCallback / useMemo: Hooks aninhados fazem o lint de suas próprias fábricas - se useCallback omitir uma prop fechada, o bug está nas dependências do callback, não em exhaustive-deps apenas no efeito.
useEffect(() => { doWork(cb) }, [cb]) onde cb recria a cada renderização de qualquer forma.cb com as dependências corretas de useCallback ou inline o trabalho no efeito.Aplicação em CI: Adicione expo lint (ou eslint .) às verificações de PR com --max-warnings 0 quando a política amadurecer.
rules-of-hooks como erro; mude exhaustive-deps para erro por pacote.Sim - o preset de configuração flat do Expo registra eslint-plugin-react-hooks. Confirme com npx eslint --print-config em um arquivo de tela antes de adicionar uma instalação duplicada do plugin.
Comece com aviso para que falsos positivos de refs estáveis não bloqueiem a velocidade. Mude para erro (ou --max-warnings 0) assim que a equipe documentar supressões aceitáveis de uma linha. Mantenha rules-of-hooks em erro sempre.
exhaustive-deps é análise estática - ele não pode verificar se seu manipulador AppState lê o estado de autenticação atualizado. Audite os listeners do Tier 3 manualmente e teste background → foreground em um dispositivo físico.
Você pode, mas o efeito é reexecutado a cada renderização se a identidade do callback mudar. Envolva o corpo em useCallback com as mesmas dependências que você colocaria em um useEffect, ou aceite refetches redundantes.
Sim - o dispatch do useReducer é estável para o tempo de vida do componente. O mesmo se aplica aos setters do useState. Não desative a regra apenas para silenciar dispatch; adicione valores ausentes reais em vez disso.
Extraia um componente de linha: function Row({ item }) { const theme = useTheme(); … }. Passe renderItem={({ item }) => <Row item={item} />}. Os hooks então rodam em um componente real.
Geralmente não - useQueryClient() retorna um cliente estável. Inclua os resultados da consulta e variáveis que mudam o comportamento de fetch (id, filter), não o singleton do cliente.
Quando você pode declarar em uma linha por que a dependência é estável (apenas na montagem, baseada em ref, ou dependências intencionalmente vazias). Nunca desative globalmente para um arquivo ou diretório inteiro.
O batching e a renderização concorrente tornam as closures obsoletas mais visíveis, não menos. As regras de hooks e a semântica de exhaustive-deps permanecem inalteradas - ainda as aplique no SDK 57.
Aplique o mesmo bloco de regras react-hooks às fontes TypeScript de packages/**. Um hook obsoleto em packages/ui é enviado para todos os aplicativos no workspace.
Se o seu SDK fornecer uma API estável oficial, siga suas orientações de lint. Até lá, prefira refs para manipuladores estáveis dentro de efeitos em vez de desativar exhaustive-deps globalmente.
Não - useMemo tem seu próprio array de dependências. Efeitos que leem valores memorizados ainda precisam desses valores (ou suas dependências) listados no efeito.
Use renderHook com @testing-library/react-native, desmonte o hook e afirme que os listeners foram removidos (simule AppState.addEventListener). O Strict Mode de montagem dupla em desenvolvimento ajuda a expor a limpeza ausente durante execuções manuais.
Evite desativações em toda a pasta para app/. As telas de rota são onde useFocusEffect e efeitos baseados em parâmetros se concentram - elas precisam de lint mais, não menos.
Envolva AppState, NetInfo e Keyboard em hooks use* com parâmetros explícitos para valores fechados. Veja Custom Hooks for UI Logic.
eslint-config-expo, configuração flat e conjunto de regras de primeira passagemexpo lint e --max-warnings 0Versões do Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 19 de jul. de 2026