Last update to useEffect methods

Views/Courses.js

@@ -77,7 +77,9 @@ const Courses = () => {
     const [watching, setWatching] = React.useState([]);
     const [queryTimer, setQueryTimer] = React.useState(0);
 
-    useEffect(async () => {
+    useEffect(() => {
+        let subscribed = true;
+        const getData = async () => {
             await getCoursesCache().then((r) => {
                 console.log("Courses Cache");
                 setGroups(r.courses || []);
@@ -86,10 +88,17 @@ const Courses = () => {
             });
             let r = await getCourses(viewer);
             console.log("Courses Live");
+            if(subscribed){
                 setGroups(r.courses || []);
                 setPopular(r.popular || []);
                 setWatching(r.watching || []);
+            }
             storeCoursesCache(r);
+        };
+        getData();
+        return () => {
+            subscribed = false;
+        }
     }, [])
 
     const onChangeSearch = query => {

Views/Groups.js

@@ -1,10 +1,8 @@
 import React, { useEffect } from "react";
 import { Searchbar } from 'react-native-paper';
-import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from "../API";
-import UserName from "../components/UserName";
 import GroupCard from "../components/GroupCard";
-import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
 
 const Groups = () => {
     const [searchQuery, setSearchQuery] = React.useState('');
@@ -12,9 +10,14 @@ const Groups = () => {
     const [queryTimer, setQueryTimer] = React.useState(0);
 
     useEffect(() => {
+        let subscribed = true;
         API.getRecentGroups('').then((data) => {
+            if (subscribed)
                 setGroups(data.groups || []);
         });
+        return () => {
+            subscribed = false;
+        }
     }, [])
 
 

Views/Search.js

@@ -12,9 +12,14 @@ const Search = () => {
     const [queryTimer, setQueryTimer] = React.useState(0);
 
     useEffect(() => {
+        let subscribed = true;
         API.searchProfiles('').then((data) => {
+            if (subscribed)
                 setProfiles(data.profiles || []);
         });
+        return () => {
+            subscribed = false;
+        }
     }, [])
 
     const onChangeSearch = query => {

components/CourseCard.js

@@ -31,13 +31,20 @@ let CourseCard = ({ profileid, hideIcon, profileObj }) => {
     let [profile, setProfile] = useState(profileObj || {});
     const navigation = useNavigation();
 
-    useEffect(async () => {
+    useEffect(() => {
+        let subscribed = true;
+        const getData = async () => {
             if (profileObj._id) return 0;
             let cacheProfile = await getName(profileid);
             if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
             let p = await API.getUserProfile(profileid).catch(() => { return {} });
-        setProfile(p);
+            if(subscribed) setProfile(p);
-        storeName(profileid, p)
+            storeName(profileid, p);
+        }
+        getData();
+        return () => {
+            subscribed = false;
+        }
     }, [profileid]);
 
     let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';

components/GroupCard.js

@@ -32,13 +32,20 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
     let [profile, setProfile] = useState(profileObj || {});
     const navigation = useNavigation();
 
-    useEffect(async () => {
+    useEffect(() => {
+        let subscribed = true;
+        const getData = async () => {
             if (profileObj._id) return 0;
             let cacheProfile = await getName(profileid);
             if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
             let p = await API.getUserProfile(profileid).catch(() => { return {} });
-        setProfile(p);
+            if (subscribed) setProfile(p);
-        storeName(profileid, p)
+            storeName(profileid, p);
+        };
+        getData();
+        return () => {
+            subscribed = false;
+        }
     }, [profileid]);
 
     let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';

components/ProfileCard.js

@@ -32,13 +32,20 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
     let [profile, setProfile] = useState(profileObj || {});
     const navigation = useNavigation();
 
-    useEffect(async () => {
+    useEffect(() => {
+        let subscribed = true;
+        const getData = async () => {
             if (profileObj._id) return 0;
             let cacheProfile = await getName(profileid);
-        if (cacheProfile && cacheProfile.profile) setProfile(cacheProfile);
+            if (cacheProfile && cacheProfile.profile && subscribed) setProfile(cacheProfile);
             let p = await API.getUserProfile(profileid).catch(() => { return {} });
-        setProfile(p);
+            if (subscribed) setProfile(p);
             storeName(profileid, p)
+        };
+        getData();
+        return () => {
+            subscribed = false;
+        }
     }, [profileid]);
 
     let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';