CustomHookWrapper, useMemo or useCallback to improve React-Native performance

[Metroidaron]

Hello,

I am currently using React-Query in React-Native and it's wrapped inside a custom hook. Performance is lacking, especially when the user first logs in and many fetches are running at the same time, but I'm afraid my implementation may be rendering a lot un-necessarily... I want to improve performance by using useMemo or useCallback to reduce how often the UI tries to update down stream...

Also do you see any red flags in the implementation below? This is the first time i've used react-query and may have not used it right somewhere, somehow...

This is a dumbed down code sample to give you a feeling of how my code is implemented, since I'm wrapping the useQuery hook in my own custom hook...

Feed.tsx

import useMyFeed from './useMyFeed';

export default () => {
const feed = useMyfeed();

return <Flatlist data={query.data} />
}

useMyFeed.ts

/* Various Imports at the top of the file */

const getFeed = async (key: string, userProfile: iUserProfile) => {
/* Fetch logic for restful api, Should ultimately return an array "Cards"/"FeedItems" */
}

const querySettings = {
  enabled: false,
  initialStale: true,
  staleTime: 1000 * 60 * 5,
  retry: true,
  retryDelay: 1 * 1000,
  onError: (err) => { ... }
};

export default () => {
  const userProfile = useQuery_UserProfile(); // React-Query users profile/settings data
  const session = useSelector((s: iReduxState) => s.Auth.activeSession); // boolean value indicating being logged in
  const [qSettings, setQSettings] = React.useState(querySettings); // Stateful instance of querySettings defined above
  const query = useQuery<Array<iArticle | iEvent>, Error>(['feed', userProfile.query.data], getFeed, qSettings); 

  React.useEffect(() => {
    if (session && userProfile.query.isFetched) setQSettings({ ...qSettings, enabled: true });
  }, [session, userProfile.query.isFetched]);

  return query;
};

I haven't had to use useMemo or useCallback before and am not sure where I should focus on implementing them, I have a basic understanding of what they do (Returning the same value across re-renders if the dependencies haven't changed)... but I'm unsure and could not find an answer online if it is acceptable to wrap useQuery in a callback?

const query = React.useCallback(() => { useQuery<...>(...) }, [ ... dependenciesLike, session, userProfile.data, etc? ])

Or should I be substituting useEffect with something like useMemo?

Part of the reason I think useMemo or useCallback needs to be implemented, is I do regularly see the entire feed vanish, as if the query is returning an empty array, at the same time waiting for these queries seems to be blocking the event thread in react-native, preventing me from clicking buttons and such... or at least having a very significant delay in the click action...

[TkDodo]

I want to improve performance by using useMemo or useCallback to reduce how often the UI tries to update down stream...

have you read: https://react-query.tanstack.com/community/tkdodos-blog#3-react-query-render-optimizations

also, you don’t need an effect or state at all, you can just pass to enabled whatever your condition is:

enabled: Boolean(session && userProfile.query.isFetched)

but I'm unsure and could not find an answer online if it is acceptable to wrap useQuery in a callback

that violates the rules of hooks and wouldn’t achieve anything