Frequent Re-rendering

[qapla47]

Is it normal for a timer to cause re-rendering of the site every second? I'm using the useIdleTimer hook in App.js and it causes the child elements (which just have a console.log in them) to execute every second. Perhaps I'm just misunderstanding something in my setup

	let securityTimer = 1000 * 60 * 2
	
	const [remaining, setRemaining] = useState(securityTimer)
	const [modalOpen, setModalOpen] = useState(false)
	const toggleModalOpen = () => setModalOpen(!modalOpen)
	
	const onPrompt = () => {
		if (location.pathname !== '/') {
			setModalOpen(true)
		} else {
			pause()
		}
	}
	
	const onAction = () => {
		if (modalOpen) setModalOpen(false)
		reset()
	}

	const onIdle = () => {
		if (location.pathname !== '/') {
			setModalOpen(false)
			navigate('/')
		}
	}
	
	const {
		start,
		pause,
		reset,
		getRemainingTime,
	} = useIdleTimer({
		onPrompt,
		onAction,
		onIdle,
		timeout: securityTimer,
		promptTimeout: securityTimer - 2000,
		events: [
			'mousemove',
			'keydown',
			'wheel',
			'DOMMouseScroll',
			'mousewheel',
			'MSPointerDown',
			'MSPointerMove',
			'visibilitychange',
		],
		throttle: 5000,
		eventsThrottle: 1000,
		element: document,
		stopOnIdle: false,
		crossTab: false,
	})
	useEffect(() => {
		setInterval(() => {
			setRemaining(getRemainingTime())
		}, 1000)
		start()
	}, [])

[SupremeTechnopriest]

This is the code thats causing the re-render:

useEffect(() => {
	setInterval(() => {
		setRemaining(getRemainingTime())
	}, 1000)
	start()
}, [])

Setting the state causes the component to re-render. Assuming this is for a countdown inside your prompt, you could do this instead to limit re-renders to when the prompt is active.

useEffect(() => {
  const interval = setInterval(() => {
    if(isPrompted()) {
      setRemaining(getRemainingTime())
    }
  }, 1000)

  return () => clearInterval(interval)
}, [])

You don't need to call start unless you set startManually to true or startOnMount to false. Otherwise it will start automatically when the hook mounts. You should also return a callback to stop the interval when the component unmounts.

[qapla47]

yes, that's what I expected was the issue, just the resolution of it was the harder part to find.

As to the start and startManuallycomment that's something that I was playing with (and wound up getting sanitized) as in production I find that what's effected by the timer tends not to render until the first timeout. Doesn't seem to happen in development though.