react native why my renderItem rereners although I use memo?

Viewed 25

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.

0 Answers
Related