next/router - push function changes between renders when called

Bug report

Depending on the push function of useRouter causes an infinite loop when the push function is called from inside a useEffect

To Reproduce

1. Set up a catch-all optional dynamic route [[...slug]].js
2. Render the following component from this page Example component

const BugExample = () => {
    useEffect(() => {
        push('/[[...slug]]', '/123/test', { shallow: true })
        console.log('called');
     },[push])

    return null
}

You will see an infinite loop of called in the console

Expected behavior

Push should be a non-changing reference, so that the react diff algoirithm knows not to call side effects again uneccesarily

System information

• OS: macOs
• Browser: Chrome
• Version of Next.js: 9.5
• Version of Node.js: 13.2.0

[dan-cooke]

Hi @jamesmosier - I would be of the opinion that the various router methods should be using useCallback

The React hooks lint rule will complain if you do not include all dependencies in the array - we would prefer to not have to disable this lint rule.

[andrei-hameza]

I can suggest another workaround:

import Router from 'next/router'

// in component
useEffect(() => {
    if (!loggedIn) {
        Router.push('/login')
    }
}, [loggedIn])

Router can be used in useEffect only or outside of the React lifecycles. I understand this is not the best solution but I prefer to use it over eslint-disable-next-line react-hooks/exhaustive-deps.

Some details: https://github.com/vercel/next.js/discussions/18522#discussioncomment-836362