Busca en todas las páginas de la documentación
Una lista de verificación para eslint-plugin-react-hooks en aplicaciones React Native de Expo - detectando llamadas ilegales de hooks, cierres obsoletos en código asincrónico móvil, y limpieza faltante antes de que se envíen a dispositivos en segundo plano.
eslint-config-expo registra el plugin de hooks antes de agregar overrides.fetch.eslint-disable-next-line react-hooks/exhaustive-deps como una excepción documentada - anota por qué la dep es estable o por qué datos obsoletos son aceptables.Confirma que eslint-plugin-react-hooks está activo: eslint-config-expo incluye el plugin en la config plana - ejecuta npx eslint --print-config app/index.tsx y verifica que las reglas react-hooks/ aparecen.
eslint-plugin-react-hooks y extiende su preset recomendado explícitamente.Severidad de react-hooks/rules-of-hooks: Mantén en error - el orden ilegal de hooks rompe React en producción y no puede degradarse a advertencia sin ocultar bloqueadores de envío.
error falla expo lint y GitHub Actions de la misma manera que errores de TypeScript.off para esta regla permite que hooks condicionales se fusionen silenciosamente.Severidad de react-hooks/exhaustive-deps: Por defecto a warn en bases de código activas; promueve a error solo después de que el equipo tenga una política de exclusión escrita.
--max-warnings 0 cuando quieras cero advertencias sin luchar contra falsos positivos de referencia estable el primer día.error a src/features/** una vez que las carpetas greenfield estén limpias.Targeting de archivo de config plana: Asegúrate que app/, src/, y components/ estén dentro de globs files de ESLint - hooks en archivos de ruta se lintean igual que hooks compartidos.
packages/ui - cierres obsoletos en un hook de sistema de diseño afectan cada pantalla.app/ porque los nombres de archivo de Expo Router confunden al linter.Integración del editor: Habilita ESLint en el IDE con soporte de config plana para que exhaustive-deps se muestre mientras escribes efectos, no solo en CI.
expo lint vía lint-staged en archivos .tsx cambiados.Sin hooks dentro de renderItem: FlatList / SectionList renderItem es un callback, no un componente - extrae TodoRow y llama hooks en la parte superior de ese componente.
rules-of-hooks marca llamadas de hook dentro de funciones anidadas.renderItem={({ item }) => <TodoRow item={item} />}.Sin hooks después de early returns: Las cláusulas de guardián por encima de useState / useEffect violan el orden de hooks cuando la guardiana se alterna entre renderizados.
if (!fontsLoaded) return null colocado antes de hooks en una pantalla.Prefija custom hooks con use: getFilters() puede llamar useState ilegalmente; useFilters() dispara rules-of-hooks en el cuerpo del hook personalizado.
use-app-state.ts exportando useAppState.renderHook de Testing Library aún requiere un hook use* apropiado.Sin hooks dentro de fábricas useMemo / useCallback: La fábrica se ejecuta durante renderizado; hooks pertenecen solo al nivel superior del componente.
useMemo(() => { useEffect(...) }).useEffect plano con limpieza, o un hook personalizado dedicado.Sin hooks en worklets de Reanimated o callbacks de no-React: Los worklets y callbacks de módulos nativos están fuera del ciclo de renderizado de React - usa shared values y runOnJS en su lugar.
// eslint-disable no es la respuesta.Listeners de AppState: Efectos que se suscriben a AppState.addEventListener deben listar cada valor cerrado sobre el cual se usa dentro del handler, o leer valores frescos de refs.
userId del renderizado cuando la app regresa del background después del logout.userId en deps, o const userIdRef = useRef(userId) sincronizado en un efecto separado.useFocusEffect de Expo Router / React Navigation: La identidad del callback importa - envuelve el trabajo en useCallback con deps correctas o eslint marca el wrapper de efecto.
route.params.id omitido de deps; registro incorrecto aparece después de deep link.[route.params.id] en deps de useCallback; retorna limpieza para cancelar fetch en vuelo.Suscripciones de NetInfo / conectividad: Callbacks de NetInfo.addEventListener que encolanan mutaciones deben ver auth actual y estado de cola.
accessToken o leer de un ref actualizado al refrescar.Listeners de teclado y dimensiones: Efectos de Keyboard.addListener y Dimensions.addEventListener necesitan limpieza y deps para valores usados cuando se disparan.
keyboardVerticalOffset computado una vez; lint-clean pero incorrecto después de rotación.layout o re-leer Dimensions.get dentro del handler.Efectos asincrónico y AbortController: useEffect que llama a async function load() debe abortar en limpieza y listar deps que cambian la solicitud.
const ac = new AbortController(); … return () => ac.abort(); más array de dep completo.Timers (setInterval, setTimeout): Efectos programando timers deben limpiarlos en limpieza e incluir deps que conducen el retardo.
useFocusEffect fue olvidada.useEffect como en limpieza de efecto de enfoque.Refs estables vs deps faltantes: dispatch de useReducer, setState de useState, y refs son estables - omitirlos es fino; omitir props y estado derivado no es.
dispatch - seguro de dejar; no deshabilites la regla por él.filter cuando efecto publica filter a analytics - agrega filter.TanStack Query y contexto: Incluye data, isFetching, e inputs de query-key en deps cuando efectos reaccionan a ellos; queryClient de useQueryClient() es estable.
useEffect en data pero falta dataUpdatedAt cuando solo la frescura importa.Política de disable de una línea: eslint-disable-next-line react-hooks/exhaustive-deps requiere un comentario inline explicando estabilidad o intención de obsolescencia.
// deps intencionalmente vacío - ping de analytics de mount-only.Nunca deshabilites rules-of-hooks: Si la regla se dispara, refactoriza - hooks condicionales nunca son un falso positivo de lint.
Custom hooks exportan una historia de dep coherente: Hooks que envuelven AppState / NetInfo deben documentar qué valores los que llaman deben pasar para que efectos del que llama permanezcan lint-clean.
useOnAppForeground(onForeground, deps) internamente refleja deps de useEffect.Actualizaciones funcionales para eventos rápidos: setCount(c => c + 1) remueve count de handler deps - prefiere sobre deshabilitar lint en press handlers.
setState en el mismo gesto - forma funcional permanece correcta.Lint de dependencia de useCallback / useMemo: Hooks anidados lintean sus propias fábricas - si useCallback omite un prop cerrado sobre el cual, el bug está en deps de callback, no exhaustive-deps en el efecto solo.
useEffect(() => { doWork(cb) }, [cb]) donde cb recrea cada renderizado de todas formas.cb con deps correctas de useCallback o inline el trabajo en el efecto.Aplicación de CI: Agrega expo lint (o eslint .) a verificaciones de PR con --max-warnings 0 cuando la política madura.
rules-of-hooks como error solo; voltea exhaustive-deps a error por paquete.Sí - el preset de config plana de Expo registra eslint-plugin-react-hooks. Confirma con npx eslint --print-config en un archivo de pantalla antes de agregar una instalación de plugin duplicada.
Comienza en advertencia para que falsos positivos de referencia estable no bloqueen velocidad. Mueve a error (o --max-warnings 0) una vez que el equipo documenta exclusiones aceptables de una línea. Mantén rules-of-hooks en error siempre.
exhaustive-deps es análisis estático - no puede verificar que tu handler de AppState lee estado de auth fresco. Audita listeners de Tier 3 manualmente y prueba background - foreground en un dispositivo físico.
Puedes, pero el efecto se re-ejecuta cada renderizado si la identidad del callback cambia. Envuelve el cuerpo en useCallback con los mismos deps que pondrías en un useEffect, o acepta refetches redundantes.
Sí - useReducer dispatch es estable para la vida del componente. Lo mismo aplica a setters de useState. No deshabilites la regla únicamente para silenciar dispatch; agrega valores realmente faltantes en su lugar.
Extrae un componente de fila: function Row({ item }) { const theme = useTheme(); … }. Pasa renderItem={({ item }) => <Row item={item} />}. Hooks entonces se ejecutan en un componente real.
Usualmente no - useQueryClient() retorna un cliente estable. Incluye resultados de query y variables que cambian comportamiento de fetch (id, filter), no el singleton del cliente.
Cuando puedes declarar en una línea por qué la dependencia es estable (mount-only, respaldada por ref, o deps vacío intencional). Nunca deshabilites generalizado para un archivo completo o directorio.
Batching y renderizado concurrente hacen cierres obsoletos más visibles, no menos. Reglas de hook y semántica de exhaustive-deps son sin cambios - aún refuérzalas en SDK 57.
Aplica el mismo bloque de reglas react-hooks a fuentes TypeScript de packages/**. Un hook obsoleto en packages/ui se envía a cada app en el workspace.
Si tu SDK envía una API estable oficial, sigue su orientación de lint. Hasta entonces, prefiere refs para handlers estables dentro de efectos en lugar de apagar exhaustive-deps globalmente.
No - useMemo tiene su propio array de dependencias. Efectos que leen valores memoizados aún necesitan esos valores (o sus deps) listados en el efecto.
Usa renderHook con @testing-library/react-native, desmonta el hook, y afirma que listeners se removieron (mock AppState.addEventListener). Strict Mode double-mount en dev ayuda a superficie limpieza faltante durante ejecuciones manuales.
Evita disables de carpeta ancha para app/. Las pantallas de ruta son donde useFocusEffect y efectos impulsados por params se concentran - necesitan lint más, no menos.
Envuelve AppState, NetInfo, y Keyboard en hooks use* con parámetros explícitos para valores cerrados sobre los cuales. Ver Custom Hooks for UI Logic.
eslint-config-expo, config plana, y primer conjunto de reglasexpo lint y --max-warnings 0Versiones de stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última actualización: 19 jul 2026