How to fix missing dependency warning when using useEffect React Hook? I am using nextjs app

Question

The warning I am getting:

Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array

And the code I write in _app.js:

 const router = useRouter();
  useEffect(() => {
    router.events.on('routeChangeStart', ()=>{
      setProgress(40)
    })
    router.events.on('routeChangeComplete', ()=>{
      setProgress(100)
    })
    // console.log("I am refreshed!")
   try {
    if(localStorage.getItem("cart")){
      setcart(JSON.parse(localStorage.getItem("cart")))
      saveCart(JSON.parse(localStorage.getItem("cart")))
    }
   } catch (error) {
     console.error(error)
     localStorage.clear()
   }
   let token = localStorage.getItem("token");
   if(token){
     setuser({value: token})
     setkeyMaker(Math.random())
   }
  
  }, [router.query])

and I have also imported {useEffect} and {useRouter} from react! Please help me to sort this issue out!

Answer 1

use the Router instance instead,

 import Router from 'next/router';

It can solve the problem easily.