diff --git a/webview-ui/src/context/ExtensionStateContext.tsx b/webview-ui/src/context/ExtensionStateContext.tsx index c7daf643e3..ac9243d572 100644 --- a/webview-ui/src/context/ExtensionStateContext.tsx +++ b/webview-ui/src/context/ExtensionStateContext.tsx @@ -142,23 +142,29 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode }, []) const handleInputChange = useCallback( + // Returns a function that handles an input change event for a specific API configuration field. + // The optional "softUpdate" flag determines whether to immediately update local state or send an external update. (field: keyof ApiConfiguration, softUpdate?: boolean) => (event: any) => { - if (softUpdate === true) { - setState((currentState) => { + // Use the functional form of setState to ensure the latest state is used in the update logic. + setState((currentState) => { + if (softUpdate) { + // Return a new state object with the updated apiConfiguration. + // This will trigger a re-render with the new configuration value. return { ...currentState, apiConfiguration: { ...currentState.apiConfiguration, [field]: event.target.value }, } - }) - return - } - setState((currentState) => { - vscode.postMessage({ - type: "upsertApiConfiguration", - text: currentState.currentApiConfigName, - apiConfiguration: { ...currentState.apiConfiguration, [field]: event.target.value }, - }) - return currentState // No state update needed + } else { + // For non-soft updates, send a message to the VS Code extension with the updated config. + // This side effect communicates the change without updating local React state. + vscode.postMessage({ + type: "upsertApiConfiguration", + text: currentState.currentApiConfigName, + apiConfiguration: { ...currentState.apiConfiguration, [field]: event.target.value }, + }) + // Return the unchanged state as no local state update is intended in this branch. + return currentState + } }) }, [],