From 795994800549ecbee5a9d493a657dc9beb448491 Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Wed, 27 May 2026 16:20:43 +0800
Subject: [PATCH] fix(studio): make useTrack stable across renders (#46412)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to #46140 — the returned `track` function was re-created on
every router change or selected project/org refetch, which made it
unstable for consumers that depend on referential equality (e.g. effect
deps, memoized children).

**Changed:**
- Read `project?.ref`, `org?.slug`, and `router.pathname` through
`useLatest` so the values inside `track` stay current without being deps
of the `useCallback`
- Drop the deps from the `useCallback` — `track` is now stable for the
lifetime of the component

## To test

- Verify telemetry events still send with correct `project` /
`organization` groups and `pathname`
- Confirm any consumers that put `track` in `useEffect` deps no longer
re-run unnecessarily on route or project changes

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

## Summary by CodeRabbit

* **Refactor**
* Improved telemetry event tracking to capture more accurate context
information at the time events are sent, ensuring data reflects current
application state.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46412?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
---
 apps/studio/lib/telemetry/track.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/studio/lib/telemetry/track.ts b/apps/studio/lib/telemetry/track.ts
index ae76d33bd4c..43dd260cb5f 100644
--- a/apps/studio/lib/telemetry/track.ts
+++ b/apps/studio/lib/telemetry/track.ts
@@ -3,6 +3,7 @@ import { TelemetryEvent, TelemetryGroups } from 'common/telemetry-constants'
 import { useRouter } from 'next/router'
 import { useCallback } from 'react'
 
+import useLatest from '@/hooks/misc/useLatest'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { API_URL } from '@/lib/constants'
@@ -32,6 +33,12 @@ export const useTrack = () => {
   const { data: org } = useSelectedOrganizationQuery()
   const router = useRouter()
 
+  const latest = useLatest({
+    projectRef: project?.ref,
+    orgSlug: org?.slug,
+    pathname: router.pathname,
+  })
+
   const track = useCallback(
     <A extends keyof EventMap>(
       action: A,
@@ -39,11 +46,12 @@ export const useTrack = () => {
         ? [properties: PropertiesForAction<A>, groupOverrides?: Partial<TelemetryGroups>]
         : [properties?: undefined, groupOverrides?: Partial<TelemetryGroups>]
     ) => {
+      const { projectRef, orgSlug, pathname } = latest.current
       const [properties, groupOverrides] = args
 
       const groups = {
-        ...(project?.ref && { project: project.ref }),
-        ...(org?.slug && { organization: org.slug }),
+        ...(projectRef && { project: projectRef }),
+        ...(orgSlug && { organization: orgSlug }),
         ...groupOverrides,
       }
 
@@ -53,9 +61,9 @@ export const useTrack = () => {
         ...(groups && { groups }),
       } as EventMap[A]
 
-      sendTelemetryEvent(API_URL, event, router.pathname)
+      sendTelemetryEvent(API_URL, event, pathname)
     },
-    [project?.ref, org?.slug, router.pathname]
+    []
   )
 
   return track