How does componentDidAppear actually work ?

[zluo01]

Hi,
I try to use react-query with rnn to handle data fetching. However, I have difficulty to make data fetch work when app is recovered from background state. Normally page change will trigger componentDidAppear but it won't trigger when recover from background state. I wonder how I can proper handle this situation in rnn ?

Thanks.

[lindesvard]

Can't you just listen to AppState for this? https://reactnative.dev/docs/appstate

[swabbass]

@zluo01 to get you right, on Android for example, when you set Don't keep activities in Developer Options, which simulate system killing app for resources, for example, the componentDidAppear won't work?

Listening to AppState is ok, but, theoretically componentDidAppear should be sent since the component got destroyed when the app "killed" and it should be resent since the app recovers, hence, the UI will be built from 0 at least.

can you elaborate more about it (RNN version, RN version, platform etc), maybe share with us a minimal project or just our playground where this happens?

[zluo01]

react-native: 0.66.3,
react-native-navigation : 7.23.1-hotfix.1
Platform: ios

My initial source are TanStack/query#296 and https://react-query.tanstack.com/guides/window-focus-refetching#managing-focus-in-react-native. I used the example from the discussion and modified them to have following which encapsulate useQuery with appState listening.

export function useQueryWithRefocus<
  TQueryFnData = unknown,
  TError = unknown,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey
>(
  queryKey: TQueryKey,
  queryFn: QueryFunction<TQueryFnData, TQueryKey>,
  options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
): UseQueryResult<TData, TError> {
  const appState = useRef(AppState.currentState);
  const useQueryReturn = useQuery(queryKey, queryFn, options);

  focusManager.setEventListener(handleFocus => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        console.log('Back to background.')
        handleFocus();
      }

      appState.current = nextAppState;
    });

    return () => {
      subscription.remove();
    };
  });

  useNavigationComponentDidAppear((e) => {
    console.log('here');
    useQueryReturn.refetch();
  })

  return useQueryReturn;
}

So wehn I use this function in the screen functions. i.e.

 const { data, error } = useQueryWithRefocus<IAlbumProps[], Error>(
    ['album', payload],
    () => fetchAllAlbums(URIBuilder(payload))
  );

When first focus the screen, here will get print in the console. But when I swipe the app to background and get back. Back to background will appear in the console but not here. I am not sure if it is expected. Thanks.

[swabbass]

Thx for the info, can create a minimal project that can reproduce the issue? hence, clean react project with RNN and simple component where the flow you talked about causes the behaviour, since it might be related to something else other than RNN, which means, we need to eliminate other factors to see if navigation has a bug emitting componentDidAppear event when going back from Background, you might simulate the query behaviour via setTimeout and return simple component `<View.....>...

[zluo01]

https://github.com/zluo01/NavigationFocusIssues. In this example, the log in useNavigationComponentDidAppear never appears when recover from background but focus will appear. Hope it helps.

[swabbass]

@yogevbd ^