mirror of
https://github.com/jlengrand/Maestro.git
synced 2026-03-10 08:31:19 +00:00
MAESTRO: Phase 02 - useDeferredValue for input responsiveness
Add React's useDeferredValue to prioritize input field responsiveness while allowing expensive components to defer their updates. InputArea uses the immediate inputValue for responsive typing, while the prompt composer uses deferredInputValue to avoid blocking keystrokes.
This commit is contained in:
@@ -3,7 +3,8 @@ import React, {
|
||||
useEffect,
|
||||
useRef,
|
||||
useMemo,
|
||||
useCallback
|
||||
useCallback,
|
||||
useDeferredValue
|
||||
} from 'react';
|
||||
import { SettingsModal } from './components/SettingsModal';
|
||||
import { SessionList } from './components/SessionList';
|
||||
@@ -4889,6 +4890,13 @@ You are taking over this conversation. Based on the context above, provide a bri
|
||||
|
||||
// Use local state for responsive typing - no session state update on every keystroke
|
||||
const inputValue = isAiMode ? aiInputValueLocal : terminalInputValue;
|
||||
|
||||
// PERF: useDeferredValue allows React to defer re-renders of expensive components
|
||||
// that consume the input value for filtering/preview purposes. InputArea uses inputValue
|
||||
// directly for responsive typing, while non-critical consumers like slash command filtering
|
||||
// and prompt composer can use the deferred value to avoid blocking keystrokes.
|
||||
const deferredInputValue = useDeferredValue(inputValue);
|
||||
|
||||
// PERF: Memoize setInputValue to maintain stable reference - prevents child re-renders
|
||||
// when this callback is passed as a prop. The conditional selection based on isAiMode
|
||||
// was creating new function references on every render.
|
||||
@@ -12858,7 +12866,7 @@ You are taking over this conversation. Based on the context above, provide a bri
|
||||
activeGroupChatId
|
||||
? groupChats.find(c => c.id === activeGroupChatId)
|
||||
?.draftMessage || ''
|
||||
: inputValue
|
||||
: deferredInputValue
|
||||
}
|
||||
onPromptComposerSubmit={handlePromptComposerSubmit}
|
||||
onPromptComposerSend={handlePromptComposerSend}
|
||||
|
||||
Reference in New Issue
Block a user