Much better performance rendering runtime logs with ref and queue of updates

Author: madebydavid

src/components/Go.tsx

@@ -33,7 +33,7 @@ interface GoCommandProps extends Props {
 }
 
 const LogListener = ({projectId, buildId}: {projectId: string; buildId: string}) => {
-  const {tail, messages} = useGoRuntimeLogListener({projectId, buildId})
+  const {messages} = useGoRuntimeLogListener({projectId, buildId})
 
   return (
     <>
@@ -87,7 +87,7 @@ const GoCommand = ({command, gameId, onComplete, onError}: GoCommandProps): JSX.
 
   if (qrCodeData && buildId) {
     return (
-      <Box flexDirection='column'>
+      <Box flexDirection="column">
         <Title>Go Build QR Code</Title>
         <QRCodeTerminal data={qrCodeData} />
         <Text>{`Go build ID: ${getShortUUID(buildId)}`}</Text>
@@ -98,7 +98,7 @@ const GoCommand = ({command, gameId, onComplete, onError}: GoCommandProps): JSX.
 
   if (startedJobs && startedJobs?.length > 0) {
     return (
-      <Box flexDirection='column'>
+      <Box flexDirection="column">
         <Text>Generating Go build, please wait...</Text>
         <JobProgress job={startedJobs[0]} />
       </Box>

src/types/api.ts

@@ -286,4 +286,5 @@ export interface RuntimeLogEntry {
   message: string
   details?: any
   sentAt: DateTime
+  sequence: number // will be min of 1
 }

src/utils/hooks/useGoRuntimeLogListener.ts

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {DateTime} from 'luxon'
 
 import {WebSocketListener, useWebSocket} from './useWebSocket.js'
@@ -8,37 +8,62 @@ interface Props {
   projectId: string
   buildId: string
   tailLength?: number
+  maxMessages?: number
+  flushIntervalMs?: number
 }
 
 interface Response {
   messages: RuntimeLogEntry[]
   tail: RuntimeLogEntry[]
 }
 
-// Listens for Go runtime logs for a build via WebSocket and gives a tail
-export function useGoRuntimeLogListener({projectId, buildId, tailLength = 10}: Props): Response {
+// Saves incoming runtime log entries to a ref queue, and flushes them to state
+// at a regular interval. This reduces the number of re-renders.
+export function useGoRuntimeLogListener({
+  projectId,
+  buildId,
+  tailLength = 10,
+  maxMessages = 500,
+  flushIntervalMs = 100, // 10fps
+}: Props): Response {
   const [messages, setMessages] = useState<RuntimeLogEntry[]>([])
   const [tail, setTail] = useState<RuntimeLogEntry[]>([])
 
+  const queueRef = useRef<RuntimeLogEntry[]>([])
+
   const listener: WebSocketListener = {
     async eventHandler(_: string, rawLog: any) {
-      const log: RuntimeLogEntry = {
+      queueRef.current.push({
         ...rawLog,
         sentAt: DateTime.fromISO(rawLog.sentAt),
-      }
-      setMessages((prev) => [...prev, log])
-      setTail((prev) => {
-        const next = [...prev, log]
-        if (next.length > tailLength) next.shift()
-        return next
       })
-      //console.log(log.message)
     },
 
     getPattern: () => [`project.${projectId}:build.${buildId}:runtime-log`],
   }
 
   useWebSocket([listener])
 
+  useEffect(() => {
+    const id = setInterval(() => {
+      const queued = queueRef.current
+      if (queued.length === 0) return
+
+      queueRef.current = []
+
+      setMessages((prev) => {
+        const next = [...prev, ...queued]
+        return next.length > maxMessages ? next.slice(-maxMessages) : next
+      })
+
+      setTail((prev) => {
+        const next = [...prev, ...queued]
+        return next.length > tailLength ? next.slice(-tailLength) : next
+      })
+    }, flushIntervalMs)
+
+    return () => clearInterval(id)
+  }, [tailLength, maxMessages, flushIntervalMs])
+
   return {messages, tail}
 }

src/utils/hooks/useWebSocket.ts

@@ -1,4 +1,4 @@
-import {useEffect} from 'react'
+import {useEffect, useRef} from 'react'
 import {io} from 'socket.io-client'
 
 import {getAuthToken} from '@cli/api/index.js'
@@ -13,18 +13,21 @@ export interface WebSocketListener {
 
 export function useWebSocket(listeners: WebSocketListener[] = []) {
   const log = false ? console.debug : () => {}
+  const socketRef = useRef<ReturnType<typeof io> | null>(null)
 
   useEffect(() => {
     if (listeners.length === 0) {
       log('Not subscribing to WebSocket - no listeners')
       return
     }
 
-    const token = getAuthToken()
-    const socket = io(WS_URL, {
-      auth: {token},
-      forceNew: true,
-    })
+    if (!socketRef.current) {
+      const token = getAuthToken()
+      socketRef.current = io(WS_URL, {
+        auth: {token},
+      })
+    }
+    const socket = socketRef.current
 
     socket.on('connect', () => log('Connected to WebSocket'))
 
@@ -43,10 +46,12 @@ export function useWebSocket(listeners: WebSocketListener[] = []) {
 
       bindSocket(pattern)
     }
+  }, [])
 
+  useEffect(() => {
     return () => {
-      log('Disconnecting from WebSocket')
-      socket.disconnect()
+      socketRef.current?.disconnect()
+      socketRef.current = null
     }
   }, [])
 }