From abe0ca521d2076fc3a98d45f4a308ee8b6eebf45 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 21 Apr 2026 15:16:26 -0700
Subject: [PATCH] Fix slow re-renders when toggling content languages (#10128)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/screens/Settings/LanguageSettings.tsx | 31 ++++++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx
index 4ec3723c29..3421ef805b 100644
--- a/src/screens/Settings/LanguageSettings.tsx
+++ b/src/screens/Settings/LanguageSettings.tsx
@@ -34,6 +34,23 @@ export function LanguageSettingsScreen({}: Props) {
   const langPrefs = useLanguagePrefs()
   const setLangPrefs = useLanguagePrefsApi()
 
+  // changing langPrefs causes a slow re-render, so we use a local state copy
+  // and update that first to drive the UI on this screen to keep it snappy
+  const [contentLanguages, _setContentLanguages] = useState(
+    langPrefs.contentLanguages,
+  )
+  const setContentLanguages = useCallback(
+    (languages: string[]) => {
+      _setContentLanguages(languages)
+      // TODO: try using startTransition/useOptimistic when we switch to New Arch
+      // Old arch doesn't support concurrent react features so use rAF instead
+      requestAnimationFrame(() => {
+        setLangPrefs.setContentLanguages(languages)
+      })
+    },
+    [setLangPrefs],
+  )
+
   const contentLanguagePrefsControl = useDialogControl()
 
   const onChangePrimaryLanguage = useCallback(
@@ -64,13 +81,13 @@ export function LanguageSettingsScreen({}: Props) {
     return [
       ...new Set([
         ...recentLanguages,
-        ...langPrefs.contentLanguages,
+        ...contentLanguages,
         ...langPrefs.primaryLanguage,
       ]),
     ]
       .map(lang => LANGUAGES.find(l => l.code2 === lang))
       .filter(x => !!x)
-  }, [recentLanguages, langPrefs.contentLanguages, langPrefs.primaryLanguage])
+  }, [recentLanguages, contentLanguages, langPrefs.primaryLanguage])
 
   return (
     <Layout.Screen testID="PreferencesLanguagesScreen">
@@ -167,7 +184,7 @@ export function LanguageSettingsScreen({}: Props) {
                 </Trans>
               </Text>
 
-              {langPrefs.contentLanguages.length === 0 && (
+              {contentLanguages.length === 0 && (
                 <Admonition type="info">
                   <Trans>All languages will be shown in your feeds.</Trans>
                 </Admonition>
@@ -176,8 +193,8 @@ export function LanguageSettingsScreen({}: Props) {
               <View style={[a.w_full, web({maxWidth: 400})]}>
                 <Toggle.Group
                   label={_(msg`Select content languages`)}
-                  values={langPrefs.contentLanguages}
-                  onChange={setLangPrefs.setContentLanguages}>
+                  values={contentLanguages}
+                  onChange={setContentLanguages}>
                   <Toggle.PanelGroup>
                     {possibleLanguages.map((language, index) => {
                       const name = languageName(language, langPrefs.appLanguage)
@@ -220,9 +237,9 @@ export function LanguageSettingsScreen({}: Props) {
                     feeds.
                   </Trans>
                 }
-                currentLanguages={langPrefs.contentLanguages}
+                currentLanguages={contentLanguages}
                 onSelectLanguages={languages => {
-                  setLangPrefs.setContentLanguages(languages)
+                  setContentLanguages(languages)
                   setRecentLanguages(recent => [
                     ...new Set([...recent, ...languages]),
                   ])