fix: monaco-ghost infinite loop

[astandrik]

Closes #2007
Closes #3019

1. The first problem is that useSavedQueries for present filter always returned new array as .filter returns new array
   Solution: use memo in useSavedQueries

2. The second problem is that we used useSavedQueries in in useCodeAssistHelpers - it should send saved queries independently from any user filters
   Solution: use savedQueries from settings and disregard filters

Greptile Overview

Updated On: 2025-10-28 12:13:26 UTC

Greptile Summary

This PR fixes an infinite loop in the Monaco editor code assist feature caused by unstable array references in dependency chains.

Key Changes:

• helpers.ts: Replaced useSavedQueries() hook with direct useSetting() call to bypass filter state dependency
• useSavedQueries.tsx: Added React.useMemo to memoize filtered array results, ensuring stable references when dependencies haven't changed

Root Cause:
The useSavedQueries hook called .filter() on every render, creating new array references even with identical content. This cascaded through userQueries memo → prepareUserQueriesCache callback → monacoGhostConfig memo, triggering the useEffect in YqlEditor.tsx:90 repeatedly.

Solution:
Two-pronged approach: (1) Code assist no longer needs filtered queries - it should send all saved queries for context, so switching to useSetting eliminates the filter dependency entirely. (2) For UI components that still use useSavedQueries, memoization prevents unnecessary array recreation.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The fix correctly addresses both root causes of the infinite loop: eliminates filter dependency where not needed (code assist), and memoizes where filtering is required (UI components). The changes are minimal, well-scoped, and the hook remains functional for other usages in SaveQuery.tsx and SavedQueries.tsx
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
src/containers/Tenant/Query/utils/useSavedQueries.tsx	4/5	Added React.useMemo to memoize filtered queries array, preventing unnecessary re-renders when filter is present
src/containers/Tenant/Query/QueryEditor/helpers.ts	5/5	Replaced useSavedQueries hook with direct useSetting call to get unfiltered queries for code assist, eliminating dependency on filter state

Sequence Diagram

sequenceDiagram
    participant YqlEditor
    participant useCodeAssistHelpers
    participant useSavedQueries
    participant Redux as Redux Store
    participant Monaco as Monaco Ghost

    Note over YqlEditor,Monaco: Before Fix (Infinite Loop)
    YqlEditor->>useCodeAssistHelpers: Call hook
    useCodeAssistHelpers->>useSavedQueries: Get filtered queries
    useSavedQueries->>Redux: Get filter state
    useSavedQueries->>useSavedQueries: .filter() returns NEW array
    useSavedQueries-->>useCodeAssistHelpers: New array reference
    useCodeAssistHelpers->>useCodeAssistHelpers: userQueries memo recomputes
    useCodeAssistHelpers->>useCodeAssistHelpers: monacoGhostConfig memo recomputes
    useCodeAssistHelpers-->>YqlEditor: New config reference
    YqlEditor->>YqlEditor: useEffect triggers (dependency changed)
    YqlEditor->>Monaco: Register new config
    Note over YqlEditor: Cycle repeats infinitely

    Note over YqlEditor,Monaco: After Fix (Stable)
    YqlEditor->>useCodeAssistHelpers: Call hook
    useCodeAssistHelpers->>useCodeAssistHelpers: useSetting (no filter dependency)
    useCodeAssistHelpers->>useCodeAssistHelpers: userQueries memo (stable array)
    useCodeAssistHelpers->>useCodeAssistHelpers: monacoGhostConfig memo (stable)
    useCodeAssistHelpers-->>YqlEditor: Same config reference
    YqlEditor->>YqlEditor: useEffect stable (no re-trigger)
    YqlEditor->>Monaco: Config remains registered
    Note over YqlEditor: No infinite loop

    Note over useSavedQueries: useSavedQueries still used in UI components
    useSavedQueries->>Redux: Get filter state
    useSavedQueries->>useSavedQueries: React.useMemo prevents NEW array on same deps
    useSavedQueries-->>YqlEditor: Stable filtered array for UI

Loading

CI Results

Test Status: ⚠️ FLAKY

📊 Full Report

Total	Passed	Failed	Flaky	Skipped
378	375	0	1	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

1. Scroll to row, get shareable link, navigate to URL and verify row is scrolled into view (tenant/diagnostics/tabs/queries.test.ts)
2. Copy result button copies to clipboard (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: ✅

Current: 47.07 MB | Main: 47.07 MB
Diff: +0.42 KB (0.00%)

✅ Bundle size unchanged.

ℹ️ CI Information

• Test recordings for failed tests are available in the full report.
• Bundle size is measured for the entire 'dist' directory.
• 📊 indicates links to detailed reports.
• 🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

[Copilot]

Pull Request Overview

This PR fixes an infinite loop issue in the Monaco editor caused by the useSavedQueries hook continuously returning new array references. The fix involves two key changes:

• Memoizes the filtered saved queries array to prevent unnecessary re-renders
• Replaces the useSavedQueries hook with direct useSetting usage in useCodeAssistHelpers to avoid unnecessary filtering

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/containers/Tenant/Query/utils/useSavedQueries.tsx	Added React.useMemo to prevent returning new array references on every render when filtering saved queries
src/containers/Tenant/Query/QueryEditor/helpers.ts	Changed from using useSavedQueries hook to directly accessing saved queries via useSetting, bypassing user filters for code assist

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[Copilot]

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.