Fix dependency array in RouteValidationWrapper causing loop (#51170)

## Context

For staging and local only, if you opened the a table in the table
editor, then navigate out, and back into the table editor - the browser
freezes
- The TableEditor itself has a `useEffect` that reads that and redirects
to the last visited table when landing on `/editor`
- `router` is in the dependency array which for the TanStack build is
not a stable singleton, resulting in a redirect loop - so the main fix
was to remove `router` from the dependency array
- (Unrelated) Also cleaned up some logic in the redirect regarding
reading the tab ID

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Improved table editor redirects so they select the matching open table
tab from history or fall back to the first open table tab when
available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Joshen Lim authored and GitHub committed 2026-10-05 12:04:52 +08:00
1 parent 10c7379c97
commit 39e13d3181
1 file changed
+18 -7
@@ -30,13 +30,21 @@ const TableEditorPage: NextPageWithLayout = () => {
useEffect(() => {
if (isHistoryLoaded && projectRef && router) {
const lastOpenedTableId = Number(history.editor)
const lastTabId = Number(
tabStore.openTabs.find((id) => editorEntityTypes.table.includes(tabStore.tabsMap[id]?.type))
const lastTableTabId = tabStore.openTabs.find((id) =>
editorEntityTypes.table.includes(tabStore.tabsMap[id]?.type)
)
const lastTableTab = lastTableTabId ? tabStore.tabsMap[lastTableTabId] : undefined
const lastTabId = lastTableTab?.metadata?.tableId
// Handle redirect to last opened table tab, or last table tab
if (Number.isInteger(lastOpenedTableId)) {
const lastOpenedTableData = tabStore.tabsMap[lastOpenedTableId]
// Tabs are keyed by a prefixed id (e.g. "r-293522"), but history only stores
// the bare table id, so look up the tab by its metadata instead of by key.
const lastOpenedTableData = Object.values(tabStore.tabsMap).find(
(tab) =>
editorEntityTypes.table.includes(tab.type) &&
tab.metadata?.tableId === lastOpenedTableId
)
router.push(
buildTableEditorUrl({
projectRef,
@@ -44,19 +52,22 @@ const TableEditorPage: NextPageWithLayout = () => {
schema: lastOpenedTableData?.metadata?.schema,
})
)
} else if (Number.isInteger(lastTabId)) {
const lastOpenedTableData = tabStore.tabsMap[lastTabId]
} else if (lastTabId !== undefined) {
router.push(
buildTableEditorUrl({
projectRef,
tableId: lastTabId,
schema: lastOpenedTableData?.metadata?.schema,
schema: lastTableTab?.metadata?.schema,
})
)
}
}
// router is intentionally excluded: in the TanStack build useRouter() returns a
// new object on every navigation-related render, and including it here caused
// this effect to re-fire mid-navigation and push the same redirect repeatedly,
// freezing the page.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isHistoryLoaded, projectRef, router])
}, [isHistoryLoaded, projectRef])
return (
<>