Fix infinite re-render loop in useAppsAlert causing crash#6364
Fix infinite re-render loop in useAppsAlert causing crash#6364lkostrowski merged 1 commit intomainfrom
Conversation
Wrap callback functions in useCallback to stabilize references: - handleFetchAppsWebhooks in useAppsFailedDeliveries - handleClick and handleFailedAttempt in useSidebarDotState - persist in useSidebarWebhookAlertMetadata Without stable references, these functions created new identities on every render, causing useEffect/useCallback deps in useAppsAlert to trigger continuously — firing GraphQL queries and mutations in an infinite loop on every page load. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
There was a problem hiding this comment.
Pull request overview
This pull request fixes a critical performance issue where an infinite re-render loop was causing CPU and RAM spikes on every page load. The root cause was unstable function references in the AppAlerts hook chain that triggered continuous re-renders, repeatedly firing GraphQL queries and mutations.
Changes:
- Wrapped callback functions with
useCallbackto stabilize their references across renders - Added proper dependency arrays to ensure callbacks only change when their dependencies change
- Prevented the infinite loop caused by unstable function references in useEffect dependency arrays
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/extensions/components/AppAlerts/useSidebarWebhookAlertMetadata.ts |
Wrapped persist function with useCallback and [saveMetadata] dependency to stabilize its reference |
src/extensions/components/AppAlerts/useSidebarDotState.ts |
Wrapped handleClick and handleFailedAttempt functions with useCallback and [persist] dependency to stabilize their references |
src/extensions/components/AppAlerts/useAppsFailedDeliveries.ts |
Wrapped handleFetchAppsWebhooks function with useCallback and [fetchAppsWebhooks] dependency to stabilize its reference |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6364 +/- ##
=======================================
Coverage 42.71% 42.72%
=======================================
Files 2534 2534
Lines 44006 44009 +3
Branches 10417 10434 +17
=======================================
+ Hits 18799 18802 +3
Misses 23868 23868
Partials 1339 1339 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Wrap callback functions in useCallback to stabilize references:
Without stable references, these functions created new identities on every render, causing useEffect/useCallback deps in useAppsAlert to trigger continuously — firing GraphQL queries and mutations in an infinite loop on every page load.
Scope of the change