fix: resolve React loading state infinite loop in dynamic-remotes-runtime-environment-variables

- Fix React StrictMode infinite loading loop caused by non-memoized dependencies
- Memoize validateData function and fallbackData object in App.js
- Add fetchStartedRef to prevent concurrent fetches during mount/unmount cycles
- Properly reset fetch flags on component unmount to allow remount
- Fix loading state transition from true to false after successful env config load

Results:
- 2/5 tests now PASS (Performance and Loading, Runtime Environment Variable Tests)
- Loading screen properly transitions to main application content
- Eliminates timeout issues caused by persistent loading state

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

Author: ScriptedAlchemy

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/components/App.js

@@ -1,21 +1,25 @@
-import React, { createContext } from 'react';
+import React, { createContext, useCallback, useMemo } from 'react';
 import Main from './Main';
 import useFetchJson from '../hooks/useFetchJson';
 
 export const EnvContext = createContext();
 
 const App = () => {
+  const validateData = useCallback((data) => data && typeof data === 'object', []);
+  
+  const fallbackData = useMemo(() => ({
+    API_URL: 'https://fallback.api.com',
+    REMOTE_URL: 'http://localhost:3001/remoteEntry.js'
+  }), []);
+
   const { data, loading, error, retry } = useFetchJson(
     '/env-config.json',
     {
       maxRetries: 2,
       retryDelay: 500,
       timeout: 3000,
-      validateData: (data) => data && typeof data === 'object',
-      fallbackData: {
-        API_URL: 'https://fallback.api.com',
-        REMOTE_URL: 'http://localhost:3001/remoteEntry.js'
-      }
+      validateData,
+      fallbackData
     }
   );
 

advanced-api/dynamic-remotes-runtime-environment-variables/host/src/hooks/useFetchJson.js

@@ -15,6 +15,7 @@ const useFetchJson = (path, options = {}) => {
   const [retryCount, setRetryCount] = useState(0);
   const abortControllerRef = useRef(null);
   const isMountedRef = useRef(true);
+  const fetchStartedRef = useRef(false);
 
   const fetchData = useCallback(async () => {
     if (!path) {
@@ -23,6 +24,14 @@ const useFetchJson = (path, options = {}) => {
       return;
     }
 
+    // Skip if fetch is already in progress
+    if (fetchStartedRef.current) {
+      return;
+    }
+
+    // Mark fetch as started
+    fetchStartedRef.current = true;
+
     // Cancel previous request
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
@@ -84,6 +93,7 @@ const useFetchJson = (path, options = {}) => {
         setData(json);
         setRetryCount(0);
         setIsLoading(false);
+        fetchStartedRef.current = false; // Reset for potential retries
         return;
 
       } catch (err) {
@@ -114,12 +124,14 @@ const useFetchJson = (path, options = {}) => {
       }
 
       setIsLoading(false);
+      fetchStartedRef.current = false; // Reset for potential retries
     }
   }, [path, maxRetries, retryDelay, timeout, validateData, fallbackData]);
 
   const retry = useCallback(() => {
     setError(null);
     setRetryCount(0);
+    fetchStartedRef.current = false; // Allow refetch on retry
     fetchData();
   }, [fetchData]);
 
@@ -129,13 +141,15 @@ const useFetchJson = (path, options = {}) => {
 
   // Cleanup on unmount
   useEffect(() => {
+    isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
+      fetchStartedRef.current = false; // Reset fetch flag on unmount
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
       }
     };
-  }, []);
+  }, [path]);
 
   return { 
     data,