Fix performance issues and add troubleshooting documentation #46
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Wrap all callback functions passed to useChatKit in useCallback hooks to prevent infinite re-render cycles. Previously, new callback instances were created on every render, causing useChatKit to reinitialize repeatedly, leading to browser freezes and extreme memory usage (20GB+). Changes: - Extract onClientTool, onResponseEnd, onResponseStart, onThreadChange, and onError into separate useCallback hooks with proper dependencies - This ensures stable function references across renders - Prevents unnecessary re-initialization of the ChatKit component
Memoize all configuration objects passed to useChatKit to prevent unnecessary re-initializations of the ChatKit SDK. This reduces performance overhead from the SDK's postMessage architecture. Changes: - Add useMemo import from React - Memoize themeConfig with [theme] dependency - Memoize apiConfig with [getClientSecret] dependency - Memoize startScreenConfig, composerConfig, threadItemActionsConfig with empty dependencies (static configs) - Pass onResponseEnd prop directly instead of wrapping in useCallback - Remove unnecessary render state console.debug logging - Remove comment about ChatKit error handling (self-evident) This ensures the SDK only reinitializes when actual configuration values change, not on every render due to new object references.
Document that ChatKit's iframe-based architecture can be affected by browser extensions that interfere with cross-frame messaging (postMessage). Provides guidance for: - Testing in incognito mode to rule out extension interference - Monitoring memory usage for potential issues - Considering server-side integration for production applications This helps users understand architectural tradeoffs and avoid misdiagnosing extension interference as application bugs.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
The ChatKitPanel component had severe performance issues causing:
These issues are documented in #44, and may also address similar performance concerns mentioned in #21 and #6.
Root Cause
The
useChatKithook was receiving new function and object references on every component render, causing the ChatKit SDK to continuously re-initialize. This created:useChatKitto re-run its internal effectsSolution
Commit 1: Fix infinite re-render loop (Critical Fix)
Wrapped all callback functions in
useCallbackhooks to maintain stable references:onClientTool- handles theme switching and fact recordingonResponseEnd- called when AI response completesonResponseStart- resets error state when response startsonThreadChange- clears processed facts cacheonError- error logging handlerImpact: Resolved the critical memory leak and browser stability issues.
Commit 2: Optimize configuration with memoization (Performance Enhancement)
Memoized all configuration objects passed to
useChatKit:themeConfig- memoized with[theme]dependencyapiConfig- memoized with[getClientSecret]dependencystartScreenConfig,composerConfig,threadItemActionsConfig- memoized with empty dependencies (static configs)Also removed unnecessary callback wrapper for
onResponseEnd(prop is already stable from parent).Impact: Prevents unnecessary SDK re-initializations when internal component state changes (error handling, initialization, script loading).
Commit 3: Add troubleshooting documentation
Added a "Troubleshooting" section to the README documenting:
Impact: Helps future users understand architectural tradeoffs and avoid misdiagnosing extension interference as application bugs.
Testing
Technical Details
These changes follow React performance best practices:
useCallbackfor function props to prevent unnecessary re-rendersuseMemofor complex object configurations to maintain referential equalityRelated Issues
Fixes #44 - Extreme memory usage and browser freezes
May help with #21 - Performance-related concerns
May help with #6 - Potential performance issues
Notes
During investigation, I discovered that some residual performance issues can be caused by Chrome extension interference with the ChatKit SDK's postMessage architecture. Extensions that monitor DOM changes or intercept cross-frame communication can slow down the SDK's message handlers. The code fixes in this PR address the React-level performance issues; extension interference is a separate environmental concern documented in the new Troubleshooting section.