I memo my renderItemList but its rerender. I want to prevent it but it does not work.
If I tap on ProductOwner (onPressName) then I open a Modal and while the Modal is opening I set the state userID. Every time when I set the state, my renderItem are rendered. So I want to prevent it.
Main
const CarouselParallaxProducts = ({ ...props }: CarouselPropsProduct) => {
const navigation = useNavigation<NativeStackNavigationProp<RootStackParams>>();
const modalOwner = useRef<BottomSheetModal>(null);
const [datas, setDatas] = useState<[]>([]);
const [userID, setUserID] = useState<number>(0);
const handleOpenModalOwner = (user_id: number) => (setUserID(user_id), modalOwner.current?.present());
const renderItem: CarouselRenderItem<IProductCardAuto> = ({ item }) => (console.log('rerender'),
<ProductCardAuto
{...item}
onPressName={handleOpenModalOwner}
/>
)
return (
<>
<Carousel
{...props}
width={width * 0.7}
height={290}
style={s.carouselThreeItems}
defaultIndex={1}
mode='parallax'
pagingEnabled
snapEnabled
renderItem={renderItem}
/>
</>
)
}
const s = StyleSheet.create({
carouselThreeItems: {
justifyContent: 'center',
alignItems: 'center',
width
},
});
export default CarouselParallaxProducts;
ProductCardAuto
import { Image, Pressable, StyleSheet, Text, View, Dimensions } from 'react-native';
import React, { memo } from 'react';
import { IProductCardAuto } from './Model';
import { Stars } from '../Stars';
import { globalStyles } from '../../shared/GlobalStyles';
import { ProductOwner } from '../ProductOwner';
const { width } = Dimensions.get('window');
const MAX_WIDTH_NAME = (width / 3) - 16;
function isEqual(prev: IProductCardAuto, next: IProductCardAuto) {
if(prev.id === next.id) {
return true;
} else {
return false;
}
}
const ProductCardAuto = ({
user,
id,
name,
desc,
video,
photos,
onPressName
}: IProductCardAuto) => {
return (
<Pressable onPress={onPressProduct} style={s.card}>
<Image
source={{uri: photos[0].photo}}
style={s.image}
resizeMode='contain'
/>
<Text numberOfLines={1} style={s.name}>{ name }</Text>
<ProductOwner
name={user.username}
image={user.profile_image}
is_verification={user.is_verification}
nameStyle={s.ownerName}
onPressName={() => onPressName(user.user_id)}
/>
</Pressable>
)
}
export default memo(ProductCardAuto, isEqual);
what I am doing wrong ? I memo it and check when product.id is changing then I want to rerender else it should not rerender.