title: Triggering useEffect on previous stack screen React Native
body: <p>I have a react native project which shows a UserNavigator page consisting of two tabs, one to show active data and the second to show inactive data, all the data can be clicked to navigate to UserDetails page</p>
  <p>The problem is when I tried to update the inactive data to active and then go back to the previous screen which is UserNavigator the data on UserNavigator will not be updated since useEffect is not triggered to fetch updated data</p>
  <p>Tab Nav page named UserNavigator</p>
  <pre><code>export default function DataList() {
    return (
      &lt;Tab.Navigator&gt;
        &lt;Tab.Screen name=&quot;Active&quot; component={ActiveData} /&gt;
        &lt;Tab.Screen name=&quot;Inactive&quot; component={InactiveData} /&gt;
      &lt;/Tab.Navigator&gt;
    )
  }
  </code></pre>
  <p>useEffect on Active and Inactive page</p>
  <pre><code>React.useEffect(() =&gt; {
          (async () =&gt; {
              setLoading(true);
              try {
                await getUserData();
              } catch (err) {
                Alert.alert(&quot;&quot;, err?.response?.data?.message || err?.message);
              }
              setLoading(false);
            })();
        }, []);
  </code></pre>
  <p>function on UserDetails to set user status to active then go back to list</p>
  <pre><code>const onSetActive = async () =&gt; {
          setModalVisible(!modalVisible)
          setLoading(true)
          try {
              const body = {
                _id: item._id,  
                status: &quot;Active&quot;,
              }
              const response = await axiosInstance.patch(`/UserData/update`, body)
              await getUserData()
              Alert.alert(
                  &quot;Success&quot;,
                  &quot;User has been set to active!&quot;,
                  [
                    {
                      text: &quot;OK&quot;,
                      onPress: () =&gt; navigation.navigate(&quot;UserNavigator&quot;) 
                    }
                  ]
                );
          }
          catch (err) {
              Alert.alert(&quot;&quot;, err?.response?.data?.message || err?.message);
          }
          setLoading(false)
        }
  </code></pre>
  <p>I've been trying to use useIsFocused on Active and Inactive Tab</p>
  <pre><code>Top Import
  import { useIsFocused } from &quot;@react-navigation/native&quot;;
  
  const isFocused = useIsFocused();
  React.useEffect(() =&gt; {
          (async () =&gt; {
              setLoading(true);
              try {
                await getUserData();
              } catch (err) {
                Alert.alert(&quot;&quot;, err?.response?.data?.message || err?.message);
              }
              setLoading(false);
            })();
        }, [isFocused]);
  </code></pre>
  <p>But when I tried to navigate between tabs it will rerender the data even when there isn't any change to the data and it will take more time to navigate and wait for data to be fetched</p>
  <p>Navigation.replace won't do since I navigate to UserNavigator page from Main Page if I do that when I press the back button from UserDetails it will go back to Main Page instead of UserNavigator</p>
  <p>Is there any alternative solution to my problem? I've been thinking to pass props when navigating to UserNavigator after updating data to trigger useEffect but I don't know how</p>