Combining Virtual Scroll With AI — Keeping 50,000 Log Lines Fast While Adding Gemini

#ai #gemini #react #programming

If this is useful, a ❤️ helps others find it.

All tests run on an 8-year-old MacBook Air.

HiyokoLogcat renders 50,000+ log lines without freezing, and has a Gemini AI button on every error line.

These two features interact in non-obvious ways. Here's what I had to think through.

The core tension

Virtual scroll works by only rendering visible rows. Rows outside the viewport are unmounted from the DOM.

AI buttons live on rows. If a row is unmounted, its button state is gone too.

This means: if a user triggers a diagnosis, scrolls away, and scrolls back — the loading state is lost and the overlay might not reappear correctly.

Solution: lift AI state out of the row

Don't store diagnosis state inside the row component. Store it at the top level, keyed by line index.

// Top level — persists regardless of scroll position
const [diagnosisStates, setDiagnosisStates] = useState<
  Record
>({});
const [diagnosisResults, setDiagnosisResults] = useState<
  Record
>({});

// Pass down to each row
const handleDiagnose = async (idx: number) => {
  setDiagnosisStates(prev => ({ ...prev, [idx]: 'loading' }));

  try {
    const result = await invoke('diagnose', { idx });
    setDiagnosisResults(prev => ({ ...prev, [idx]: result }));
    setDiagnosisStates(prev => ({ ...prev, [idx]: 'done' }));
  } catch {
    setDiagnosisStates(prev => ({ ...prev, [idx]: 'error' }));
  }
};

When the row remounts after scrolling back, it reads its state from the top-level map. The diagnosis result is still there.

The ring buffer + virtual scroll interaction

The Rust backend keeps a ring buffer of 2,000 lines. As new logs arrive, old ones are evicted.

If line 847 triggered a diagnosis and then 2,000 new lines arrive, line 847 is gone from the buffer. The diagnosis result is still in the React state — but if the user tries to re-diagnose, the context is gone.

Handle this gracefully:

const handleRediagnose = async (idx: number) => {
  if (idx < bufferStartIdx) {
    // Line is no longer in the ring buffer
    showToast('このログ行はバッファから削除されました');
    return;
  }
  await handleDiagnose(idx);
};

Performance: don't re-render all rows on diagnosis

When diagnosis state updates, you don't want all 50,000 rows to re-render.

Use React.memo on the row component and pass only the relevant state slice:

const LogRow = React.memo(({
  line,
  diagnosisState,
  onDiagnose,
}: LogRowProps) => {
  // Only re-renders when its own diagnosisState changes
  return (


      {line.message}
      {line.level === 'E' && (

      )}


  );
});

With React.memo, a diagnosis on line 847 only re-renders row 847 — not the 49,999 others.

The library: react-virtuoso

I use react-virtuoso for virtual scroll. It handles the mount/unmount lifecycle cleanly and integrates well with dynamic item heights (log lines vary in length).

import { Virtuoso } from 'react-virtuoso';

 (
     handleDiagnose(idx)}
    />
  )}
/>

Hiyoko PDF Vault → https://hiyokoko.gumroad.com/l/HiyokoPDFVault
X → @hiyoyok

DEV Community