[PR #321] [MERGED] fix: useRouter() returns stable singleton to prevent unnecessary re-renders #477

New issue

Closed

opened 2026-05-06 13:08:17 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 13:08:17 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/cloudflare/vinext/pull/321
Author: @james-elicx
Created: 3/7/2026
Status: ✅ Merged
Merged: 3/7/2026
Merged by: @james-elicx

Base: main ← Head: fix/use-router-stable-singleton

📝 Commits (1)

bc10391 fix: useRouter() returns stable singleton to prevent unnecessary re-renders

📊 Changes

2 files changed (+95 additions, -50 deletions)

View changed files

📝 packages/vinext/src/shims/navigation.ts (+65 -50)
📝 tests/shims.test.ts (+30 -0)

📄 Description

Summary

`useRouter()` in `next/navigation` was creating a new object literal on every call
Next.js returns the same router reference on every call — components relying on referential equality (e.g. `useMemo`/`useEffect` dependency arrays, `React.memo` bailouts) would re-render unnecessarily on every render cycle
Fix: hoist the router object to module level; all methods close over module-level state and carry no per-render data, so this is safe and exactly matches Next.js behavior

Changes

`packages/vinext/src/shims/navigation.ts`: Replace the inline object literal in `useRouter()` with a module-level `_appRouter` singleton
`tests/shims.test.ts`: Add two regression tests
- Asserts `useRouter()` returns the same reference across multiple calls (`first === second === third`)
- Asserts the singleton exposes all expected navigation methods (`push`, `replace`, `back`, `forward`, `refresh`, `prefetch`)

Testing

pnpm test tests/shims.test.ts   # 568 tests, all passing

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/cloudflare/vinext/pull/321 **Author:** [@james-elicx](https://github.com/james-elicx) **Created:** 3/7/2026 **Status:** ✅ Merged **Merged:** 3/7/2026 **Merged by:** [@james-elicx](https://github.com/james-elicx) **Base:** `main` ← **Head:** `fix/use-router-stable-singleton` --- ### 📝 Commits (1) - [`bc10391`](https://github.com/cloudflare/vinext/commit/bc1039158811829683e43077305ee3072fdf34ce) fix: useRouter() returns stable singleton to prevent unnecessary re-renders ### 📊 Changes **2 files changed** (+95 additions, -50 deletions) <details> <summary>View changed files</summary> 📝 `packages/vinext/src/shims/navigation.ts` (+65 -50) 📝 `tests/shims.test.ts` (+30 -0) </details> ### 📄 Description ## Summary - \`useRouter()\` in \`next/navigation\` was creating a new object literal on every call - Next.js returns the same router reference on every call — components relying on referential equality (e.g. \`useMemo\`/\`useEffect\` dependency arrays, \`React.memo\` bailouts) would re-render unnecessarily on every render cycle - Fix: hoist the router object to module level; all methods close over module-level state and carry no per-render data, so this is safe and exactly matches Next.js behavior ## Changes - \`packages/vinext/src/shims/navigation.ts\`: Replace the inline object literal in \`useRouter()\` with a module-level \`_appRouter\` singleton - \`tests/shims.test.ts\`: Add two regression tests - Asserts \`useRouter()\` returns the same reference across multiple calls (\`first === second === third\`) - Asserts the singleton exposes all expected navigation methods (\`push\`, \`replace\`, \`back\`, \`forward\`, \`refresh\`, \`prefetch\`) ## Testing ``` pnpm test tests/shims.test.ts # 568 tests, all passing ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>