React Native FlatList optimization - react-native

Question

I am seeing very sluggish performance with my following implementation.
Mainly, but not only, when I disable MealCarousel, it gets better, since the Carousel renders images.
Another way I can improve performance is by adding initialNumToRender to the Main Screen FlatList, but I would really love to see if my components themselves could be improved. I do believe I am not writing an optimized code, but not sure how to improve this. Would really appreciate suggestions and explanations!
Main Screen
const renderResults = useCallback(
({ item }) => <RestaurantListRow {...item} />,
[]
);
<FlatList
ref={topListRef}
data={results}
keyExtractor={(item: { id: string }) => `row-${item.id}`}
renderItem={renderResults}
/>
RestaurantListRow
import React, { useState } from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { NativeViewGestureHandler } from 'react-native-gesture-handler';
import MealCarousel, { Pagination } from 'react-native-snap-carousel';
import { View, Divider, Layout, Colors } from 'theme';
import { Restaurant, Meal } from 'types';
import { getCurrentFormattedTime, navigate } from 'utils';
import RestaurantMeal from './RestaurantMeal';
const width = Layout.window.width;
const RestaurantListRow = React.memo(
({
id,
name,
rating,
number_of_ratings,
meals,
address,
phone_number,
coordinates,
open_now,
closes_at,
pickup_hours_today,
curbside_pickup,
opening_hours,
opening_hours_array,
categories,
}) => {
let favorite_restaurant_open_now = false;
if (open_now === undefined) {
const today_from_js = new Date().getDay();
const today = today_from_js - 1 === -1 ? 6 : today_from_js - 1;
const time_now_rounded_down = getCurrentFormattedTime();
favorite_restaurant_open_now = opening_hours_array
? opening_hours_array[today].includes(time_now_rounded_down)
: false;
}
const calculated_open_now = open_now !== undefined ? open_now : favorite_restaurant_open_now;
const renderItem = React.useCallback(
({ index, item }: { index: number; item: Meal }) => {
return (
<Pressable
onPress={() => {
navigate('Restaurant', {
index, // Index for pagination
id,
name,
rating,
number_of_ratings,
meals,
coordinates,
address,
open_now: calculated_open_now,
closes_at,
pickup_hours_today,
curbside_pickup,
opening_hours,
categories,
});
}}
>
<RestaurantMeal meal={item} />
</Pressable>
);
},
[
address,
categories,
coordinates,
curbside_pickup,
id,
meals,
name,
calculated_open_now,
closes_at,
opening_hours,
pickup_hours_today,
rating,
number_of_ratings,
]
);
const [activeSlide, setActiveSlide] = useState<number>(0);
return (
<View>
<NativeViewGestureHandler disallowInterruption>
<MealCarousel
data={meals}
renderItem={renderItem}
sliderWidth={width}
itemWidth={width - 30}
layout="stack"
layoutCardOffset={18}
onSnapToItem={(index) => setActiveSlide(index)}
vertical={false}
/>
</NativeViewGestureHandler>
<Pagination
dotsLength={meals.length}
activeDotIndex={activeSlide}
containerStyle={{ paddingTop: 15, paddingBottom: 0 }}
dotStyle={{
width: 8,
height: 8,
borderRadius: 5,
marginHorizontal: 8,
backgroundColor: Colors.grey_400,
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
<Divider />
</View>
);
}
// () => true
);
export default RestaurantListRow;
Meal
import { Skeleton } from '#motify/skeleton';
import { cancelPendingOrder, useMutation } from 'dineden-graphql';
import { LinearGradient } from 'expo-linear-gradient';
import { useColorScheme } from 'hooks';
import moment from 'moment';
import React, { useCallback, useState } from 'react';
import { Image, ImageStyle, StyleSheet } from 'react-native';
import { Icon } from 'react-native-elements';
import { Colors, Sizes, View, Text, Button, ColorScheme } from 'theme';
import { Meal, Restaurant } from 'types';
import { useStore, PriceBadge, navigate } from 'utils';
const RestaurantMeal = ({
meal,
restaurant,
additionalMealsAvailable,
showGetThisButton,
showUpcomingOrderExtras,
pickup_time,
showDescription,
skeletonRadius = 'square',
}) => {
const { id, image_url, original_price, price_category, title, description } = meal;
const user = useStore(useCallback((state) => state.user, []));
const setUpcomingMealCanceled = useStore((state) => state.setUpcomingMealCanceled);
const upcomingMeal = useStore((state) => state.upcomingMeal);
const setAlert = useStore(useCallback((state) => state.setAlert, []));
const [buttonLoading, setButtonLoading] = useState<boolean>(false);
const [imageLoaded, setImageLoaded] = useState<boolean>(false);
const [GQL_cancelPendingOrder, { loading, error, data }] = useMutation(cancelPendingOrder);
const colorScheme = useColorScheme();
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<Skeleton show={!imageLoaded} radius={skeletonRadius}>
<View style={{ height: '100%' }}>
<Image
source={{ uri: image_url }}
onLoadEnd={() => {
setImageLoaded(true);
}}
resizeMode="cover"
/>
</View>
</Skeleton>
<LinearGradient colors={['transparent', 'rgba(0,0,0,0.6)']}>
<View>
<PriceBadge />
</View>
<View>
<Text>{title}</Text>
{additionalMealsAvailable && (
<View>
<Text>
{additionalMealsAvailable} more {additionalMealsAvailable > 1 ? 'meals' : 'meal'}
</Text>
</View>
)}
{showGetThisButton && (
<View>
{upcomingMeal &&
upcomingMeal.meal.id === id &&
upcomingMeal.restaurant?.id === restaurant?.id &&
user ? (
<Button
title="Selected"
size="l"
icon={{
name: 'check-circle',
size: 15,
color: 'white',
containerStyle: {
marginRight: 5,
},
}}
onPress={() => {
navigate('Meals', {
screen: 'Meals',
params: { screen: 'Upcoming' },
});
}}
/>
) : (
<Button
title="Get this meal"
size="l"
onPress={() => {
if (user) {
if (upcomingMeal) {
if (upcomingMeal.pickup_time) {
const time_now = moment();
const pickup_time = moment(upcomingMeal.pickup_time);
if (time_now > pickup_time) {
setAlert({
type: 'pickupExpired',
meal,
restaurant,
});
} else {
setAlert({
type: 'pickupAlreadyExists',
meal,
restaurant,
});
}
} else {
setAlert({
type: 'replaceUpcomingMeal',
height: 180,
meal,
restaurant,
});
}
} else {
setAlert({
type: 'getThisMeal',
height: 180,
meal,
restaurant,
});
}
} else {
setAlert({ type: 'pleaseSignIn' });
}
}}
/>
)}
</View>
)}
</View>
</LinearGradient>
</View>
<Text>{description}</Text>
</View>
);
};
export default RestaurantMeal;

Answer 1

const items=[{
id:1,
title:'one'
},{
id:2,
title:'two'
}]
//...
renderItem = ({ item }) => (<View key={item.key}><Text>{item.title}</Text></View>);
render(){
// ...
<FlatList
key={(id)=>item.id}
data={items}
renderItem={renderItem}
/>
// ...
}