Fix: map performance sol3

app/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { View, StyleSheet, Alert } from "react-native";
 import type { Region } from "react-native-maps";
 import MapView, { Circle, PROVIDER_GOOGLE } from "react-native-maps";
@@ -8,6 +8,7 @@ import useSupercluster from "use-supercluster";
 import MarkerWithWrapper from "@/components/MarkerWithWrapper";
 import jobs from "@/constants/jobs.json";
 import { SearchJobAdRo } from "@/models";
+import useTrackChanges from "@/hooks/useTrackChanges";
 
 export interface PointProperties {
   cluster: boolean;
@@ -120,6 +121,7 @@ const Map = () => {
     },
   });
 
+  const { renderCount, shouldTrack } = useTrackChanges(points);
   function onPointPress() {
     Alert.alert(`Clicked on point!`);
   }
@@ -134,6 +136,8 @@ const Map = () => {
           onPointPress={onPointPress}
           point={point}
           zoom={zoom}
+          shouldTrack={shouldTrack}
+          renderCount={renderCount}
         ></MarkerWithWrapper>
       );
     });

components/Marker/index.tsx

@@ -1,13 +1,22 @@
-import React from "react";
-import { Image, Text, View } from "react-native";
+import React, { Dispatch, MutableRefObject } from "react";
+import { Image, Platform, View } from "react-native";
 
+import { MapMarker } from "react-native-maps";
 import styles from "./styles";
 
 interface Props {
   companyLogo: string | null;
+  renderCount: MutableRefObject<number>;
 }
 
-export const Marker = ({ companyLogo }: Props) => {
+export const Marker = ({ companyLogo, renderCount }: Props) => {
+  const onLoadEnd = () => {
+    renderCount.current++;
+  };
+
+  const onError = () => {
+    renderCount.current++;
+  };
   return (
     <View
       style={[
@@ -23,6 +32,9 @@ export const Marker = ({ companyLogo }: Props) => {
           style={[styles.logo]}
           resizeMode="contain"
           source={{ uri: companyLogo }}
+          onLoadEnd={onLoadEnd}
+          fadeDuration={0}
+          onError={onError}
         />
       ) : (
         <Image

components/MarkerWithWrapper/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { MutableRefObject, useRef } from "react";
 import type { MapMarker } from "react-native-maps";
 import { Marker } from "react-native-maps";
 import { Marker as MarkerMap } from "@/components/Marker";
@@ -10,13 +10,16 @@ type Props = {
   onPointPress: () => void;
   isSelected: boolean;
   zoom: number;
+
+  shouldTrack: boolean;
+  renderCount: MutableRefObject<number>;
 };
 
 export default function MarkerWithWrapper({
   point,
   onPointPress,
-  zoom,
-  isSelected,
+  shouldTrack,
+  renderCount,
 }: Props) {
   const coordinates = point.geometry.coordinates;
   const markerRef = useRef<MapMarker>(null);
@@ -29,7 +32,7 @@ export default function MarkerWithWrapper({
   return (
     <Marker
       ref={markerRef}
-      tracksViewChanges={true}
+      tracksViewChanges={shouldTrack}
       coordinate={{
         latitude: lat,
         longitude: lng,
@@ -38,6 +41,7 @@ export default function MarkerWithWrapper({
     >
       <MarkerMap
         companyLogo={job.company.logoImg?.variants.min_dim_64_url ?? null}
+        renderCount={renderCount}
       />
     </Marker>
   );

hooks/useTrackChanges.tsx

@@ -0,0 +1,20 @@
+import { PointWithProperties } from "@/app";
+import { countNonNullMinDim64Urls } from "@/utils/map";
+import React, { useEffect, useRef, useState } from "react";
+
+export default function useTrackChanges(points: PointWithProperties[]) {
+  const renderCount = useRef(0);
+
+  const [shouldTrack, setShouldTrack] = useState(true);
+  useEffect(() => {
+    const nonNullURI = countNonNullMinDim64Urls(points);
+    if (nonNullURI <= renderCount.current) {
+      setShouldTrack(false);
+    }
+  }, [renderCount.current]);
+
+  return {
+    shouldTrack,
+    renderCount,
+  };
+}

utils/map.ts

@@ -0,0 +1,12 @@
+import { PointWithProperties } from "@/app";
+
+export function countNonNullMinDim64Urls(points: PointWithProperties[]) {
+  let count = 0;
+  for (let obj of points) {
+    const url = obj.properties.job?.company?.logoImg?.variants?.min_dim_64_url;
+    if (url) {
+      count++;
+    }
+  }
+  return count;
+}