useRouter returns a new object with each call

[sirmyron]

What is the problem?

The object returned from the useRouter hook returns a new object on each render which causes unexpected renders or the triggering of other hooks when used as a dependency.

Steps to Reproduce

1. call const router = useRouter() in your function component
2. use it as a dependency for a useEffect() hook
3. the useEffect hook will always be triggered on each render

Versions

debug: blitzPkgPath: /blitz-project/node_modules/blitz/dist/index.js
debug: cliPkgPath: /blitz-project/node_modules/@blitzjs/cli/lib/src/index.js 

macOS Catalina | darwin-x64 | Node: v13.8.0

blitz: 0.24.3 (global)
blitz: 0.24.3 (local)

  Package manager: yarn 
  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 801.21 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/cli: Not Found
    @prisma/client: Not Found
    blitz: 0.24.3 => 0.24.3 
    react: 0.0.0-experimental-7f28234f8 => 0.0.0-experimental-7f28234f8 
    react-dom: 0.0.0-experimental-7f28234f8 => 0.0.0-experimental-7f28234f8 
    typescript: 3.9.7 => 3.9.7 

Other

n/a

[flybayer]

Here's the source code for this: https://github.com/blitz-js/blitz/blob/canary/packages/core/src/use-router.ts

I think the solution will use useMemo from react

[lukawski]

Hi, I'm interested in fixing this bug.

[sirmyron]

Hi, I'm interested in fixing this bug.

Sorry @lukawski I had started the change after creating the ticket

[lukawski]

Hi, I'm interested in fixing this bug.

Sorry @lukawski I had started the change after creating the ticket

Ah, okay, I guess I'll find something else to work on 😁