How to trigger a useEffect, when returning to a previously opened tab

[obrassard]

Let's suppose we have an app with two Tabs Screen, and both components are using useEffet(() => {...}, []) to fetch data from an API on their first render.

<Tabs>
  <Tabs.Screen
    name="index"
  />
  <Tabs.Screen
    name="two"
  />
</Tabs>

Is there a way to trigger a useEffect, when the user returns to a previously opened tab (to trigger a new API call to refresh the data). For instance, let's suppose the first tab (index) is opened first and the data is fetched for a first time, then the user navigates to the second (two) tab. Later, our user returns to the first tab (index), however the initial use effect is not called this time (so the data may be out of date).

What would be the best way to handle this scenario?
Thank you in advance !

[obrassard]

To add a more context, currently this is what we've done to implement this behaviour, but we would like to know if there is a better way.

We created a custom hook that takes a route as argument and use the current pathname to check and execute the effect if the path changes and match the current route :

import { usePathname } from "expo-router";
import { useEffect } from "react";

export function useTabEffect(route: string, effect: () => void) {
    const path = usePathname();
    useEffect(() => {
        if (path === route) {
            effect();
        }
    }, [path])
}

And we use it this way in our tabs components :

useTabEffect("/", () => {
    console.log("Index rendered")   
});


useTabEffect("/two", () => {
    console.log("Two rendered")   
});

[ratley]

You can try useFocusEffect https://reactnavigation.org/docs/use-focus-effect/