Tackled remaining perf wins

src-web/hooks/useActiveEnvironmentVariables.ts

@@ -1,24 +1,26 @@
 import type { EnvironmentVariable } from '@yaakapp-internal/models';
-import { useMemo } from 'react';
-import { useActiveEnvironment } from './useActiveEnvironment';
-import { useEnvironments } from './useEnvironments';
+import { atom, useAtomValue } from 'jotai';
+import { activeEnvironmentAtom } from './useActiveEnvironment';
+import { environmentsBreakdownAtom } from './useEnvironments';
+
+const activeEnvironmentVariablesAtom = atom((get) => {
+  const { baseEnvironment } = get(environmentsBreakdownAtom);
+  const activeEnvironment = get(activeEnvironmentAtom);
+
+  const varMap: Record<string, EnvironmentVariable> = {};
+  const allVariables = [
+    ...(baseEnvironment?.variables ?? []),
+    ...(activeEnvironment?.variables ?? []),
+  ];
+
+  for (const v of allVariables) {
+    if (!v.enabled || !v.name) continue;
+    varMap[v.name] = v;
+  }
+
+  return Object.values(varMap);
+});
 
 export function useActiveEnvironmentVariables() {
-  const { baseEnvironment } = useEnvironments();
-  const [environment] = useActiveEnvironment();
-
-  const variables = useMemo(() => {
-    const varMap: Record<string, EnvironmentVariable> = {};
-
-    const allVariables = [...(baseEnvironment?.variables ?? []), ...(environment?.variables ?? [])];
-
-    for (const v of allVariables) {
-      if (!v.enabled || !v.name) continue;
-      varMap[v.name] = v;
-    }
-
-    return Object.values(varMap);
-  }, [baseEnvironment?.variables, environment?.variables]);
-
-  return variables;
+  return useAtomValue(activeEnvironmentVariablesAtom);
 }