Estoy usando setInterval en useEffect . Cuando no uso activamente la pestaña, no lo solicito para siempre. Está causando algún problema de memoria. Tengo que buscar datos cada 3000ms , también detenerlo cuando el usuario no esté usando esta pestaña activamente. ¿Cómo puedo hacer tal cosa?
Traté de usar document.visibiltyState y no pude hacerlo.
Mi código:
useEffect(() => { try { const interval = setInterval(() => { getTransactionGroupStats() getTransactionGroups() }, 3000) getBinanceBalanceStats() return () => { clearInterval(interval) } } catch (error) { console.error(error) } }, [])Otra alternativa y un poco más escalable podría ser que crees un gancho personalizado para ver si el usuario está activo o no y cada vez que cambia ejecutas el useEffect
useActive.ts
export const useActive = (time: number) => { const [active, setActive] = useState(false) const timer: any = useRef() const events = ['keypress', 'mousemove', 'touchmove', 'click', 'scroll'] useEffect(() => { const handleEvent = () => { setActive(true) if (timer.current) { window.clearTimeout(timer.current) } timer.current = window.setTimeout(() => { setActive(false) }, time) } events.forEach((event: string) => document.addEventListener(event, handleEvent)) return () => { events.forEach((event: string) => document.removeEventListener(event, handleEvent)) } }, [time]) return active } YourApp.tsx
const active = useActive(3000) useEffect(() => { if(active){ try { const interval = setInterval(() => { getTransactionGroupStats() getTransactionGroups() }, 3000) getBinanceBalanceStats() return () => { clearInterval(interval) } } catch (error) { console.error(error) } } }, [active])Lo resolví con este enfoque: https://blog.sethcorker.com/harnessing-the-page-visibility-api-with-react/
export function usePageVisibility () { const [isVisible, setIsVisible] = useState(!document.hidden) const onVisibilityChange = () => setIsVisible(!document.hidden) React.useEffect(() => { document.addEventListener('visibilitychange', onVisibilityChange, false) return () => { document.removeEventListener('visibilitychange', onVisibilityChange) } }) return isVisible }