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:
parent
ba24649a52
commit
ec17ad5805
13
SetItem.tsx
13
SetItem.tsx
|
@ -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,7 +8,8 @@ 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,
|
item,
|
||||||
settings,
|
settings,
|
||||||
ids,
|
ids,
|
||||||
|
@ -22,7 +23,7 @@ export default function SetItem({
|
||||||
setIds: (value: number[]) => void;
|
setIds: (value: number[]) => void;
|
||||||
disablePress?: boolean;
|
disablePress?: boolean;
|
||||||
customBg?: string;
|
customBg?: string;
|
||||||
}) {
|
}) => {
|
||||||
const { dark } = useTheme();
|
const { dark } = useTheme();
|
||||||
const navigation = useNavigation<NavigationProp<StackParams>>();
|
const navigation = useNavigation<NavigationProp<StackParams>>();
|
||||||
|
|
||||||
|
@ -33,7 +34,8 @@ export default function SetItem({
|
||||||
|
|
||||||
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)
|
||||||
|
return navigation.navigate("EditSet", { set: item });
|
||||||
const removing = ids.find((id) => id === item.id);
|
const removing = ids.find((id) => id === item.id);
|
||||||
if (removing) setIds(ids.filter((id) => id !== item.id));
|
if (removing) setIds(ids.filter((id) => id !== item.id));
|
||||||
else setIds([...ids, item.id]);
|
else setIds([...ids, item.id]);
|
||||||
|
@ -79,3 +81,6 @@ export default function SetItem({
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default SetItem;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user