usebruno · sachin-thakur-bruno · Sep 4, 2026 · Sep 7, 2026 · Sep 7, 2026 · Sep 7, 2026
@@ -142,6 +142,49 @@ module.exports = runESMImports().then(() => defineConfig([
       'react-hooks/exhaustive-deps': 'warn'
     }
   },
+  {
+    // Prevent coarse Redux subscriptions. `state.collections.collections` and
+    // `state.tabs.tabs` are replaced frequently, so subscribing to either causes
+    // unnecessary re-renders when unrelated items or tabs change.
+    //
+    // Prefer narrow selectors from src/selectors/ when the value affects rendering.
+    // If the value is only needed at event time and does not affect rendering,
+    // read it from the store inside the event handler.
+    //
+    // Kept at `warn` during migration; change to `error` once existing violations
+    // have been converted.
+    files: ['packages/bruno-app/src/{components,providers,hooks}/**/*.{js,jsx,ts,tsx}'],
+    ignores: ['**/*.spec.*', '**/*.test.*'],
+    rules: {
+      'no-restricted-syntax': [
+        'warn',
+        {
+          selector:
+            'CallExpression[callee.name="useSelector"] > ArrowFunctionExpression > MemberExpression.body[property.name="collections"][object.type="MemberExpression"][object.property.name="collections"][object.object.type="Identifier"]',
+          message:
+            'Do not subscribe to state.collections.collections. Use a narrow selector from src/selectors/collections (for example, selectCollectionByUid or selectItemByUid).'
+        },
+        {
+          selector:
+            'CallExpression[callee.name="useSelector"] > ArrowFunctionExpression > MemberExpression.body[property.name="collections"][object.type="Identifier"]',
+          message:
+            'Do not subscribe to the whole state.collections slice. Select only the data the component needs from src/selectors/collections.'
+        },
+        {
+          selector:
+            'CallExpression[callee.name="useSelector"] > ArrowFunctionExpression > MemberExpression.body[property.name="tabs"][object.type="MemberExpression"][object.property.name="tabs"][object.object.type="Identifier"]',
+          message:
+            'Do not subscribe to state.tabs.tabs. Use a narrow selector such as selectTabByUid, selectActiveTab, or makeSelectTabsForCollection.'
+        },
+        {
+          selector:
+            'CallExpression[callee.name="useSelector"] > ArrowFunctionExpression > MemberExpression.body[property.name="tabs"][object.type="Identifier"]',
+          message:
+            'Do not subscribe to the whole state.tabs slice. Select only the data the component needs from src/selectors/tab.'
+        }
+      ]
+    }
+  },
   {
     // It prevents lint errors when using CommonJS exports (module.exports) in Jest mocks.
     files: ['packages/bruno-app/src/test-utils/mocks/codemirror.js'],

@@ -1,14 +1,15 @@
 import React, { useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { produce } from 'immer';
-import find from 'lodash/find';
 import get from 'lodash/get';
 import {
+  findCollectionByUid,
   findItemInCollection,
   findItemInCollectionByPathname,
   getGlobalEnvironmentVariables,
   getGlobalEnvironmentVariablesMasked
 } from 'utils/collections';
+import { selectCollections } from 'src/selectors/collections';
+import { selectTabs, selectActiveTabUid } from 'src/selectors/tab';
 import { ScopedPersistenceProvider } from 'hooks/usePersistedState/PersistedScopeProvider';
 import TabPanelErrorBoundary from 'components/RequestTabPanel/TabPanelErrorBoundary';
 import AppView from 'components/AppView';
@@ -25,40 +26,38 @@ const APP_CAPABLE_TAB_TYPES = new Set([
 ]);
 
 const AppPreviewKeepAlive = () => {
-  const tabs = useSelector((state) => state.tabs.tabs);
-  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
-  const _collections = useSelector((state) => state.collections.collections);
+  const tabs = useSelector(selectTabs);
+  const activeTabUid = useSelector(selectActiveTabUid);
+  const collections = useSelector(selectCollections);
   const globalEnvironments = useSelector((state) => state.globalEnvironments?.globalEnvironments);
   const activeGlobalEnvironmentUid = useSelector(
     (state) => state.globalEnvironments?.activeGlobalEnvironmentUid
   );
 
-  const collections = useMemo(() => {
-    const globalEnvironmentVariables = getGlobalEnvironmentVariables({
-      globalEnvironments,
-      activeGlobalEnvironmentUid
-    });
-    const globalEnvSecrets = getGlobalEnvironmentVariablesMasked({
-      globalEnvironments,
-      activeGlobalEnvironmentUid
-    });
-    return produce(_collections, (draft) => {
-      for (const collection of draft) {
-        collection.globalEnvironmentVariables = globalEnvironmentVariables;
-        collection.globalEnvSecrets = globalEnvSecrets;
-        collection.globalEnvironments = globalEnvironments;
-        collection.activeGlobalEnvironmentUid = activeGlobalEnvironmentUid;
-      }
-    });
-  }, [_collections, globalEnvironments, activeGlobalEnvironmentUid]);
-
   const everActiveRef = useRef(new Set());
 
   const appTabs = useMemo(() => {
     const out = [];
+    let globals = null;
+    const mergedByUid = new Map();
+    const withGlobals = (collection) => {
+      if (!mergedByUid.has(collection.uid)) {
+        if (!globals) {
+          globals = {
+            globalEnvironmentVariables: getGlobalEnvironmentVariables({ globalEnvironments, activeGlobalEnvironmentUid }),
+            globalEnvSecrets: getGlobalEnvironmentVariablesMasked({ globalEnvironments, activeGlobalEnvironmentUid }),
+            globalEnvironments,
+            activeGlobalEnvironmentUid
+          };
+        }
+        mergedByUid.set(collection.uid, { ...collection, ...globals });
+      }
+      return mergedByUid.get(collection.uid);
+    };
+
     for (const tab of tabs) {
       if (tab.type && !APP_CAPABLE_TAB_TYPES.has(tab.type)) continue;
-      const collection = find(collections, (c) => c.uid === tab.collectionUid);
+      const collection = findCollectionByUid(collections, tab.collectionUid);
       // File-mode collections render everything through FileEditor.
       if (!collection || collection.fileMode) continue;
       let item = findItemInCollection(collection, tab.uid);
@@ -68,7 +67,7 @@ const AppPreviewKeepAlive = () => {
       if (!item || item.partial || item.loading) continue;
 
       if (item.type === 'app') {
-        out.push({ tabUid: tab.uid, collection, item, kind: 'standalone' });
+        out.push({ tabUid: tab.uid, collection: withGlobals(collection), item, kind: 'standalone' });
         continue;
       }
 
@@ -77,11 +76,11 @@ const AppPreviewKeepAlive = () => {
         && tab.appPreview !== false;
       if (appEnabled) {
         const code = get(itemSource, 'app.code', '');
-        out.push({ tabUid: tab.uid, collection, item, kind: 'request', code });
+        out.push({ tabUid: tab.uid, collection: withGlobals(collection), item, kind: 'request', code });
       }
     }
     return out;
-  }, [tabs, collections]);
+  }, [tabs, collections, globalEnvironments, activeGlobalEnvironmentUid]);
 
   const validUids = new Set(appTabs.map((t) => t.tabUid));
   for (const uid of [...everActiveRef.current]) {

@@ -221,6 +221,19 @@ const EnvVarValueCell = ({
   );
 };
 
+const ErrorMessage = React.memo(({ id, error }) => {
+  if (!error) {
+    return null;
+  }
+
+  return (
+    <span>
+      <IconAlertCircle id={id} data-testid="env-var-name-error" className="text-red-600 cursor-pointer" size={20} />
+      <Tooltip className="tooltip-mod" anchorId={id} html={error} />
+    </span>
+  );
+});
+
 const EnvironmentVariablesTable = ({
   environment,
   inheritedEnvironmentVariables = [],
@@ -371,12 +384,12 @@ const EnvironmentVariablesTable = ({
   );
   const workspaceProcessEnvVariables = activeWorkspace?.processEnvVariables;
   // `_collection` flows into every row's MultiLineEditor as the variable-resolution
-  // context. Without memoization, `cloneDeep(collection)` runs on every render —
-  // and Formik triggers a re-render on every keystroke, so a single env edit
-  // session can deep-clone the entire collection 100+ times. That's the
-  // dominant cost behind the test-budget flake.
+  // context. The copy exists only so the three fields below can be attached without
+  // writing to Redux state, so a shallow spread is enough, every consumer
+  // (getAllVariables, mergeVars, brunoVarInfo) reads the nested structures and never
+  // mutates them
   const _collection = useMemo(() => {
-    const c = collection ? cloneDeep(collection) : {};
+    const c = collection ? { ...collection } : {};
     c.globalEnvironmentVariables = globalEnvironmentVariables;
     c.globalEnvSecrets = globalEnvSecrets;
     c.globalEnvironments = globalEnvironments;
@@ -606,32 +619,6 @@ const EnvironmentVariablesTable = ({
 
   const duplicateSecretNames = useMemo(() => getDuplicateSecretNames(formik.values), [formik.values]);
 
-  const ErrorMessage = ({ name, index }) => {
-    const meta = formik.getFieldMeta(name);
-    const id = `error-${name}-${index}`;
-
-    const isLastRow = index === formik.values.length - 1;
-    const variable = formik.values[index];
-    const isEmptyRow = !variable?.name || variable.name.trim() === '';
-
-    if (isLastRow && isEmptyRow) {
-      return null;
-    }
-
-    const isDuplicateSecret = variable?.secret && !isEmptyRow && duplicateSecretNames.has(variable.name.trim());
-    const error = meta.error || (isDuplicateSecret ? DUPLICATE_SECRET_NAME_FIELD_ERROR : null);
-
-    if (!error) {
-      return null;
-    }
-    return (
-      <span>
-        <IconAlertCircle id={id} data-testid="env-var-name-error" className="text-red-600 cursor-pointer" size={20} />
-        <Tooltip className="tooltip-mod" anchorId={id} html={error} />
-      </span>
-    );
-  };
-
   const handleRemoveVar = useCallback(
     (id) => {
       const currentValues = formik.values;
@@ -1073,6 +1060,12 @@ const EnvironmentVariablesTable = ({
             const isLastRow = actualIndex === formik.values.length - 1;
             const isEmptyRow = !variable.name || variable.name.trim() === '';
             const isLastEmptyRow = isLastRow && isEmptyRow;
+            const isDuplicateSecret
+              = variable.secret && !isEmptyRow && duplicateSecretNames.has(variable.name.trim());
+            const rowError = isLastEmptyRow
+              ? null
+              : formik.getFieldMeta(`${actualIndex}.name`).error
+                || (isDuplicateSecret ? DUPLICATE_SECRET_NAME_FIELD_ERROR : null);
 
             return (
               <>
@@ -1121,7 +1114,10 @@ const EnvironmentVariablesTable = ({
                         onKeyDown={(e) => handleNameKeyDown(actualIndex, e)}
                       />
                     </div>
-                    <ErrorMessage name={`${actualIndex}.name`} index={actualIndex} />
+                    <ErrorMessage
+                      id={`error-${actualIndex}.name-${actualIndex}`}
+                      error={rowError}
+                    />
                   </div>
                 </td>
                 <td style={{ width: columnWidths.value }} className="overflow-hidden">

@@ -15,13 +15,16 @@ const EnvironmentVariables = ({ environment, setIsModified, collection, inherite
   const environmentsDraft = collection?.environmentsDraft;
   const hasDraftForThisEnv = environmentsDraft?.environmentUid === environment.uid;
 
-  // Check for non-secret variables used in sensitive fields
+  const collectionItems = collection?.items;
+  const collectionRoot = collection?.root;
+  const environmentVariables = environment?.variables;
+
   const nonSecretSensitiveVarUsageMap = useMemo(() => {
     const result = {};
-    if (!collection || !environment?.variables) {
+    if (!environmentVariables) {
       return result;
     }
-    const nonSecretVars = environment.variables.filter((v) => v.enabled && !v.secret && v.name);
+    const nonSecretVars = environmentVariables.filter((v) => v.enabled && !v.secret && v.name);
     if (!nonSecretVars.length) {
       return result;
     }
@@ -45,20 +48,20 @@ const EnvironmentVariables = ({ environment, setIsModified, collection, inherite
       return item.root;
     };
 
-    const collectionObj = getObjectToProcess(collection);
+    const collectionObj = collectionRoot;
     sensitiveFields.forEach((fieldPath) => {
       checkSensitiveField(collectionObj, fieldPath);
     });
 
-    const items = flattenItems(collection.items || []);
+    const items = flattenItems(collectionItems || []);
     items.forEach((item) => {
       const objToProcess = getObjectToProcess(item);
       sensitiveFields.forEach((fieldPath) => {
         checkSensitiveField(objToProcess, fieldPath);
       });
     });
     return result;
-  }, [collection, environment]);
+  }, [collectionItems, collectionRoot, environmentVariables]);
 
   const hasSensitiveUsage = useCallback((name) => !!nonSecretSensitiveVarUsageMap[name], [nonSecretSensitiveVarUsageMap]);
 

@@ -1,5 +1,7 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useSelector, useDispatch, useStore } from 'react-redux';
+import { selectCollections, selectActiveWorkspace } from 'src/selectors/collections';
+import { selectTabs } from 'src/selectors/tab';
 import {
   IconSearch,
   IconX,
@@ -27,23 +29,21 @@ const GlobalSearchModal = ({ isOpen, onClose }) => {
   const debounceTimeoutRef = useRef(null);
   const dispatch = useDispatch();
 
-  const allCollections = useSelector((state) => state.collections.collections);
-  const { workspaces, activeWorkspaceUid } = useSelector((state) => state.workspaces);
-  const tabs = useSelector((state) => state.tabs.tabs);
+  const store = useStore();
+  const activeWorkspace = useSelector(selectActiveWorkspace);
 
-  const activeWorkspace = workspaces.find((w) => w.uid === activeWorkspaceUid);
-
-  const collections = useMemo(() => {
+  const getCollections = () => {
+    const allCollections = selectCollections(store.getState());
     if (!activeWorkspace) return allCollections;
 
     const workspacePaths = new Set(
       activeWorkspace.collections?.map((wc) => normalizePath(wc.path)) || []
     );
     return allCollections.filter((c) => workspacePaths.has(normalizePath(c.pathname)));
-  }, [activeWorkspace, allCollections, workspaces]);
+  };
 
   const createCollectionResults = () => {
-    const collectionResults = collections.map((collection) => ({
+    const collectionResults = getCollections().map((collection) => ({
       type: SEARCH_TYPES.COLLECTION,
       item: collection,
       name: collection.name,
@@ -65,7 +65,7 @@ const GlobalSearchModal = ({ isOpen, onClose }) => {
       results.push(DOCUMENTATION_RESULT);
     }
 
-    collections.forEach((collection) => {
+    getCollections().forEach((collection) => {
       // Search collection name
       if (searchTerms.every((term) => collection.name.toLowerCase().includes(term))) {
         results.push({
@@ -170,10 +170,10 @@ const GlobalSearchModal = ({ isOpen, onClose }) => {
     debounceTimeoutRef.current = setTimeout(() => {
       performSearch(searchQuery);
     }, SEARCH_CONFIG.DEBOUNCE_DELAY);
-  }, [collections]); // Depend on collections to recreate when they change
+  }, [activeWorkspace]); // collections are read from the store when the search runs
 
   const expandItemPath = (result) => {
-    const collection = collections.find((c) => c.uid === result.collectionUid);
+    const collection = getCollections().find((c) => c.uid === result.collectionUid);
     if (!collection) return;
 
     ensureCollectionIsMounted(collection);
@@ -246,7 +246,7 @@ const GlobalSearchModal = ({ isOpen, onClose }) => {
   };
 
   const handleResultSelection = (result) => {
-    const targetCollection = collections.find((c) => c.uid === result.collectionUid);
+    const targetCollection = getCollections().find((c) => c.uid === result.collectionUid);
     ensureCollectionIsMounted(targetCollection);
 
     if (result.type === SEARCH_TYPES.DOCUMENTATION) {
@@ -258,7 +258,7 @@ const GlobalSearchModal = ({ isOpen, onClose }) => {
     expandItemPath(result);
 
     if (result.type === SEARCH_TYPES.REQUEST) {
-      const existingTab = tabs.find((tab) => tab.uid === result.item.uid);
+      const existingTab = selectTabs(store.getState()).find((tab) => tab.uid === result.item.uid);
 
       if (existingTab) {
         dispatch(focusTab({ uid: result.item.uid }));