brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 14 Pull Requests Activity

Wrap SetItem in React.memo 

Apparently large lists in React Native should be wrapped in this,
as long as they don't have any internal state.

So this should theoretically improve performance when you scroll down
a lot.
This commit is contained in:
Brandon Presley 2023-11-15 11:29:40 +13:00
parent ba24649a52
commit ec17ad5805
1 changed files with 71 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
SetItem.tsx
View File

@ -1,6 +1,6 @@
import { NavigationProp, useNavigation } from "@react-navigation/native"; import { NavigationProp, useNavigation } from "@react-navigation/native";
import { format } from "date-fns"; import { format } from "date-fns";
import { useCallback, useMemo } from "react"; import React, { useCallback, useMemo } from "react";
import { Image } from "react-native"; import { Image } from "react-native";
import { List, Text, useTheme } from "react-native-paper"; import { List, Text, useTheme } from "react-native-paper";
import { StackParams } from "./AppStack"; import { StackParams } from "./AppStack";
@ -8,74 +8,79 @@ import { DARK_RIPPLE, LIGHT_RIPPLE } from "./constants";
import GymSet from "./gym-set"; import GymSet from "./gym-set";
import Settings from "./settings"; import Settings from "./settings";
export default function SetItem({ const SetItem = React.memo(
item, ({
settings, item,
ids, settings,
setIds, ids,
disablePress, setIds,
customBg, disablePress,
}: { customBg,
item: GymSet; }: {
settings: Settings; item: GymSet;
ids: number[]; settings: Settings;
setIds: (value: number[]) => void; ids: number[];
disablePress?: boolean; setIds: (value: number[]) => void;
customBg?: string; disablePress?: boolean;
}) { customBg?: string;
const { dark } = useTheme(); }) => {
const navigation = useNavigation<NavigationProp<StackParams>>(); const { dark } = useTheme();
const navigation = useNavigation<NavigationProp<StackParams>>();
const longPress = useCallback(() => { const longPress = useCallback(() => {
if (ids.length > 0) return; if (ids.length > 0) return;
setIds([item.id]); setIds([item.id]);
}, [ids.length, item.id, setIds]); }, [ids.length, item.id, setIds]);
const press = useCallback(() => { const press = useCallback(() => {
if (disablePress) return; if (disablePress) return;
if (ids.length === 0) return navigation.navigate("EditSet", { set: item }); if (ids.length === 0)
const removing = ids.find((id) => id === item.id); return navigation.navigate("EditSet", { set: item });
if (removing) setIds(ids.filter((id) => id !== item.id)); const removing = ids.find((id) => id === item.id);
else setIds([...ids, item.id]); if (removing) setIds(ids.filter((id) => id !== item.id));
}, [ids, item, navigation, setIds, disablePress]); else setIds([...ids, item.id]);
}, [ids, item, navigation, setIds, disablePress]);
const backgroundColor = useMemo(() => { const backgroundColor = useMemo(() => {
if (!ids.includes(item.id)) return; if (!ids.includes(item.id)) return;
if (dark) return DARK_RIPPLE; if (dark) return DARK_RIPPLE;
return LIGHT_RIPPLE; return LIGHT_RIPPLE;
}, [dark, ids, item.id]); }, [dark, ids, item.id]);
const image = useCallback(() => {
if (!settings.images || !item.image) return null;
return (
<Image source={{ uri: item.image }} style={{ height: 75, width: 75 }} />
);
}, [item.image, settings.images]);
const image = useCallback(() => {
if (!settings.images || !item.image) return null;
return ( return (
<Image source={{ uri: item.image }} style={{ height: 75, width: 75 }} /> <List.Item
); onPress={press}
}, [item.image, settings.images]); title={item.name}
description={
return ( settings.showDate ? (
<List.Item <Text style={{ color: dark ? "#909090ff" : "#717171ff" }}>
onPress={press} {format(new Date(item.created), settings.date || "P")}
title={item.name} </Text>
description={ ) : null
settings.showDate ? ( }
<Text style={{ color: dark ? "#909090ff" : "#717171ff" }}> onLongPress={longPress}
{format(new Date(item.created), settings.date || "P")} style={{ backgroundColor: customBg || backgroundColor }}
left={image}
right={() => (
<Text
style={{
alignSelf: "center",
color: dark ? "#909090ff" : "#717171ff",
}}
>
{`${item.reps} x ${item.weight}${item.unit || "kg"}`}
</Text> </Text>
) : null )}
} />
onLongPress={longPress} );
style={{ backgroundColor: customBg || backgroundColor }} }
left={image} );
right={() => (
<Text export default SetItem;
style={{
alignSelf: "center",
color: dark ? "#909090ff" : "#717171ff",
}}
>
{`${item.reps} x ${item.weight}${item.unit || "kg"}`}
</Text>
)}
/>
);
}