AppState event persists across all app screens even when cleaned

I use the AppState API listener to run a function when the app comes from background to active state. I remove it on the useEffect cleanup, but it is still being called on the other screens like it was never cleaned.

const MyRoute = ({ navigation, route }) => {
  const appStateRef = useRef(AppState.currentState);

  useEffect(() => {
    getUserData();

    function updateRouteData(nextAppState) {
      if (appStateRef.current.match(/inactive|background/) && nextAppState === 'active') {
        getRoutes(); // <--
      }

      appStateRef.current = nextAppState;
    }

    AppState.addEventListener('change', updateRouteData);

    return () => {
      AppState.removeEventListener('change', updateRouteData);
    };
  }, []);

  // ...
}

The AppState event listener persists on the other screens.

react-native: "0.64.4"

Via Active questions tagged javascript - Stack Overflow https://ift.tt/oRDvpgH