I am trying to implement an auto refresh for access-token every "t" minutes; I implemented a setInterval in useEffect (in the root ponent), which sends a request for a new access-token. When I run the code, at times the interval begins onMount and other times it does not run at all.

Another problem I am having that when I redirect the user to the login page, I try to clear the interval and it continues running even after clearInterval.

If there is any other way to implement JWT refresh tokens at set intervals of time, I am open to them too.

 useEffect(() => {
      async function getRefreshToken() {
        const response = await axios.post("http://localhost:3001/refreshToken", {refreshToken}, {withCredentials: true})
        if (response.data.redirect) {
          clearInterval(refresh)
          history.replace(`${response.data.redirect}`)
          localStorage.clear()
        }} 

      const refresh = setInterval(getRefreshToken, 4000)
    }, [])

I am trying to implement an auto refresh for access-token every "t" minutes; I implemented a setInterval in useEffect (in the root ponent), which sends a request for a new access-token. When I run the code, at times the interval begins onMount and other times it does not run at all.

Another problem I am having that when I redirect the user to the login page, I try to clear the interval and it continues running even after clearInterval.

If there is any other way to implement JWT refresh tokens at set intervals of time, I am open to them too.

 useEffect(() => {
      async function getRefreshToken() {
        const response = await axios.post("http://localhost:3001/refreshToken", {refreshToken}, {withCredentials: true})
        if (response.data.redirect) {
          clearInterval(refresh)
          history.replace(`${response.data.redirect}`)
          localStorage.clear()
        }} 

      const refresh = setInterval(getRefreshToken, 4000)
    }, [])

• javascript
• reactjs
• setinterval
• use-effect

1 Answer 1

Here is a working codesandbox example. You can change the functions to match your case

Explanation

What you want is a ref to store the interval to clear it outside of useEffect. You can set the interval just like you do inside useEffect, and save the interval inside the ref:

const ref = useRef()

useEffect(() => {
   const interval = setInterval(...)
   ref.current = interval
}, [])

You need to use a cleanup function inside useEffect to avoid memory leaks:

useEffect(() => {
   const interval = setInterval(...)
   ref.current = interval
   return () => clearInterval(interval)
}, [])

Then, you can clear the interval whenever using :

clearInterval(ref.current)

Remember to use useCallback hook on your axios call function to make sure react doesn't unnecessarily renders.