useEffect dependencies when using NextJS router

Question

I have a NextJS project, using the NextJS router to route the user to a page based on a certain state variable.

I looked up how to do what I want using the NextJS router documents which has this example:

const useUser = () => ({ user: null, loading: false })

export default function Page() {
  const { user, loading } = useUser()
  const router = useRouter()

  useEffect(() => {
    if (!(user || loading)) {
      router.push('/login')
    }
  }, [user, loading])

  return <p>Redirecting...</p>
}

When I stick that example into my code, ESLint isn't happy about me not including the router as a dependency - showing the following message:

React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps

The message makes sense - we're using the useRouter hook in the effect but not adding it to the dependency array for the effect.

However, adding it to the dependency array naturally leads to an infinite re-render loop (as I'm using dynamic routing, so the same effect gets called over and over since router is changing).

Should I be ignoring the warning from ESLint, or should I be doing something different all together?

Edit: it's worth noting I'm using NextJS ESlint config

Answer 1

Currently, this is a bug.

It seems that the useRouter methods changes useRouter itself. So every time you call one of these methods, useRouter is changing and that leads to this loop.

And the other problem with this is that Next.js is not memorizing useRouter, so it changes even if the value is the same.

Currently, the closest workaround I have found comes from a comment on this open issue https://github.com/vercel/next.js/issues/18127#issuecomment-950907739.

And what it does is that it "converts" useRouter into a useRef and exports the push method. So every time you use this method, this reference won't change if the value didn't change.

Workaround:

I quickly came up with this, which seems to have worked:

import { useRouter } from 'next/router'
import type { NextRouter } from 'next/router'
import { useRef, useState } from 'react'

export default function usePush(): NextRouter['push'] {
    const router = useRouter()
    const routerRef = useRef(router)

    routerRef.current = router

    const [{ push }] = useState<Pick<NextRouter, 'push'>>({
        push: path => routerRef.current.push(path),
    })
    return push
}

It returns a push function that's semantically memoized and therefore safe to use with useEffect, e.g.

const push = usePush()

useEffect(() => {
    checkLoggedIn().then(loggedIn => {
        if (!loggedIn) {
            push('/login')
        }
    })
}, [push])