How can I determine if there is new data in the first page and it's not fetchNextPage?

[zmm2tysu]

const {
  data,
  fetchNextPage,
  // isFetching,
  // isFetched,
  isInitialLoading,
  // isLoading,
  // isRefetching,
  isFetchingNextPage,
  hasNextPage,
  isFetchedAfterMount,
} = useInfiniteQuery(
  ['chat-msg'],
  ({ pageParam = 1 }: { pageParam?: any }) => {
    return privateMsgMessageApi.chatHistory({ pageNumber: pageParam });
  },
  {
    retry: false,
    structuralSharing: (oldData, newData) => {
      if (!isDeepEqualReact(oldData, newData)) {
        setTimeout(() => {
          scrollToBottom();
        }, 200);
      }
      return newData;
    },
    getNextPageParam: (lastRes) => (lastRes?.current < lastRes?.pages ? lastRes?.current + 1 : false),
    // refetchInterval: 5 * 1000,
    // refetchIntervalInBackground: false,
    refetchOnWindowFocus: false,
    select: (_data) => ({ pages: [..._data.pages].reverse(), pageParams: [..._data.pageParams].reverse() }),
  },
);

Here is my code, I want to scrollToBottom when new msg comes in.

I'm trying to place the logic in structuralSharing to execute it, but scollToBottom is also excuted when I fetchNextPage.

The effect I expect is to execute when loading data for the first time and when there are new changes in the first page data.

So, how should I handle this situation to achieve my expectation?

If you need me to provide more information, please let me know. I would appreciate it.

[TkDodo]

I think a useEffect in the component is the better approach