The response of my paginated code looks something like –

Page 1

0: {title: '2024-07-11', data: Array(3)}
1: {title: '2024-07-12', data: Array(1)}
2: {title: '2024-07-15', data: Array(2)}
3: {title: '2024-07-16', data: Array(1)}
4: {title: '2024-07-17', data: Array(1)}
5: {title: '2024-07-19', data: Array(3)}
6: {title: '2024-07-20', data: Array(2)}
7: {title: '2024-07-22', data: Array(2)}
8: {title: '2024-07-23', data: Array(4)}
9: {title: '2024-07-24', data: Array(1)}
length: 10

Page 2

0: {title: '2024-07-11', data: Array(3)}
1: {title: '2024-07-12', data: Array(1)}
2: {title: '2024-07-15', data: Array(2)}
3: {title: '2024-07-16', data: Array(1)}
4: {title: '2024-07-17', data: Array(1)}
5: {title: '2024-07-19', data: Array(3)}
6: {title: '2024-07-20', data: Array(2)}
7: {title: '2024-07-22', data: Array(2)}
8: {title: '2024-07-23', data: Array(4)}
9: {title: '2024-07-24', data: Array(1)}
10: {title: '2024-07-24', data: Array(3)}
11: {title: '2024-07-11', data: Array(3)}
12: {title: '2024-07-12', data: Array(1)}
13: {title: '2024-07-15', data: Array(2)}
14: {title: '2024-07-16', data: Array(2)}
15: {title: '2024-07-18', data: Array(2)}
16: {title: '2024-07-19', data: Array(3)}
17: {title: '2024-07-22', data: Array(2)}
18: {title: '2024-07-23', data: Array(2)}
length: 19

Page 3

0: {title: '2024-07-11', data: Array(3)}
1: {title: '2024-07-12', data: Array(1)}
2: {title: '2024-07-15', data: Array(2)}
3: {title: '2024-07-16', data: Array(1)}
4: {title: '2024-07-17', data: Array(1)}
5: {title: '2024-07-19', data: Array(3)}
6: {title: '2024-07-20', data: Array(2)}
7: {title: '2024-07-22', data: Array(2)}
8: {title: '2024-07-23', data: Array(4)}
9: {title: '2024-07-24', data: Array(1)}
10: {title: '2024-07-24', data: Array(3)}
11: {title: '2024-07-11', data: Array(3)}
12: {title: '2024-07-12', data: Array(1)}
13: {title: '2024-07-15', data: Array(2)}
14: {title: '2024-07-16', data: Array(2)}
15: {title: '2024-07-18', data: Array(2)}
16: {title: '2024-07-19', data: Array(3)}
17: {title: '2024-07-22', data: Array(2)}
18: {title: '2024-07-23', data: Array(2)}
19: {title: '2024-07-24', data: Array(1)}
20: {title: '2024-07-25', data: Array(5)}
21: {title: '2024-07-11', data: Array(2)}
22: {title: '2024-07-12', data: Array(4)}
23: {title: '2024-07-15', data: Array(1)}
24: {title: '2024-07-17', data: Array(2)}
25: {title: '2024-07-18', data: Array(1)}
26: {title: '2024-07-20', data: Array(1)}
27: {title: '2024-07-22', data: Array(1)}
length: 28

I am using react-query’s useInifiniteQuery and page values are flattened.

When the third and the final page is fetched and rendered, I see the following glitch –

import format from 'date-fns/format';
import { useCallback } from 'react';
import { RefreshControl, SectionList, View } from 'react-native';

import { BookableAppointment } from '@app-types/appointments';
import {
  AppointmentCard,
  AppointmentListLoader,
} from '@components/app-specific';
import { CircularLoader, Typography } from '@components/core';
import { createUseStyle } from '@theme';

import { useGetAppointmentBooking } from '../../hooks/get-appointment-booking';

export const useBookableAppointmentsStyle = createUseStyle(t => ({
  listEmptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  header: {
    backgroundColor: t.palette.background.main,
  },

  contentContainer: {
    gap: 16,
    paddingVertical: t.moderateVerticalScale(10, 1),
    flexGrow: 1,
  },
}));

export const BookableAppointments = () => {
  const styles = useBookableAppointmentsStyle();

  const {
    data,
    isLoading,
    isFetchingNextPage,
    loadMore,
    isRefetching,
    refetch,
  } = useGetAppointmentBooking();

  const renderBookableAppointment = useCallback(
    ({ item }: { item: BookableAppointment }) => {
      return (
        <AppointmentCard
          key={item.EndDateTime.toString()}
          appointment={{
            EndDateTime: item.EndDateTime,
            Id: item.Id,
            LocationName: item.LocationName,
            StartDateTime: item.StartDateTime,
          }}
        />
      );
    },
    [],
  );

  const onPullToRefresh = useCallback(async () => {
    await refetch();
  }, [refetch]);

  if (isLoading && !data.length) {
    return <AppointmentListLoader />;
  }

  const ListEmptyComponent = !isLoading ? (
    <View style={styles.listEmptyContainer}>
      <Typography variant="body1" color="description" align="center">
        Unfortunately, there are no available appointments for the selected date
        range.
      </Typography>
    </View>
  ) : null;

  const renderSectionHeader = ({
    section: { title },
  }: {
    section: { title: string };
  }) => (
    <View style={styles.header}>
      <Typography variant="h4" weight="bold">
        {format(new Date(title), 'EEEE, dd MMMM yyyy')}
      </Typography>
    </View>
  );

  return (
    <SectionList
      keyExtractor={item => item.EndDateTime.toString()}
      sections={data}
      renderItem={renderBookableAppointment}
      refreshControl={
        <RefreshControl refreshing={isRefetching} onRefresh={onPullToRefresh} />
      }
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={
        isFetchingNextPage && data.length ? <CircularLoader /> : null
      }
      ListEmptyComponent={ListEmptyComponent}
      renderSectionHeader={renderSectionHeader}
      contentContainerStyle={styles.contentContainer}
    />
  );
};

I have tried adding initialNumToRender, maxToRenderPerBatch, etc for additional performance gains but things became worse.

I am not sure why things render perfectly on the 2nd page but I see this glitch when the 3rd page renders