pass elements to flashlist instead of functions

src/components/Notifications/NotificationsList.tsx

@@ -8,7 +8,7 @@ import {
   OfflineNotice,
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import type { RealmUser } from "realmModels/types";
 import { useTranslation } from "sharedHooks";
 import type { Notification } from "sharedHooks/useInfiniteNotificationsScroll";
@@ -53,14 +53,14 @@ const NotificationsList = ( {
 
   const renderItemSeparator = ( ) => <View className="border-b border-lightGray" />;
 
-  const renderFooter = useCallback( ( ) => (
+  const footerComponent = useMemo( ( ) => (
     <InfiniteScrollLoadingWheel
       hideLoadingWheel={!isFetching || data?.length === 0}
       isConnected={isConnected}
     />
   ), [isFetching, isConnected, data.length] );
 
-  const renderEmptyComponent = useCallback( ( ) => {
+  const emptyComponent = useMemo( ( ) => {
     // show an offline/retry state if the user isn't connected or this request just takes too long
     if ( isConnected === false || loadingTimedOut ) {
       return <OfflineNotice onPress={reload} />;
@@ -113,8 +113,8 @@ const NotificationsList = ( {
   return (
     <CustomFlashList
       ItemSeparatorComponent={renderItemSeparator}
-      ListEmptyComponent={renderEmptyComponent}
-      ListFooterComponent={renderFooter}
+      ListEmptyComponent={emptyComponent}
+      ListFooterComponent={footerComponent}
       data={data}
       keyExtractor={( item: Notification ) => item.id}
       onEndReached={onEndReached}