How do I cease map() rerendering?

I’ve an app the place I render thumbnails through map and wrap them in a which hyperlinks to a operate which then handles with the picture press. The difficulty is that as an alternative of the 29 thumbnails I’ve mapped once I enter the view I get 58 pictures. And they’re all duplicated with no worth.

Ex. I faucet on the primary picture and it detects that it is picture quantity 0 after which handles the remainder.
I faucet on picture quantity 30 and it detects that it is picture quantity 0 however then does nothing.

I’ve tried taking that half and creating a brand new baby parts with it utilizing React.memo however that solely made it in order that the duplicate pictures now not have the styling of the unique ones, so as an alternative of getting displayed in a grid they simply organize one beneath one other.

Here is my code (I’ve not included completely the whole lot since I’ve different components which aren’t related):

operate VideosScreen({ navigation }) {
  const video = React.useRef(null);
 
<
  const [videos, setVideos] = useState([]); - 
  const [modalVisible, setModalVisible] = useState(false);
  const [youtubeLink, setYoutubeLink] = useState("");
> - from a distinct half however could also be helpful for context
 
 
const imageURL = [
    require("../assets/images/video_thumbnails/w1.jpg"),
[..28 other thumbnails..]
];
 
const handleImagePress = (index) => {
    navigation.navigate(
      "IndividualVideo",
      { pathing: index },
      { imageIndex: index }
    );
    console.log(index, "in movies.js");
  };
 
return (
 
<SafeAreaView>
          <View model={types.container}>
            {imageURL.map((imageURL, index) => (
              <Pressable key={index} onPress={() => handleImagePress(index)}>
                <Picture supply={imageURL} model={types.merchandise} />
              </Pressable>
 
[..]
 
const types = StyleSheet.create({
[..]
  container: {
    marginTop: 20,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "middle",
    rowGap: 10,
    columnGap: 10,
    fontFamily: "Avenir",
  },
  merchandise: {
    width: 384,
    top: 216,
  },
 

What’s the situation? Thanks quite a bit

roosho Senior Engineer (Technical Services)

I am Rakib Raihan RooSho, Jack of all IT Trades. You got it right. Good for nothing. I try a lot of things and fail more than that. That's how I learn. Whenever I succeed, I note that in my cookbook. Eventually, that became my blog. 

See Full Bio

IT Support Specialist Server and Storage Specialist Dell MidRange Storage Solutions Specialist