d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2025-12-15 05:29:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(App): wrap session handlers in useCallback to avoid warnings on depth

Browse Source 
Wrap markSessionAsActive, markSessionAsInactive, markSessionAsProcessing,
markSessionAsNotProcessing, and replaceTemporarySession functions in
useCallback hooks to prevent unnecessary re-renders and stabilize
function references across component lifecycle. This optimization
ensures child components receiving these callbacks won't re-render
unnecessarily when AppContent re-renders.
This commit is contained in:
simos
2025-10-31 00:46:56 +00:00
parent 1bc2cf49ec
commit 53c1af33fa
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.jsx
View File

@@ -18,7 +18,7 @@
* Handles both existing sessions (with real IDs) and new sessions (with temporary IDs). * Handles both existing sessions (with real IDs) and new sessions (with temporary IDs).
*/ */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { BrowserRouter as Router, Routes, Route, useNavigate, useParams } from 'react-router-dom'; import { BrowserRouter as Router, Routes, Route, useNavigate, useParams } from 'react-router-dom';
import Sidebar from './components/Sidebar'; import Sidebar from './components/Sidebar';
import MainContent from './components/MainContent'; import MainContent from './components/MainContent';
@@ -478,14 +478,14 @@ function AppContent() {
// markSessionAsActive: Called when user sends a message to mark session as protected // markSessionAsActive: Called when user sends a message to mark session as protected
// This includes both real session IDs and temporary "new-session-*" identifiers // This includes both real session IDs and temporary "new-session-*" identifiers
const markSessionAsActive = (sessionId) => { const markSessionAsActive = useCallback((sessionId) => {
if (sessionId) { if (sessionId) {
setActiveSessions(prev => new Set([...prev, sessionId])); setActiveSessions(prev => new Set([...prev, sessionId]));
} }
}; }, []);
// markSessionAsInactive: Called when conversation completes/aborts to re-enable project updates // markSessionAsInactive: Called when conversation completes/aborts to re-enable project updates
const markSessionAsInactive = (sessionId) => { const markSessionAsInactive = useCallback((sessionId) => {
if (sessionId) { if (sessionId) {
setActiveSessions(prev => { setActiveSessions(prev => {
const newSet = new Set(prev); const newSet = new Set(prev);
@@ -493,19 +493,19 @@ function AppContent() {
return newSet; return newSet;
}); });
} }
}; }, []);
// Processing Session Functions: Track which sessions are currently thinking/processing // Processing Session Functions: Track which sessions are currently thinking/processing
// markSessionAsProcessing: Called when Claude starts thinking/processing // markSessionAsProcessing: Called when Claude starts thinking/processing
const markSessionAsProcessing = (sessionId) => { const markSessionAsProcessing = useCallback((sessionId) => {
if (sessionId) { if (sessionId) {
setProcessingSessions(prev => new Set([...prev, sessionId])); setProcessingSessions(prev => new Set([...prev, sessionId]));
} }
}; }, []);
// markSessionAsNotProcessing: Called when Claude finishes thinking/processing // markSessionAsNotProcessing: Called when Claude finishes thinking/processing
const markSessionAsNotProcessing = (sessionId) => { const markSessionAsNotProcessing = useCallback((sessionId) => {
if (sessionId) { if (sessionId) {
setProcessingSessions(prev => { setProcessingSessions(prev => {
const newSet = new Set(prev); const newSet = new Set(prev);
@@ -513,12 +513,12 @@ function AppContent() {
return newSet; return newSet;
}); });
} }
}; }, []);
// replaceTemporarySession: Called when WebSocket provides real session ID for new sessions // replaceTemporarySession: Called when WebSocket provides real session ID for new sessions
// Removes temporary "new-session-*" identifiers and adds the real session ID // Removes temporary "new-session-*" identifiers and adds the real session ID
// This maintains protection continuity during the transition from temporary to real session // This maintains protection continuity during the transition from temporary to real session
const replaceTemporarySession = (realSessionId) => { const replaceTemporarySession = useCallback((realSessionId) => {
if (realSessionId) { if (realSessionId) {
setActiveSessions(prev => { setActiveSessions(prev => {
const newSet = new Set(); const newSet = new Set();
@@ -532,7 +532,7 @@ function AppContent() {
return newSet; return newSet;
}); });
} }
}; }, []);
// Version Upgrade Modal Component // Version Upgrade Modal Component
const VersionUpgradeModal = () => { const VersionUpgradeModal = () => {