wsh-crok-render-optimization

name	wsh-crok-render-optimization
description	Crok AI chat rendering optimization — SSE debouncing, ChatMessage memoization, Markdown re-render prevention

WSH: Crok AI Rendering Optimization

Crok AI chat user flow scores TBT=0.00/25. The server sends ALL SSE chunks in a synchronous loop (no delays), causing the client to receive and process all events nearly simultaneously. Each event triggers React state updates and Markdown re-rendering.

Use this skill when optimizing the Crok AI chat performance, SSE handling, or Markdown rendering.

Techniques

1. Debounce SSE State Updates with requestAnimationFrame

The current useSSE hook calls setContent() on every SSE message event. When the server sends all chunks synchronously, the client receives a burst of events that each trigger a React render.

// Current (use_sse.ts line 59):
eventSource.onmessage = (event) => {
  // ...
  contentRef.current = newContent;
  setContent(newContent);  // Triggers render on EVERY message
};

// Fix: Debounce with rAF
const rafRef = useRef<number | null>(null);

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data)  T;
   isDone = options.?.(data) ?? ;
   (isDone) {
     (rafRef.) (rafRef.);
    (contentRef.);
    options.?.(contentRef.);
    ();
    ;
  }
  contentRef. = options.(data, contentRef.);
   (rafRef. === ) {
    rafRef. = ( {
      rafRef. = ;
      (contentRef.);
    });
  }
};