Fix frozen unknown device ID for new accounts (#11449)

src/analytics/identifiers/device.ts

@@ -1,3 +1,4 @@
+import {useSyncExternalStore} from 'react'
 import uuid from 'react-native-uuid'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
@@ -24,3 +25,23 @@ export function getDeviceIdOrThrow() {
   }
   return id
 }
+
+function subscribeToDeviceId(onChange: () => void) {
+  const sub = device.addOnValueChangedListener(['deviceId'], onChange)
+  return () => sub.remove()
+}
+
+/**
+ * Reads the device ID for use during render. The app awaits
+ * `getAndMigrateDeviceId` before booting (see `setupDeviceId` in
+ * `analytics/index.tsx`), so this is normally set on first read.
+ *
+ * Subscribing rather than reading storage directly means a late write - a
+ * caller that mounts before the migration resolves - still propagates, instead
+ * of leaving consumers pinned to `undefined` for the lifetime of the component.
+ * `useSyncExternalStore` re-evaluates the snapshot every render, so there's no
+ * gap between the initial read and the subscription.
+ */
+export function useDeviceId() {
+  return useSyncExternalStore(subscribeToDeviceId, getDeviceId)
+}