Improvement suggestion for useFocusNotifyOnChangeProps

[sadeghhosseini]

I think the implementation for useFocusNotifyOnChangeProps provided in the documents can be improved. The suggested implementation did not work for me, even though after invalidation of the query, the query was refetched successfully, but the component that used the query did not re-render for some reason! I changed the implementation to following and it worked. Regardless of whether the problem was in my code or in the suggested implementation, I think following implementation is better, because react navigation has useIsFocused hook which tells you whether the current screen is in focus or not, so we can use this instead of re-implementing the functionality.

import { useIsFocused } from '@react-navigation/native';
import { NotifyOnChangeProps } from '@tanstack/query-core';

export function useFocusNotifyOnChangeProps(
  notifyOnChangeProps?: NotifyOnChangeProps,
) {
  const isFocused = useIsFocused();

  return () => {
    if (!isFocused) {
      return [] as any;
    }

    if (typeof notifyOnChangeProps === 'function') {
      return notifyOnChangeProps();
    }

    return notifyOnChangeProps;
  }
}

[kecsot]

Same happened with me.

Steps:

1. refetch RQ
2. Leave screen
3. refetch RQ
4. Go back to screen
5. Data is not updated on the screen. (It's waiting for the next refetch)

Works good with const isFocused = useIsFocused();