Using select vs queryFn return value

[yoni-salt]

Hey,
I cant find info on whether i should use the "select" property or normalize the response data inside the queryFn function.
As far as i know, using the queryFn function itself is better for performance because it only happens after the actual response oppose to the "select" which might run on every render.

• one small note on the select, its not memoized, so i need to wrap the function with useCallback for better performance

pseudo examples:

const { data: someDataArray = [] } = useQuery(
  { scope: 'sampleScope' },
  async () => {
    const res = await fetchSomeData('SampleStringParam');

    return normalizeResponse(res);
  }
);

vs

const { data: someDataArray = [] } = useQuery(
  { scope: 'sampleScope' },
  fetchSomeData,
  {
      select: (res => normalizeResponseData(res))
   }
);

One thing that i thought of for using the select is only when using same key with different select functions(rare on our codebase)

[TkDodo]

every approach has its pros and cons, and I've listed them here: https://tkdodo.eu/blog/react-query-data-transformations