useeffect関係の機能最適化

App.js

@@ -32,7 +32,9 @@ if (Platform.OS === "android") {
 }
 
 export default function App() {
-  useEffect(() => UpdateAsync(), []);
+  useEffect(() => {
+    UpdateAsync();
+  }, []);
 
   const ProviderTree = buildProvidersTree([
     AllTrainDiagramProvider,

stateBox/useAllTrainDiagram.js

@@ -16,11 +16,13 @@ export const AllTrainDiagramProvider = ({ children }) => {
   const [allTrainDiagram, setAllTrainDiagram] = useState(trainList);
   const [allCustonTrainData, setAllCustonTrainData] = useState([]); // カスタム列車データ
   const [keyList, setKeyList] = useState(); // 第二要素
-  useEffect(
-    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
-    [allTrainDiagram]
-  );
-  const getTrainDiagram = () => fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
+  useEffect(() => {
+    if (allTrainDiagram && Object.keys(allTrainDiagram).length > 0)
+      setKeyList(Object.keys(allTrainDiagram));
+    else setKeyList([]);
+  }, [allTrainDiagram]);
+  const getTrainDiagram = () =>
+    fetch("https://n8n.haruk.in/webhook/JR-shikoku-diagram-migrate-original")
       .then((res) => res.json())
       .then((res) => res.data)
       .then((res) => {
@@ -43,11 +45,12 @@ export const AllTrainDiagramProvider = ({ children }) => {
           });
       });
 
-  useEffect(getTrainDiagram, []);
+  useEffect(() => {
+    getTrainDiagram();
+  }, []);
   useInterval(getTrainDiagram, 30000); //30秒毎に全在線列車取得
 
-
-  const getCustomTrainData = ()=>{
+  const getCustomTrainData = () => {
     fetch("https://n8n.haruk.in/webhook/jr-shikoku-position-custom-datalist")
       .then((res) => res.json())
       .then((res) => {
@@ -56,8 +59,7 @@ export const AllTrainDiagramProvider = ({ children }) => {
       .catch(() => {
         alert("カスタム列車データの取得に失敗しました。");
       });
-  }
-
+  };
 
   useEffect(() => {
     // カスタム列車データの取得

stateBox/useAreaInfo.js

@@ -378,7 +378,9 @@ export const AreaInfoProvider = ({ children }) => {
         );
       });
   };
-  useEffect(getAreaData, []);
+  useEffect(() => {
+    getAreaData();
+  }, []);
   useInterval(getAreaData, 60000); //60秒毎に全在線列車取得
   return (
     <AreaInfoContext.Provider

stateBox/useCurrentTrain.js

@@ -71,7 +71,9 @@ export const CurrentTrainProvider = ({ children }) => {
     webview.current?.injectJavaScript(i);
   };
 
-  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
+  useEffect(() => {
+    getCurrentTrain();
+  }, []); //初回だけ現在の全在線列車取得
 
   useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
 

stateBox/useUserPosition.tsx

@@ -58,7 +58,9 @@ export const UserPositionProvider: FC<Props> = ({ children }) => {
     if (Platform.OS == "web") return;
     getLocationPermission();
   }, []);
-  useEffect(getCurrentPosition, [locationStatus]);
+  useEffect(() => {
+    getCurrentPosition();
+  }, [locationStatus]);
   useInterval(getCurrentPosition, 5000);
 
   return (