Call useTranslate once and pass down translate function

src/components/Post/Translated/index.tsx

@@ -4,6 +4,7 @@ import {Trans, useLingui} from '@lingui/react/macro'
 
 import {HITSLOP_30} from '#/lib/constants'
 import {useTranslate} from '#/lib/translation'
+import {type TranslationFunction} from '#/lib/translation/types'
 import {codeToLanguageName, languageName} from '#/locale/helpers'
 import {LANGUAGES} from '#/locale/languages'
 import {useLanguagePrefs} from '#/state/preferences'
@@ -21,7 +22,7 @@ export function TranslatedPost({
   translationKey: string
   postText: string
 }) {
-  const {translationState} = useTranslate({key: translationKey})
+  const {translate, translationState} = useTranslate({key: translationKey})
 
   if (translationState.status === 'loading') {
     return <TranslationLoading />
@@ -30,7 +31,7 @@ export function TranslatedPost({
   if (translationState.status === 'success') {
     return (
       <TranslationResult
-        translationKey={translationKey}
+        translate={translate}
         postText={postText}
         sourceLanguage={translationState.sourceLanguage}
         translatedText={translationState.translatedText}
@@ -57,12 +58,12 @@ function TranslationLoading() {
 }
 
 function TranslationResult({
-  translationKey,
+  translate,
   postText,
   sourceLanguage,
   translatedText,
 }: {
-  translationKey: string
+  translate: TranslationFunction
   postText: string
   sourceLanguage: string | null
   translatedText: string
@@ -92,7 +93,7 @@ function TranslationResult({
             </Text>
             <TranslationLanguageSelect
               sourceLanguage={sourceLanguage}
-              translationKey={translationKey}
+              translate={translate}
               postText={postText}
             />
           </>
@@ -106,18 +107,17 @@ function TranslationResult({
 }
 
 function TranslationLanguageSelect({
-  translationKey,
+  translate,
   postText,
   sourceLanguage,
 }: {
-  translationKey: string
+  translate: TranslationFunction
   postText: string
   sourceLanguage: string
 }) {
   const ax = useAnalytics()
   const {t: l} = useLingui()
   const langPrefs = useLanguagePrefs()
-  const {translate} = useTranslate({key: translationKey})
 
   const items = useMemo(
     () =>

src/lib/translation/context.ts

@@ -1,28 +1,14 @@
 import {createContext} from 'react'
 
-import {type TranslationState} from './types'
+import {type TranslationFunctionParams, type TranslationState} from './types'
 
 export const Context = createContext<{
   translationState: Record<string, TranslationState>
-  translate: (parameters: {
-    key: string
-    /**
-     * The text to be translated.
-     */
-    text: string
-    /**
-     * The language to translate the text into.
-     */
-    targetLangCode: string
-    /**
-     * The source language of the text. Will auto-detect if not provided.
-     */
-    sourceLangCode?: string
-    /**
-     * Whether to force the use of Google Translate. Default is false.
-     */
-    forceGoogleTranslate?: boolean
-  }) => Promise<void>
+  translate: (
+    parameters: TranslationFunctionParams & {
+      key: string
+    },
+  ) => Promise<void>
   clearTranslation: (key: string) => void
   acquireTranslation: (key: string) => () => void
 } | null>(null)

src/lib/translation/index.tsx

@@ -8,7 +8,7 @@ import {useGoogleTranslate} from '#/lib/hooks/useGoogleTranslate'
 import {logger} from '#/logger'
 import {useAnalytics} from '#/analytics'
 import {Context} from './context'
-import {type TranslationState} from './types'
+import {type TranslationFunctionParams, type TranslationState} from './types'
 
 /**
  * Attempts on-device translation via @bsky.app/expo-translate-text.
@@ -94,12 +94,7 @@ export function useTranslate({key}: {key: string}) {
   )
 
   const translate = useCallback(
-    async (params: {
-      text: string
-      targetLangCode: string
-      sourceLangCode?: string
-      forceGoogleTranslate?: boolean
-    }) => {
+    async (params: TranslationFunctionParams) => {
       return context.translate({...params, key})
     },
     [key, context],

src/lib/translation/types.ts

@@ -9,3 +9,26 @@ export type TranslationState =
       sourceLanguage: TranslationTaskResult['sourceLanguage']
       targetLanguage: TranslationTaskResult['targetLanguage']
     }
+
+export type TranslationFunctionParams = {
+  /**
+   * The text to be translated.
+   */
+  text: string
+  /**
+   * The language to translate the text into.
+   */
+  targetLangCode: string
+  /**
+   * The source language of the text. Will auto-detect if not provided.
+   */
+  sourceLangCode?: string
+  /**
+   * Whether to force the use of Google Translate. Default is false.
+   */
+  forceGoogleTranslate?: boolean
+}
+
+export type TranslationFunction = (
+  parameters: TranslationFunctionParams,
+) => Promise<void>