add useMemo for profile and notification

frontend/app/(app)/(tabs)/explore.tsx

@@ -216,7 +216,7 @@ export default function Explore() {
   };
 
   return (
-    <SafeAreaView className="h-screen w-screen">
+    <SafeAreaView className="h-screen w-screen bg-white">
       {selectedCategory === 'Map' && renderMapPage()}
       <View className="w-full px-[5%] z-10">
         <View className="mb-2 bg-[#FFFFFF] rounded-full">

frontend/app/(app)/(tabs)/notification.tsx

@@ -1,5 +1,5 @@
 import { useFocusEffect } from 'expo-router';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FlatList, SafeAreaView, SectionList, Text, View } from 'react-native';
 import { useAuthStore } from '../../../auth/authStore';
 import NotificationEntry from '../../../components/notification/notification';
@@ -17,12 +17,16 @@ const Notification = () => {
     data,
     isLoading,
     error,
-    refetch,
+    refetch: originalRefetch,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
   } = useUserNotification(mongoDBId || '');
 
+  const refetch = useCallback(() => {
+    originalRefetch();
+  }, [originalRefetch]);
+
   useFocusEffect(
     useCallback(() => {
       refetch();

frontend/app/(app)/user/[id].tsx

@@ -1,10 +1,26 @@
 import React from 'react';
-import { useLocalSearchParams } from 'expo-router';
+import { router, Stack, useLocalSearchParams } from 'expo-router';
 import User from './components/user-profile';
+import Arrow from '../../../components/arrow';
 
 const Profile = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
-  return <User id={id} />;
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: '',
+          headerTransparent: true,
+          headerShown: true,
+          headerLeft: () => (
+            <Arrow direction="left" onPress={() => router.back()} />
+          ),
+        }}
+      />
+      <User id={id} />
+    </>
+  );
 };
 
 export default Profile;

frontend/app/(app)/user/components/menu.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Dimensions,
   FlatList,
@@ -66,15 +66,15 @@ const Menu = ({ id }: { id: string }) => {
     refetch: refetchSpecies,
   } = useUserSpecies(id);
 
+  const memoizedRefetch = useMemo(() => {
+    return category === 'Dives' ? refetchDivelog : refetchSpecies;
+  }, [category, refetchDivelog, refetchSpecies]);
+
   useFocusEffect(
     useCallback(() => {
       console.log(`Refetching ${category} data`);
-      if (category === 'Dives') {
-        refetchDivelog();
-      } else if (category === 'Species') {
-        refetchSpecies();
-      }
-    }, [refetchDivelog, refetchSpecies, category]),
+      memoizedRefetch();
+    }, [memoizedRefetch, category]),
   );
 
   const diveLogData = diveLogPages?.pages.flatMap((page) => page) ?? [];

frontend/app/(app)/user/components/user-profile.tsx

@@ -29,17 +29,6 @@ const User = ({ id }: { id: string }) => {
       colors={['#549ac7', '#ffffff', '#ffffff', '#ffffff']}
       style={{ flex: 1 }}
     >
-      <Stack.Screen
-        options={{
-          headerTitle: '',
-          headerTransparent: true,
-          headerShown: true,
-          headerLeft: () =>
-            !isViewingOwnProfile ? (
-              <Arrow direction="left" onPress={() => router.back()} />
-            ) : null,
-        }}
-      />
       <SafeAreaView
         edges={['top', 'left', 'right']}
         className="flex flex-1 mt-[10%]"