packages/bruno-app/src/components/EditableTable/index.js (1)

29-49: Optimize useEffect with dependency array.

The effect currently runs after every render, but it only needs to run when focusPlaceholderRef.current changes. While the early return prevents side effects, adding a dependency array improves performance.

🔎 Proposed optimization

Track the ref value in state or use a cleanup pattern:

+ const [shouldFocus, setShouldFocus] = useState(null);
+
  // Restore focus to placeholder row after an empty row is removed
  useEffect(() => {
-   if (focusPlaceholderRef.current && tableRef.current) {
-     const { columnKey } = focusPlaceholderRef.current;
+   if (shouldFocus && tableRef.current) {
+     const { columnKey } = shouldFocus;
      // Find the last row (placeholder) and focus on the appropriate input
      const tbody = tableRef.current.querySelector('tbody');
      const lastRow = tbody?.querySelector('tr:last-child');
      if (lastRow) {
        const cell = lastRow.querySelector(`[data-testid="column-${columnKey}"]`);
        const input = cell?.querySelector('input, textarea, [contenteditable]');
        if (input) {
          input.focus();
          // Place cursor at the end
          if (input.setSelectionRange && typeof input.value === 'string') {
            input.setSelectionRange(input.value.length, input.value.length);
          }
        }
      }
-     focusPlaceholderRef.current = null;
+     setShouldFocus(null);
    }
- });
+ }, [shouldFocus]);

Then update line 151:

-         focusPlaceholderRef.current = { columnKey: key };
+         setShouldFocus({ columnKey: key });

packages/bruno-app/src/ui/ResponsiveTabs/index.js (1)

216-218: Consider memoizing the key-to-object mapping.

The mapping from keys to tab objects runs on every render. While the performance impact is minimal for typical tab counts, wrapping these derivations in useMemo would avoid unnecessary recalculations.

🔎 Proposed optimization

+ const visibleTabs = useMemo(
+   () => visibleTabKeys.map((key) => tabs.find((t) => t.key === key)).filter(Boolean),
+   [visibleTabKeys, tabs]
+ );
+ const overflowTabs = useMemo(
+   () => overflowTabKeys.map((key) => tabs.find((t) => t.key === key)).filter(Boolean),
+   [overflowTabKeys, tabs]
+ );
- // Map stored keys to fresh tab objects from props (ensures indicators stay up-to-date)
- const visibleTabs = visibleTabKeys.map((key) => tabs.find((t) => t.key === key)).filter(Boolean);
- const overflowTabs = overflowTabKeys.map((key) => tabs.find((t) => t.key === key)).filter(Boolean);

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Learnt from: NikHillAgar
Repo: usebruno/bruno PR: 6279
File: packages/bruno-app/src/components/RequestPane/PromptVariables/PromptVariablesModal/index.js:79-86
Timestamp: 2025-12-02T20:48:05.670Z
Learning: In React 19+, ref callbacks support returning cleanup functions. When a ref callback returns a function, React will call it when the element unmounts or the ref changes, similar to useEffect cleanup. This is documented at https://react.dev/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback