fix: read api is not triggered consistently when switch between features of collect workspace

Author: tienifr

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -1,4 +1,4 @@
-import {useIsFocused} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import lodashIsEqual from 'lodash/isEqual';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -144,10 +144,11 @@ function WorkspaceMembersPage({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedEmployees, policy?.owner, session?.accountID]);
 
-    useEffect(() => {
-        getWorkspaceMembers();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    useFocusEffect(
+        useCallback(() => {
+            getWorkspaceMembers();
+        }, [getWorkspaceMembers]),
+    );
 
     useEffect(() => {
         validateSelection();

src/pages/workspace/WorkspaceMoreFeaturesPage.tsx

@@ -1,5 +1,6 @@
+import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
@@ -152,16 +153,17 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
         [isSmallScreenWidth, styles, renderItem, translate],
     );
 
-    function fetchFeatures() {
+    const fetchFeatures = useCallback(() => {
         Policy.openPolicyMoreFeaturesPage(route.params.policyID);
-    }
+    }, [route.params.policyID]);
 
     useNetwork({onReconnect: fetchFeatures});
 
-    useEffect(() => {
-        fetchFeatures();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    useFocusEffect(
+        useCallback(() => {
+            fetchFeatures();
+        }, [fetchFeatures]),
+    );
 
     return (
         <AdminPolicyAccessOrNotFoundWrapper policyID={route.params.policyID}>

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -1,6 +1,6 @@
-import {useIsFocused} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {ReactNode} from 'react';
-import React, {useEffect, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -133,9 +133,11 @@ function WorkspacePageWithSections({
         firstRender.current = false;
     }, []);
 
-    useEffect(() => {
-        fetchData(policyID, shouldSkipVBBACall);
-    }, [policyID, shouldSkipVBBACall]);
+    useFocusEffect(
+        useCallback(() => {
+            fetchData(policyID, shouldSkipVBBACall);
+        }, [policyID, shouldSkipVBBACall]),
+    );
 
     const shouldShow = useMemo(() => {
         // If the policy object doesn't exist or contains only error data, we shouldn't display it.

src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

@@ -1,5 +1,6 @@
+import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -61,16 +62,17 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
     const dropdownButtonRef = useRef(null);
     const [deleteCategoriesConfirmModalVisible, setDeleteCategoriesConfirmModalVisible] = useState(false);
 
-    function fetchCategories() {
+    const fetchCategories = useCallback(() => {
         Policy.openPolicyCategoriesPage(route.params.policyID);
-    }
+    }, [route.params.policyID]);
 
     const {isOffline} = useNetwork({onReconnect: fetchCategories});
 
-    useEffect(() => {
-        fetchCategories();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    useFocusEffect(
+        useCallback(() => {
+            fetchCategories();
+        }, [fetchCategories]),
+    );
 
     const categoryList = useMemo<PolicyOption[]>(
         () =>

src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

@@ -1,5 +1,6 @@
+import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -59,9 +60,9 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
     );
     const customUnitRates: Record<string, Rate> = useMemo(() => customUnit?.rates ?? {}, [customUnit]);
 
-    function fetchDistanceRates() {
+    const fetchDistanceRates = useCallback(() => {
         Policy.openPolicyDistanceRatesPage(policyID);
-    }
+    }, [policyID]);
 
     const dismissError = useCallback(
         (item: RateForList) => {
@@ -72,10 +73,11 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
 
     const {isOffline} = useNetwork({onReconnect: fetchDistanceRates});
 
-    useEffect(() => {
-        fetchDistanceRates();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    useFocusEffect(
+        useCallback(() => {
+            fetchDistanceRates();
+        }, [fetchDistanceRates]),
+    );
 
     const distanceRatesList = useMemo<RateForList[]>(
         () =>

src/pages/workspace/tags/WorkspaceTagsPage.tsx

@@ -1,5 +1,6 @@
+import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -58,16 +59,17 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
     const {translate} = useLocalize();
     const [selectedTags, setSelectedTags] = useState<Record<string, boolean>>({});
 
-    function fetchTags() {
+    const fetchTags = useCallback(() => {
         Policy.openPolicyTagsPage(route.params.policyID);
-    }
+    }, [route.params.policyID]);
 
     const {isOffline} = useNetwork({onReconnect: fetchTags});
 
-    useEffect(() => {
-        fetchTags();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    useFocusEffect(
+        useCallback(() => {
+            fetchTags();
+        }, [fetchTags]),
+    );
 
     const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]);
     const tagList = useMemo<PolicyForList[]>(

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -1,5 +1,6 @@
+import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -39,16 +40,17 @@ function WorkspaceTaxesPage({policy, route}: WorkspaceTaxesPageProps) {
     const defaultExternalID = policy?.taxRates?.defaultExternalID;
     const foreignTaxDefault = policy?.taxRates?.foreignTaxDefault;
 
-    const fetchTaxes = () => {
+    const fetchTaxes = useCallback(() => {
         openPolicyTaxesPage(route.params.policyID);
-    };
+    }, [route.params.policyID]);
 
     const {isOffline} = useNetwork({onReconnect: fetchTaxes});
 
-    useEffect(() => {
-        fetchTaxes();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    useFocusEffect(
+        useCallback(() => {
+            fetchTaxes();
+        }, [fetchTaxes]),
+    );
 
     const textForDefault = useCallback(
         (taxID: string): string => {

src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

@@ -1,5 +1,6 @@
+import {useFocusEffect} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {FlatList, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -62,16 +63,17 @@ function WorkspaceWorkflowsPage({policy, betas, route, reimbursementAccount, ses
 
     const onPressAutoReportingFrequency = useCallback(() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_AUTOREPORTING_FREQUENCY.getRoute(policy?.id ?? '')), [policy?.id]);
 
-    const fetchData = () => {
+    const fetchData = useCallback(() => {
         Policy.openPolicyWorkflowsPage(policy?.id ?? route.params.policyID);
-    };
+    }, [policy?.id, route.params.policyID]);
 
     useNetwork({onReconnect: fetchData});
 
-    useEffect(() => {
-        fetchData();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    useFocusEffect(
+        useCallback(() => {
+            fetchData();
+        }, [fetchData]),
+    );
 
     const optionItems: ToggleSettingOptionRowProps[] = useMemo(() => {
         const {accountNumber, state, bankName} = reimbursementAccount?.achData ?? {};