refactor: use callback inside useFocusEffect to reduce rerender

src/hooks/useHandleBackButton/index.android.ts

@@ -1,11 +1,13 @@
 import {useFocusEffect} from '@react-navigation/native';
+import {useCallback} from 'react';
 import {BackHandler} from 'react-native';
 import type UseHandleBackButtonCallback from './type';
 
 export default function useHandleBackButton(callback: UseHandleBackButtonCallback) {
-    useFocusEffect(() => {
-        const backHandler = BackHandler.addEventListener('hardwareBackPress', callback);
-
-        return () => backHandler.remove();
-    });
+    useFocusEffect(
+        useCallback(() => {
+            const backHandler = BackHandler.addEventListener('hardwareBackPress', callback);
+            return () => backHandler.remove();
+        }, [callback]),
+    );
 }

src/pages/Search/SearchPageNarrow.tsx

@@ -13,7 +13,7 @@ import {useSearchContext} from '@components/Search/SearchContext';
 import SearchPageHeader from '@components/Search/SearchPageHeader/SearchPageHeader';
 import SearchStatusBar from '@components/Search/SearchPageHeader/SearchStatusBar';
 import type {SearchQueryJSON} from '@components/Search/types';
-import useHandleBackButton from '@hooks//useHandleBackButton';
+import useHandleBackButton from '@hooks/useHandleBackButton';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';