React Native refetching on refocus and/or remount

[kelleyvanevert]

Hey!

So I started working on a revision of an project of mine, and my plan was to codeshare a bunch between the (new) app and web, and use react-query to replace the current data loading strategies. I started off with creating the new RN app, but found that react-navigation tries to minimize un- and remounting of screens. That of course makes it harder to use react-query's refetchOnMount. (And also I think the window refocus effect might need some thinking.)

My suggestion: either directly support this RN usecase, or add a separate option e.g. refetchOnRefocus.

One direct way to tackle the problem codewise (but probably not the best), would be to just redefine utils.js / useUid to include react-navigation's useFocusEffect. Ofc other libraries would need other fixes too...

Any ideas?

[cherniavskii]

React Navigation is one of the available options when it comes to React Native. This means that ReactQuery cannot assume that it's used in every app. Therefore it won't be supported out of the box.

But I've created this small library https://github.com/cherniavskii/react-query-navigation-native to help integrate react-query with react-navigation.
Features:

• Automatically refetch queries on app focus (by subscribing to AppState)
• Automatically refetch query on screen focus in useQuery hook (by using useFocusEffect from React Navigation)

[cherniavskii]

@olup Nice!

[Luccasoli]

https://gist.github.com/Luccasoli/9b4ec6fbe87a702d9e87a09fa0b38d59

this was the approach I used, if it is useful for someone else,

the difference is just that I added some conditions for when the refetch should happen (the same as the source code of the react-query used in reactjs [link])

[iaurg]

Works like a charm @Luccasoli, thanks for your help.

[Gbengaol]

@Luccasoli This works like charm... Love it and thank you

[mohitharshan123]

@Luccasoli @cherniavskii The usage of useFocusEffect and refetching is causing the tab navigation response to become slow.
The tab navigation is waiting for the fetch request to complete. Might be an issue with react-navigation. Please do suggest if anyone has a workaround.

[kelleyvanevert]

Super awesome that you provided a nice example solution so fast, usable out-of-the-box. Thanks 👍

I still wonder though whether it might not make sense to pull into the main library anyway. I know the N:N library cross-supporting is a bad road in principle. Nonetheless, react-navigation is (I believe) the community standard library that all new RN users will float towards. And if react-query wants to popularize itself as an easy-to-use out-of-the-box data loading library, then it might make sense. (Putting it under an extra option, maybe even in a more general way, is also a valid way.)

[safaiyeh]

Nice! Any solutions for react-native-navigation or guidance to getting that to work?

[kelleyvanevert]

You'll want to use the trick as cherniavskii described above. But instead of working with useFocusEffect imported from @react-navigation/native, you'd want something like useNavigationComponentDidAppear from react-native-navigation-hooks (took this tip from react-native-navigation's docs).

Haven't used RNN before, but (unless you have to fix edge-cases) it would be something like

// Listen events only for this screen (componentId)
useNavigationComponentDidAppear(e => {
  refetch();
}, componentId)

[safaiyeh]

Looks good, let me try this out

[zluo01]

Do u figure out how to use react-query with RNN ? Thanks.

[Gbengaol]

it works the same way it works on the Web. The only difference is that refetchOnWindowFocus doesn't work out of the box in React Native so you need some of the tweaks mentioned in this help channel to make it work.

[clytras]

@Gbengaol unfortunatelly it's not so simple with RNN. Root components (screens) do not share a root App component tree and these can't have a common provider. There are some workarounds at the RNN documentation regarding how to use Context though.

https://wix.github.io/react-native-navigation/docs/third-party-react-context/

LIMITATION

As RNN screens are not part of the same component tree, updating the values in the shared context does not trigger a re-render across all screens. However you can still use the React.Context per RNN screen component tree.

If you need to trigger a re-render across all screens, there are many popular third party libraries such as MobX or Redux.

[wobsoriano]

I use this and add in App.js of my expo app https://react-query.tanstack.com/docs/guides/window-focus-refetching#managing-focus-in-react-native

and in pages I want to refetch data #296 (reply in thread)

[omar-bear]

In case u want to refetch only when you focus your screen (without infinity loop) because a lot of people want to do this
I think u can juste use this hook

export const useRefetchOnFocus = (refetch = () => {}, canRefetch = true) => {
  const [isScreenFocused, setIsScreenFocused] = useState(false);
  useFocusEffect(() => {
    setIsScreenFocused(true); // when i focus the screen
    return () => setIsScreenFocused(false); // when i quit the screen
  });

  /* the screen still always active in cache so we need to check that the screen is focused in a use effect
  to dispatch the refetch only one time to avoid the infinity loop*/
  useEffect(() => {
    if (isScreenFocused && canRefetch) {
      refetch();
    }
  }, [canRefetch, isScreenFocused, refetch]);
};

and in your screen

  const { data, refetch } = useAccount();

  useRefetchOnFocus(refetch);

[Rehubbard]

Thanks for this solution. It was the only one that worked without infinitely calling the query. Using useFocusEffect alone was not enough.

[dirkpostma]

• Added useCallback to prevent unncessary re-renders in consuming components. Note that original imported useCallback, but didn't use it :)
• Added subscription to app state

useRefetchOnFocus.ts

import {useFocusEffect} from '@react-navigation/native';
import {useCallback} from 'react';
import {useAppState} from './useAppState';

export const useRefetchOnFocus = (refetch: () => void) => {
  useFocusEffect(
    useCallback(() => {
      refetch();
    }, [refetch]),
  );

  useAppState({
    onForeground: refetch,
  });
};

useAppState.ts

import {useState, useEffect} from 'react';
import {AppState, AppStateStatus} from 'react-native';

export interface AppStateHookSettings {
  onChange?: (status: AppStateStatus) => void;
  onForeground?: () => void;
  onBackground?: () => void;
}

export interface AppStateHookResult {
  appState: AppStateStatus;
}

type Handler = (state: AppStateStatus) => void;

export const useAppState = (
  settings?: AppStateHookSettings,
): AppStateHookResult => {
  const {onChange, onForeground, onBackground} = settings || {};
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const handleAppStateChange: Handler = nextAppState => {
      if (nextAppState === 'active' && appState !== 'active') {
        onForeground && onForeground();
      } else if (
        appState === 'active' &&
        nextAppState.match(/inactive|background/)
      ) {
        onBackground && onBackground();
      }
      setAppState(nextAppState);
      onChange && onChange(nextAppState);
    };

    const listener = AppState.addEventListener('change', handleAppStateChange);

    return () => listener.remove();
  }, [onChange, onForeground, onBackground, appState]);

  return {appState};
};

[Jscripter-pk]

One specific edge case for react-navigation we faced was that we have verifications from web app and we were redirecting user to web but once when we return back to the screen we were redirecting from were not working with onFocus effect as app was going in background.
So this piece of code works for us, maybe anyone come across such edge-case you can try this.

useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      appState.current = nextAppState;
      if (appState.current === 'active') {
        refetchUser();
      }
    });

    return () => {
      subscription.remove();
    };
  }, []);

[MateuszRostkowski]

This is my solution, I've needed to add staleTime to my code, so in case someone will be looking on how to do it:

// useRefetchOnFocus.ts

import { useFocusEffect } from '@react-navigation/native'
import { useCallback, useRef } from 'react'

import { useAppStateActive } from './useAppStateActive'

export const useRefetchOnFocus = (
  refetch: () => void, 
  /**
   * Time after refetch function will be refetched 
   * If you don't want to cache the values, you can set this to `0`
   * **Default**: 1 minute / 60 seconds (60 * 1000)
   */
  time = 60 * 1000
) => {
  const isFirstRun = useRef(false)
  const lastFetchTime = useRef(Date.now())
  useFocusEffect(
    useCallback(() => {
      if (!isFirstRun.current) {
        isFirstRun.current = true
        return
      }

      // Prevents refetching if the last fetch was less than 1 minute ago
      // Boosts performance and prevents unnecessary API calls
      if (Date.now() - lastFetchTime.current < time) {
        return
      }
      lastFetchTime.current = Date.now()

      refetch()
    }, [refetch, time])
  )

  useAppStateActive(refetch, false)
}

// useAppStateActive.ts
import { useCallback, useEffect, useRef } from 'react'
import { AppState, AppStateStatus } from 'react-native'

/**
 * This hook will run on every app state change from background to foreground
 */
export function useAppStateActive(onChange = () => {}, runOnMount = true) {
  const appState = useRef(AppState.currentState)

  const _handleChange = useCallback(
    (nextAppState: AppStateStatus) => {
      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
        onChange()
      }
      appState.current = nextAppState
    },
    [onChange]
  )

  useEffect(() => {
    const subscription = AppState.addEventListener('change', _handleChange)
    if (runOnMount) {
      onChange()
    }

    return () => {
      subscription.remove()
    }
  }, [_handleChange, onChange, runOnMount])
}

Then you are using it like this:

  const { data, refetch } = useUser();

  // This will be refetched on screen focus and when changing app state to active
  useRefetchOnFocus(refetch);

[Danhhan]

thank you so much, it worked with me.

[je00037]

Does anyone have any thoughts on the best way to achieve a refetch upon screen re-focus (i.e. user starts on screen A, navigates to screen B, then back to screen A) without using the manual refetch()?

My logic for wanting this is that by using refetch() we're bypassing the staleTime we'd have set up on the Query in screen A - so there might be cases where screen A is re-focused but actually the data isn't yet stale so there's no need to refetch. However, in the case of the data being stale, I'd prefer to let the Query itself handle whether refetching should happen or not rather than manually force a refetch. Problem is that the Query has no way of knowing that the screen has re-focused if it doesn't re-render since useQuery is invoked only on re-render, and we need to invoke useQuery to tap into the functionality/logic of the Query (I think!)

So, if that makes any sense, then the only way I can think of achieving this is to instead force a re-render of the screen upon re-focus so that the screen's useQuery hook is called again. Then the staleTime within the Query's own logic can be respected and a refetch only happens if the staleTime is exceeded.

Any thoughts on this most welcome - especially if I've misunderstood something about how RQ works.

[TkDodo]

you can use queryClient.fetchQuery({ queryKey, queryFn, staleTime }) instead of a "hard refetch".

[je00037]

Thanks @TkDodo. I think the awkward thing for us is that we've used Codegen to auto-generate typed hooks for our queries and the queryKeys are embedded into those typed hooks based on the query name, so accessing the queryKey to provide to the queryClient.fetchQuery() call on the screen is a bit of a challenge as things stand. One for us to go away and solve!

[TkDodo]

I guess the codegen should also export fetchQuery wrappers, no? For example, that's what trpc does ...

[shivam9aug1996]

import { ThunkDispatch, createAction } from "@reduxjs/toolkit";
import { addNetworkStateListener } from "expo-network";
import {
Platform,
AppState,
AppStateStatus,
NativeEventSubscription,
} from "react-native";
import { type EventSubscription } from "expo-modules-core";

export const onFocus = createAction("__rtkq/focused");
export const onFocusLost = createAction("__rtkq/unfocused");
export const onOnline = createAction("__rtkq/online");
export const onOffline = createAction("__rtkq/offline");

let initialized: Boolean = false;

export function setupListeners(
dispatch: ThunkDispatch<any, any, any>,
customHandler?: (
dispatch: ThunkDispatch<any, any, any>,
actions: {
onFocus: typeof onFocus;
onFocusLost: typeof onFocusLost;
onOnline: typeof onOnline;
onOffline: typeof onOffline;
}
) => () => void
) {
const mobileDefaultHandler = () => {
const handleFocus = () => dispatch(onFocus());
const handleFocusLost = () => dispatch(onFocusLost());
const handleOnline = () => dispatch(onOnline());
const handleOffline = () => dispatch(onOffline());

let unsubscribeAppState: NativeEventSubscription;
let networkSubscription: EventSubscription;

if (!initialized) {
  const handleAppStateChange = (nextAppState: AppStateStatus) => {
    if (nextAppState === "active") {
      handleFocus();
    } else {
      handleFocusLost();
    }
  };

  unsubscribeAppState = AppState.addEventListener(
    "change",
    handleAppStateChange
  );

  networkSubscription = addNetworkStateListener(
    ({ type, isConnected, isInternetReachable }) => {
      if (isConnected && isInternetReachable) {
        handleOnline();
      } else {
        handleOffline();
      }
      console.log(
        `Network type: ${type}, Connected: ${isConnected}, Internet Reachable: ${isInternetReachable}`
      );
    }
  );

  initialized = true;
}

const unsubscribe = () => {
  if (unsubscribeAppState) unsubscribeAppState.remove();
  if (networkSubscription) networkSubscription.remove();
  initialized = false;
};

return unsubscribe;

};

const webDefaultHandler = () => {
const handleFocus = () => dispatch(onFocus());
const handleFocusLost = () => dispatch(onFocusLost());
const handleOnline = () => dispatch(onOnline());
const handleOffline = () => dispatch(onOffline());
const handleVisibilityChange = () => {
if (window.document.visibilityState === "visible") {
handleFocus();
} else {
handleFocusLost();
}
};

if (!initialized) {
  if (typeof window !== "undefined" && window.addEventListener) {
    // Handle focus events
    window.addEventListener(
      "visibilitychange",
      handleVisibilityChange,
      false
    );
    window.addEventListener("focus", handleFocus, false);

    // Handle connection events
    window.addEventListener("online", handleOnline, false);
    window.addEventListener("offline", handleOffline, false);
    initialized = true;
  }
}
const unsubscribe = () => {
  window.removeEventListener("focus", handleFocus);
  window.removeEventListener("visibilitychange", handleVisibilityChange);
  window.removeEventListener("online", handleOnline);
  window.removeEventListener("offline", handleOffline);
  initialized = false;
};
return unsubscribe;

};

return customHandler
? customHandler(dispatch, { onFocus, onFocusLost, onOffline, onOnline })
: Platform.OS === "web"
? webDefaultHandler()
: mobileDefaultHandler();
}