diff --git a/backend/api/src/get-connection-interests.ts b/backend/api/src/get-connection-interests.ts
index 1971fa84..1fd43f38 100644
--- a/backend/api/src/get-connection-interests.ts
+++ b/backend/api/src/get-connection-interests.ts
@@ -27,7 +27,7 @@ export const getConnectionInterests = async (props: any, userId: string) => {
     [userId, targetUserId],
   )
   const interests = _interests.map((i: {connection_type: string}) => i.connection_type) ?? []
-  console.log({_interests, interests})
+  // debug({_interests, interests})
 
   // Get what connection interest they have with me (filtering out the ones I haven't expressed interest in
   // so it's risk-free to express interest in them)
diff --git a/common/src/geodb.ts b/common/src/geodb.ts
index cd7d588b..89b29ab6 100644
--- a/common/src/geodb.ts
+++ b/common/src/geodb.ts
@@ -41,7 +41,6 @@ export function getLocationText(
   const city = profile[`${prefix}city` as keyof ProfileRow]
   const country = profile[`${prefix}country` as keyof ProfileRow]
   const regionCode = profile[`${prefix}region_code` as keyof ProfileRow]
-  console.log({city, country, regionCode})
 
   const stateOrCountry = country === 'United States of America' ? regionCode : country
 
diff --git a/common/src/profiles/og-image.ts b/common/src/profiles/og-image.ts
index da1dd3d0..4e9c9302 100644
--- a/common/src/profiles/og-image.ts
+++ b/common/src/profiles/og-image.ts
@@ -34,7 +34,6 @@ export function getProfileOgImageUrl(
   profile?: Profile | null,
   // choicesIdsToLabels?: Record<string, any> | null,
 ) {
-  console.log({profile})
   const headline =
     profile?.headline ||
     parseJsonContentToText(profile?.bio as JSONContent) ||
diff --git a/common/src/util/promise.ts b/common/src/util/promise.ts
index f40eee38..09165598 100644
--- a/common/src/util/promise.ts
+++ b/common/src/util/promise.ts
@@ -1,3 +1,5 @@
+import {debug} from 'common/logger'
+
 export type RetryPolicy = {
   initialBackoffSec: number
   retries: number
@@ -17,7 +19,7 @@ export async function withRetries<T>(q: PromiseLike<T>, policy?: RetryPolicy) {
     } catch (e) {
       err = e as Error
       if (i < maxRetries) {
-        console.debug(`Error: ${err.message} - Retrying in ${delaySec}s.`)
+        debug(`Error: ${err.message} - Retrying in ${delaySec}s.`)
         await delay(delaySec * 1000)
         delaySec *= 2
       }
diff --git a/web/components/add-option-entry.tsx b/web/components/add-option-entry.tsx
index 7b4c4196..c56fd47f 100644
--- a/web/components/add-option-entry.tsx
+++ b/web/components/add-option-entry.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import {debug} from 'common/logger'
 import {OptionTableKey} from 'common/profiles/constants'
 import {ProfileWithoutUser} from 'common/profiles/profile'
 import {invert} from 'lodash'
@@ -28,7 +29,7 @@ export function AddOptionEntry(props: {
         selected={(profile[label] ?? []).map((s) => String(s))}
         onChange={(selected) => setProfile(label, selected as string[] | undefined)}
         addOption={(v: string) => {
-          console.log(`Adding ${label}:`, v)
+          debug(`Adding ${label}:`, v)
           setChoices((prev: string[]) => ({...prev, [v]: v}))
           setProfile(label, [...(profile[label] ?? []), v])
           return {key: v, value: v}
diff --git a/web/components/email-verification-button.tsx b/web/components/email-verification-button.tsx
index a4e9941c..a4bc68e9 100644
--- a/web/components/email-verification-button.tsx
+++ b/web/components/email-verification-button.tsx
@@ -1,3 +1,4 @@
+import {debug} from 'common/logger'
 import toast from 'react-hot-toast'
 import {Button} from 'web/components/buttons/button'
 import {Col} from 'web/components/layout/col'
@@ -20,7 +21,7 @@ export function EmailVerificationButton() {
     if (firebaseUser.emailVerified) {
       // IMPORTANT: force a new ID token with updated claims
       await firebaseUser.getIdToken(true)
-      console.log('User email verified')
+      debug('User email verified')
       return true
     } else {
       toast.error(t('settings.email.not_verified', 'Email still not verified...'))
diff --git a/web/components/profile/connect-actions.tsx b/web/components/profile/connect-actions.tsx
index f046e88a..f7b99aa1 100644
--- a/web/components/profile/connect-actions.tsx
+++ b/web/components/profile/connect-actions.tsx
@@ -44,7 +44,7 @@ export function ConnectActions(props: {profile: Profile; user: User}) {
       const result = await api('get-connection-interests', {
         targetUserId: user.id,
       })
-      console.log('Preferences:', result)
+      // debug('Preferences:', result)
       setInterests(result.interests)
       setTargetInterests(result.targetInterests)
     } catch (e) {
@@ -139,6 +139,7 @@ export function ConnectActions(props: {profile: Profile; user: User}) {
 
                   return (
                     <Tooltip
+                      key={'connection-type-key-' + type}
                       text={
                         isDisabled &&
                         t('profile.not_both_open_to_type', 'You are not both open to a {type}', {
@@ -147,7 +148,6 @@ export function ConnectActions(props: {profile: Profile; user: User}) {
                       }
                     >
                       <button
-                        key={type}
                         disabled={isDisabled}
                         onClick={() => handleInterestChange(type, !isSelected)}
                         className={`
diff --git a/web/components/profile/delete-account-survey-modal.tsx b/web/components/profile/delete-account-survey-modal.tsx
index 8670c8a8..d863593e 100644
--- a/web/components/profile/delete-account-survey-modal.tsx
+++ b/web/components/profile/delete-account-survey-modal.tsx
@@ -111,7 +111,7 @@ export function DeleteAccountSurveyModal() {
         )
         .catch(() => {
           setDeleteError(t('delete_survey.error_saving_reason', 'Error deleting account'))
-          console.log('Failed to delete account')
+          console.error('Failed to delete account')
         })
 
       return true
diff --git a/web/components/widgets/visibility-observer.tsx b/web/components/widgets/visibility-observer.tsx
index d3b623d8..ff2d802d 100644
--- a/web/components/widgets/visibility-observer.tsx
+++ b/web/components/widgets/visibility-observer.tsx
@@ -29,9 +29,9 @@ export function LoadMoreUntilNotVisible(props: {
   const {loadMore} = props
   const isVisibleRef = useRef(false)
   const loadMoreIfVisible = useEvent(async () => {
-    console.log('loadMoreIfVisible called')
+    // debug('loadMoreIfVisible called')
     if (isVisibleRef.current && loadMore) {
-      console.log('loadMore calling')
+      // debug('loadMore calling')
       await loadMore()
       // const hasMoreResults = await loadMore()
       // if (hasMoreResults) {
diff --git a/web/hooks/use-choices.ts b/web/hooks/use-choices.ts
index 750a944a..d0118d61 100644
--- a/web/hooks/use-choices.ts
+++ b/web/hooks/use-choices.ts
@@ -50,7 +50,7 @@ export const useChoices = (label: OptionTableKey) => {
   }
 
   useEffect(() => {
-    console.log('Fetching choices in use effect...')
+    // debug('Fetching choices in use effect...')
     refreshChoices()
   }, [locale])
 
diff --git a/web/hooks/use-events.ts b/web/hooks/use-events.ts
index 9f90517f..465905a1 100644
--- a/web/hooks/use-events.ts
+++ b/web/hooks/use-events.ts
@@ -1,5 +1,6 @@
 'use client'
 
+import {debug} from 'common/logger'
 import {useEffect, useState} from 'react'
 import {api} from 'web/lib/api'
 
@@ -41,7 +42,7 @@ export const useEvents = () => {
     try {
       if (showLoading) setLoading(true)
       const data = await api('get-events', {})
-      console.log('Fetched events', data)
+      debug('Fetched events', data)
       setEvents(data)
       setError(null)
     } catch (err) {
diff --git a/web/hooks/use-profile-draft.ts b/web/hooks/use-profile-draft.ts
index fc889fc6..c41652b0 100644
--- a/web/hooks/use-profile-draft.ts
+++ b/web/hooks/use-profile-draft.ts
@@ -1,3 +1,4 @@
+import {debug} from 'common/logger'
 import {ProfileWithoutUser} from 'common/profiles/profile'
 import {useCallback, useEffect, useState} from 'react'
 
@@ -45,7 +46,6 @@ export const useProfileDraft = (
   )
 
   useEffect(() => {
-    console.log({profile})
     if (profile && Object.keys(profile).length > 0) {
       debouncedSaveProfile(profile)
     }
@@ -65,7 +65,7 @@ export const useProfileDraft = (
             const twentyFourHoursInMs = 24 * 60 * 60 * 1000
 
             if (now - savedTime > twentyFourHoursInMs) {
-              console.log('Skipping profile update: saved data is older than 24 hours')
+              debug('Skipping profile update: saved data is older than 24 hours')
               return
             }
           }
@@ -74,7 +74,7 @@ export const useProfileDraft = (
           Object.entries(savedProfile).forEach(([key, value]) => {
             const typedKey = key as keyof ProfileWithoutUser
             if (value !== profile[typedKey]) {
-              console.log(key, value)
+              debug(key, value)
               setProfile(typedKey, value)
               if (typedKey === 'height_in_inches' && updateHeight) {
                 updateHeight(value as number)
diff --git a/web/hooks/use-user-supabase.ts b/web/hooks/use-user-supabase.ts
index dd44343f..35d609fe 100644
--- a/web/hooks/use-user-supabase.ts
+++ b/web/hooks/use-user-supabase.ts
@@ -20,7 +20,7 @@ export function useUserById(userId: string | undefined) {
           setUser(result)
         })
         .catch(() => {
-          console.log('Failed to fetch user')
+          console.error('Failed to fetch user')
         })
     }
   }, [userId])
diff --git a/web/hooks/use-user.ts b/web/hooks/use-user.ts
index 7fc7a2c0..8f51602f 100644
--- a/web/hooks/use-user.ts
+++ b/web/hooks/use-user.ts
@@ -54,7 +54,7 @@ export const useWebsocketUser = (userId: string | undefined) => {
           setUser(result)
         })
         .catch(() => {
-          console.log('Failed to fetch user')
+          console.error('Failed to fetch user')
           setUser(null)
         })
     } else {
diff --git a/web/lib/firebase/password.ts b/web/lib/firebase/password.ts
index 7b023b86..789e1520 100644
--- a/web/lib/firebase/password.ts
+++ b/web/lib/firebase/password.ts
@@ -18,6 +18,6 @@ export const sendPasswordReset = async (email: string | undefined) => {
         toast.error('No account found with that email.')
         return
       }
-      console.log('Failed to send password reset email', e)
+      console.error('Failed to send password reset email', e)
     })
 }
diff --git a/web/lib/firebase/users.ts b/web/lib/firebase/users.ts
index 0d0bbf63..40e1064a 100644
--- a/web/lib/firebase/users.ts
+++ b/web/lib/firebase/users.ts
@@ -2,6 +2,7 @@ import {Capacitor} from '@capacitor/core'
 import {SocialLogin} from '@capgo/capacitor-social-login'
 import {GOOGLE_CLIENT_ID} from 'common/constants'
 import {IS_FIREBASE_EMULATOR} from 'common/envs/constants'
+import {debug} from 'common/logger'
 import {type User} from 'common/user'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
@@ -86,8 +87,8 @@ export function writeReferralInfo(
  * @public
  */
 export async function googleNativeLogin() {
-  console.log('Platform:', Capacitor.getPlatform())
-  console.log('URL origin:', window.location.origin)
+  debug('Platform:', Capacitor.getPlatform())
+  debug('URL origin:', window.location.origin)
 
   await SocialLogin.initialize({google: {webClientId: GOOGLE_CLIENT_ID}})
 
@@ -97,7 +98,7 @@ export async function googleNativeLogin() {
     options: {},
   })
 
-  console.log('SocialLogin.login result:', JSON.stringify(result))
+  debug('SocialLogin.login result:', JSON.stringify(result))
 
   // Extract the tokens from the native result
   const idToken = result?.idToken
@@ -113,17 +114,17 @@ export async function googleNativeLogin() {
   // Sign in with Firebase using the credential
   const userCredential = await signInWithCredential(auth, credential)
 
-  console.log('Firebase user:', userCredential.user)
+  debug('Firebase user:', userCredential.user)
 
   return userCredential
 }
 
 export async function firebaseLogin() {
   if (isAndroidApp()) {
-    console.log('Running in APK')
+    debug('Running in APK')
     return await googleNativeLogin()
   }
-  console.log('Running in web')
+  debug('Running in web')
   const provider = new GoogleAuthProvider()
   return signInWithPopup(auth, provider).then(async (result) => {
     return result
diff --git a/web/lib/service/android-push.ts b/web/lib/service/android-push.ts
index efedd7a7..0a96a3a4 100644
--- a/web/lib/service/android-push.ts
+++ b/web/lib/service/android-push.ts
@@ -1,4 +1,5 @@
 import {PushNotifications} from '@capacitor/push-notifications'
+import {debug} from 'common/logger'
 import {useRouter} from 'next/router'
 import {useEffect} from 'react'
 import {useUser} from 'web/hooks/use-user'
@@ -11,31 +12,31 @@ export default function AndroidPush() {
   const router = useRouter()
   useEffect(() => {
     if (!user?.id || !isAndroid) return
-    console.log('AndroidPush', user)
+    debug('AndroidPush', user)
 
     PushNotifications.requestPermissions().then((result) => {
       if (result.receive !== 'granted') {
-        console.log('Push notifications not granted')
+        debug('Push notifications not granted')
         return
       }
       PushNotifications.register()
-      console.log('Push registered')
+      debug('Push registered')
     })
 
     PushNotifications.addListener('registration', async (token) => {
-      console.log('Device token:', token.value)
+      debug('Device token:', token.value)
       try {
         const {data} = await api('save-subscription-mobile', {
           token: token.value,
         })
-        console.log('Mobile subscription saved:', data)
+        debug('Mobile subscription saved:', data)
       } catch (err) {
         console.error('Failed saving android subscription', err)
       }
     })
 
     PushNotifications.addListener('pushNotificationReceived', (notif) => {
-      console.log('Push received', notif)
+      debug('Push received', notif)
       const url = notif?.data?.url
       if (url) {
         router.push(url)
diff --git a/web/lib/service/web-push.ts b/web/lib/service/web-push.ts
index 17a2bb40..a74d7e2c 100644
--- a/web/lib/service/web-push.ts
+++ b/web/lib/service/web-push.ts
@@ -1,3 +1,4 @@
+import {debug} from 'common/logger'
 import {urlBase64ToUint8Array} from 'common/util/parse'
 import {useEffect} from 'react'
 import {useUser} from 'web/hooks/use-user'
@@ -12,26 +13,26 @@ export default function WebPush() {
   const isWeb = typeof window !== 'undefined' && 'serviceWorker' in navigator && !isNativeMobile()
   useEffect(() => {
     if (!user?.id || !isWeb) return
-    console.log('WebPush', user)
+    debug('WebPush', user)
 
     const registerPush = async () => {
       navigator.serviceWorker
         .register('/service-worker.js')
         .then(async (registration) => {
-          console.log('Service worker registered:', registration)
+          debug('Service worker registered:', registration)
 
           // May need to ask for permission from a button the user clicks, per this error:
           // The Notification permission may only be requested from inside a short-running user-generated event handler.
           const permission = await Notification.requestPermission()
           if (permission !== 'granted') {
-            console.log('Notification permission denied')
+            debug('Notification permission denied')
             return
           }
 
           // Check if already subscribed
           const existing = await registration.pushManager.getSubscription()
           if (existing) {
-            console.log('Already subscribed:', existing)
+            debug('Already subscribed:', existing)
             return
           } // already subscribed
 
@@ -42,7 +43,7 @@ export default function WebPush() {
 
           // Send subscription to backend
           const {data} = await api('save-subscription', {subscription})
-          console.log('Subscription saved:', data)
+          debug('Subscription saved:', data)
         })
         .catch((err) => {
           console.error('SW registration failed:', err)
diff --git a/web/lib/util/copy.ts b/web/lib/util/copy.ts
index 90e8e84d..db26dad4 100644
--- a/web/lib/util/copy.ts
+++ b/web/lib/util/copy.ts
@@ -7,21 +7,17 @@
 // an administrator. By default a prompt is shown the first
 // time the clipboard is used (per session).
 
+import {debug} from 'common/logger'
+
 export function copyToClipboard(text: string) {
   if (navigator.clipboard) {
     navigator.clipboard.writeText(text)
-  } else if (
-    (window as any).clipboardData &&
-    (window as any).clipboardData.setData
-  ) {
-    console.debug('copy 2')
+  } else if ((window as any).clipboardData && (window as any).clipboardData.setData) {
+    debug('copy 2')
     // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
     return (window as any).clipboardData.setData('Text', text)
-  } else if (
-    document.queryCommandSupported &&
-    document.queryCommandSupported('copy')
-  ) {
-    console.debug('copy 3')
+  } else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+    debug('copy 3')
     const textarea = document.createElement('textarea')
     textarea.textContent = text
     textarea.style.position = 'fixed' // Prevent scrolling to bottom of page in Microsoft Edge.
diff --git a/web/lib/util/page-data.ts b/web/lib/util/page-data.ts
index 0a4952fa..32c2d390 100644
--- a/web/lib/util/page-data.ts
+++ b/web/lib/util/page-data.ts
@@ -1,4 +1,5 @@
 import {DEPLOYED_WEB_URL} from 'common/envs/constants'
+import {debug} from 'common/logger'
 
 const buildIdKey = 'vercel-buildId'
 
@@ -19,7 +20,7 @@ export const getPageData = async (route = '/') => {
     }
     const cleanRoute = route.startsWith('/') ? route.slice(1) : route
     const url = `${DEPLOYED_WEB_URL}/api/proxy-data?path=${buildId}/${cleanRoute || 'index'}.json`
-    console.log('Fetching data from:', url)
+    debug('Fetching data from:', url)
     const res = await fetch(url, {
       cache: 'force-cache',
     })
@@ -47,6 +48,6 @@ export const getPageData = async (route = '/') => {
   }
 
   const result = await res.json()
-  console.log('Fetched Page data:', result)
+  debug('Fetched Page data:', result)
   return result.pageProps
 }
diff --git a/web/pages/[username]/index.tsx b/web/pages/[username]/index.tsx
index 9a6411c3..6d1a0d52 100644
--- a/web/pages/[username]/index.tsx
+++ b/web/pages/[username]/index.tsx
@@ -54,7 +54,7 @@ export const getStaticProps = async (
     return {notFound: true}
   }
 
-  console.log('Starting getStaticProps in /[username]', username)
+  debug('Starting getStaticProps in /[username]', username)
 
   const {user, profile} = await getUserAndProfile(username)
 
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 177ff5ac..479c90d7 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -7,6 +7,7 @@ import {Keyboard} from '@capacitor/keyboard'
 import {StatusBar} from '@capacitor/status-bar'
 import clsx from 'clsx'
 import {IS_VERCEL} from 'common/hosting/constants'
+import {debug} from 'common/logger'
 import type {AppProps} from 'next/app'
 import {Major_Mono_Display} from 'next/font/google'
 import Head from 'next/head'
@@ -98,7 +99,7 @@ function MyApp(props: AppProps<PageProps>) {
   const [locale, setLocaleState] = useState<string>(getLocale())
   // console.log('_app locale', locale)
   const setLocale = (newLocale: string) => {
-    console.log('setLocale', newLocale)
+    debug('setLocale', newLocale)
     document.cookie = `lang=${newLocale}; path=/; max-age=31536000`
     setLocaleState(newLocale)
     resetCachedLocale()
@@ -108,7 +109,7 @@ function MyApp(props: AppProps<PageProps>) {
   }
 
   useEffect(() => {
-    console.log('isAndroidWebView app:', isAndroidApp())
+    debug('isAndroidWebView app:', isAndroidApp())
     if (!Capacitor.isNativePlatform()) return
     const onShow = () => document.body.classList.add('keyboard-open')
     const onHide = () => document.body.classList.remove('keyboard-open')
@@ -147,7 +148,7 @@ function MyApp(props: AppProps<PageProps>) {
 
   useEffect(() => {
     const bridgeRedirect = (payload: any) => {
-      console.log('bridgeRedirect', payload)
+      debug('bridgeRedirect', payload)
       const {endpoint} = payload
       router.push(endpoint)
     }
diff --git a/web/pages/api/og/profile.tsx b/web/pages/api/og/profile.tsx
index 78483569..71e26976 100644
--- a/web/pages/api/og/profile.tsx
+++ b/web/pages/api/og/profile.tsx
@@ -40,8 +40,6 @@ function OgProfile(props: ogProps) {
 
   const isLargerPicLayout = totalChars < maxChars
 
-  console.log(props)
-
   const imgSize = isLargerPicLayout ? 400 : 250
   return (
     <div
diff --git a/web/pages/compatibility.tsx b/web/pages/compatibility.tsx
index aa547eb1..e741757a 100644
--- a/web/pages/compatibility.tsx
+++ b/web/pages/compatibility.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import {debug} from 'common/logger'
 import {Row} from 'common/supabase/utils'
 import {User} from 'common/user'
 import {debounce} from 'lodash'
@@ -88,7 +89,7 @@ export default function CompatibilityPage() {
   useEffect(() => {
     if (user?.id) {
       Promise.all([refreshCompatibilityAnswers(), refreshCompatibilityQuestions()]).finally(() =>
-        console.log('refreshed compatibility'),
+        debug('refreshed compatibility'),
       )
     }
   }, [user?.id])
@@ -202,16 +203,16 @@ function QuestionList({
 
   // Reset pagination when the questions list changes (e.g., switching tabs or refreshed data)
   useEffect(() => {
-    console.log('resetting pagination')
+    debug('resetting pagination')
     setVisibleCount(BATCH_SIZE)
   }, [questions])
 
   const loadMore = useCallback(async () => {
-    console.log('start loadMore')
+    debug('start loadMore')
     if (visibleCount >= questions.length) return false
-    console.log('loading more', visibleCount)
+    debug('loading more', visibleCount)
     setVisibleCount((prev) => Math.min(prev + BATCH_SIZE, questions.length))
-    console.log('end loadMore')
+    debug('end loadMore')
     return true
   }, [visibleCount, questions.length])
 
diff --git a/web/pages/events.tsx b/web/pages/events.tsx
index 5ae2a17a..0f011062 100644
--- a/web/pages/events.tsx
+++ b/web/pages/events.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import {APIError} from 'common/api/utils'
+import {debug} from 'common/logger'
 import {useState} from 'react'
 import toast from 'react-hot-toast'
 import {Button} from 'web/components/buttons/button'
@@ -34,7 +35,7 @@ export default function EventsPage() {
     try {
       await api('rsvp-event', {eventId, status})
       refetch()
-      console.log('RSVPed to event', eventId)
+      debug('RSVPed to event', eventId)
     } catch (err) {
       if (err instanceof APIError) {
         toast.error(err.message)
@@ -53,7 +54,7 @@ export default function EventsPage() {
     try {
       await api('cancel-rsvp', {eventId})
       refetch()
-      console.log('Cancelled RSVP to event', eventId)
+      debug('Cancelled RSVP to event', eventId)
     } catch (err) {
       if (err instanceof APIError) {
         toast.error(err.message)
@@ -73,7 +74,7 @@ export default function EventsPage() {
       await api('cancel-event', {eventId})
       refetch()
       toast.success(t('events.event_cancelled', 'Event cancelled successfully!'))
-      console.log('Cancelled event', eventId)
+      debug('Cancelled event', eventId)
     } catch (err) {
       if (err instanceof APIError) {
         toast.error(err.message)
diff --git a/web/pages/messages/[channelId].tsx b/web/pages/messages/[channelId].tsx
index 16ee287e..6f8a5bd9 100644
--- a/web/pages/messages/[channelId].tsx
+++ b/web/pages/messages/[channelId].tsx
@@ -123,8 +123,6 @@ export const PrivateChat = (props: {
         }) as ChatMessage,
     ) ?? []
 
-  console.log(messages)
-
   const loadMoreMessages = useCallback(
     (beforeId: number) => {
       fetchMessages(undefined, beforeId)