Refactor again

template/src/hooks/use-invalidate-queries-on-language-change.ts

@@ -0,0 +1,21 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function useInvalidateQueriesOnLanguageChange() {
+  const { i18n } = useTranslation();
+  const languageRef = useRef(i18n.language);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (i18n.language === languageRef.current) {
+      return;
+    }
+
+    // Evict everything from the cache but don't refetch anything. Queries will
+    // be refetched when they become "enabled" when their screen gains focus.
+    queryClient.invalidateQueries({
+      refetchType: 'none',
+    });
+  }, [queryClient, i18n.language]);
+}

template/src/navigation/RootNavigator.tsx

@@ -4,9 +4,7 @@ import {
   NativeStackNavigationProp,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
-import React, { useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
 import { HomeScreen } from '../screens/Home';
 import { ExampleBottomSheet } from '~/screens/bottom-sheets/ExampleBottomSheet';
 import { SecretConfigScreen } from '~/screens/SecretConfig';
@@ -26,26 +24,10 @@ export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
 function RootNavigator() {
-  const { i18n } = useTranslation();
-  const languageRef = useRef(i18n.language);
-  const queryClient = useQueryClient();
-
   const secretPanelEnabled = useApplicationConfiguration(
     'SECRET_PANEL_ENABLED'
   );
 
-  useEffect(() => {
-    if (i18n.language === languageRef.current) {
-      return;
-    }
-
-    // Evict everything from the cache but don't refetch anything. Queries will
-    // be refetched when they become "enabled" when their screen gains focus.
-    queryClient.invalidateQueries({
-      refetchType: 'none',
-    });
-  }, [queryClient, i18n.language]);
-
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="Home" component={HomeScreen} />

template/src/navigation/index.tsx

@@ -10,14 +10,18 @@ import { useColorSchemeValue } from '~/hooks/use-color-scheme-value';
 import { useKillswitch } from '~/hooks/use-killswitch';
 import { useSetQueryFocusManager } from '~/hooks/use-set-query-focus-manager';
 import { useSetQueryOnlineManager } from '~/hooks/use-set-query-online-manager';
+import { useInvalidateQueriesOnLanguageChange } from '~/hooks/use-invalidate-queries-on-language-change';
 
 function Navigation() {
   const theme = useColorSchemeValue([DefaultTheme, DarkTheme]);
 
   useKillswitch();
+
   useSetQueryFocusManager();
   useSetQueryOnlineManager();
 
+  useInvalidateQueriesOnLanguageChange();
+
   return (
     <NavigationContainer
       theme={theme}