I have logic that makes my home page refresh every time the component is mounted. I do want it to refresh every time I go from the home screen to the profile screen of my app for example, but I do not want it to reload when I open the search modal page and just dismiss it.. or click on an item in the home page and dismiss it.. its a bit excessive. My question is how would I be able to do this in an elegant way where I can pick and choose when I want the page to reload based on which page I'm going back from.
const HomeScreen = (props) => { let TouchableCmp = TouchableOpacity if (Platform.OS === 'android'&& Platform.Version >= 21) { TouchableCmp = TouchableNativeFeedback } const [isLoading, setIsLoading] = useState(false) const [httpError, setHttpError] = useState(false) const homeTickets = useSelector((state) => state.tickets.homeTickets) const dispatch = useDispatch() const loadTickets = useCallback(async () => { setHttpError(false) setIsLoading(true) try { await dispatch(setTickets()) setIsLoading(false) } catch (err) { setHttpError(err.message) setIsLoading(false) } }, [dispatch]) useEffect(() => { const willFocusListener = props.navigation.addListener('willFocus', loadTickets ) return () => { willFocusListener.remove() } }, [loadTickets]) useEffect(() => { setIsLoading(true) loadTickets().then(() => { setIsLoading(false) }) }, [dispatch, loadTickets]) if (isLoading) return (<View style={styles.center}><LottieView source={require('../assets/srSPININGcompatibility.json')} style={{ height: 60, width: 60 }} autoPlay loop></LottieView></View> ) if (httpError) return (<View style={styles.center}><Text style={styles.errorStyle}>{`${httpError}`}</Text><View style={styles.refreshCont}><TouchableCmp onPress={loadTickets} activeOpacity={0.5}><Text style={{ fontSize: 17, color: 'white', fontWeight: 'bold', }}> Refresh</Text></TouchableCmp></View></View> ) return (<View style={styles.screen}><View style={styles.screen}><FlatList showsVerticalScrollIndicator={false} onRefresh={loadTickets} refreshing={isLoading} style={styles.flatList} data={homeTickets} keyExtractor={(item) => item.ticketID} renderItem={(itemData) => (<TicketCell companyName={itemData.item.company} requestor={itemData.item.requestedBy} dateStamp={itemData.item.workLogDate} issue={itemData.item.issue} companyPhone={itemData.item.businessPhone} navigation={props.navigation} ticketID={itemData.item.ticketID} goToDetails={() => { props.navigation.navigate({ routeName: 'HomeDetail', params: { id: itemData.item.ticketID }, }) }} /> )} /></View></View> )}