debounced onItemsRendered being called twice after scroll stops

[msqar]

Hey guys, I got a VariableSizeList component with an onItemsRendered function. This function what it does is receive the scroll props as normal (startIndex, stopIndex) and debounces to dispatch an action in order to store it on redux. These props are used through redux-saga to fetch data every time we scroll through the items.

But I noticed that every time i finish scrolling, because I added logic to determine scroll direction, it does a weird jumping, so if im scrolling down, i see the index going down and then up a bit after scrollEnd event.

This is how the onItemsRendered function looks like:

const onItemsRendered = useCallback(
    ({
      overscanStartIndex,
      overscanStopIndex,
    }: ListOnItemsRenderedProps) => {
      setListItemsInView({
        startIndex: overscanStartIndex,
        stopIndex: overscanStopIndex,
      });
    },
    [setListItemsInView],
  );

This hook function looks like this:

export function useSetListItemsInView({
  delay = 200,
}: Options = {}): ReturnFunction {
  const dispatch = useDispatch();

  return useMemo(
    () =>
      debounce(delay, ({ startIndex, stopIndex }) => {
        dispatch(dispatchSomeAction({ startIndex, stopIndex }));
      }),
    [delay, dispatch],
  );
}

What could I be missing on this?

When I scroll only 1 tick, the console logs show the following values:

startIndex: 148
stopIndex: 156
startIndex: 145
stopIndex: 156

The value that changes is the startIndex when it triggers twice, not sure why.