マップのメモ化

components/trainMenu.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useMemo } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
@@ -9,6 +9,35 @@ export default function TrainMenu({
   style,
 }) {
   const mapRef = useRef();
+  const stationPin = useMemo(
+    () =>
+      Object.keys(stationData).map((d, indexBase) =>
+        stationData[d].map((D, index) => {
+          if (!D.StationMap) return null;
+          const latlng = D.StationMap.replace(
+            "https://www.google.co.jp/maps/place/",
+            ""
+          ).split(",");
+          if (latlng.length == 0) return null;
+          return (
+            <Marker
+              key={index + indexBase}
+              coordinate={{
+                latitude: parseFloat(latlng[0]),
+                longitude: parseFloat(latlng[1]),
+              }}
+              onPress={() => {
+                webview.current?.injectJavaScript(
+                  `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
+                );
+                if (navigate) navigate("Apps");
+              }}
+            ></Marker>
+          );
+        })
+      ),
+    [stationData]
+  );
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
       <MapView
@@ -27,32 +56,7 @@ export default function TrainMenu({
           longitudeDelta: 1.8,
         }}
       >
-        {stationData &&
-          Object.keys(stationData).map((d) =>
-            stationData[d].map((D, index) => {
-              if (!D.StationMap) return null;
-              const latlng = D.StationMap.replace(
-                "https://www.google.co.jp/maps/place/",
-                ""
-              ).split(",");
-              if (latlng.length == 0) return null;
-              return (
-                <Marker
-                  key={index}
-                  coordinate={{
-                    latitude: parseFloat(latlng[0]),
-                    longitude: parseFloat(latlng[1]),
-                  }}
-                  onPress={() => {
-                    webview.current?.injectJavaScript(
-                      `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
-                    );
-                    if (navigate) navigate("Apps");
-                  }}
-                ></Marker>
-              );
-            })
-          )}
+        {stationPin}
       </MapView>
       {navigate && (
         <View style={{ flexDirection: "row" }}>