Run courses refresh only when Courses tab is focused

Views/Courses.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { Searchbar, Title } from 'react-native-paper';
 import { ScrollView, ActivityIndicator, StyleSheet, SafeAreaView, View } from 'react-native';
+import { useIsFocused } from "@react-navigation/native";
 import API from "../API";
 import CourseCard from "../components/CourseCard";
 import { useSnapshot } from 'valtio';
@@ -147,6 +148,7 @@ const getCoursesCache = async () => {
 const Courses = () => {
     const gState = useSnapshot(GlobalState);
     const viewer = gState.me;
+    const isFocused = useIsFocused();
     const [searchQuery, setSearchQuery] = React.useState('');
     const [groups, setGroups] = React.useState([]);
     const [popular, setPopular] = React.useState([]);
@@ -154,6 +156,7 @@ const Courses = () => {
     const [queryTimer, setQueryTimer] = React.useState(0);
 
     useEffect(() => {
+        if (!isFocused) return;
         let subscribed = true;
         const getData = async () => {
             const cached = await getCoursesCache();
@@ -184,7 +187,7 @@ const Courses = () => {
         return () => {
             subscribed = false;
         }
-    }, [viewer])
+    }, [isFocused, viewer?._id])
 
     const onChangeSearch = query => {
         setSearchQuery(query);